:root {
	--background: #0f1115;
	--background-soft: #151922;
	--surface: #1b202b;
	--surface-raised: #222936;
	--surface-hover: #2a3342;

	--border: #303949;
	--border-light: #3d485a;

	--text-primary: #f2f4f8;
	--text-secondary: #aeb7c5;
	--text-muted: #7f8998;

	--accent: #d1a347;
	--accent-hover: #e0b55b;
	--accent-soft: rgba(209, 163, 71, 0.14);

	--success: #57b47a;
	--danger: #d76969;
	--info: #6f9fd8;

	--shadow-small: 0 8px 24px rgba(0, 0, 0, 0.18);
	--shadow-large: 0 24px 70px rgba(0, 0, 0, 0.4);

	--radius-small: 8px;
	--radius-medium: 14px;
	--radius-large: 20px;

	--page-width: 1240px;
	--transition: 160ms ease;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(
			circle at top left,
			rgba(209, 163, 71, 0.08),
			transparent 34rem
		),
		linear-gradient(
			180deg,
			#101319 0%,
			var(--background) 45%,
			#0b0d11 100%
		);
	color: var(--text-primary);
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	line-height: 1.5;
}

body.modal-open {
	overflow: hidden;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
a,
input,
select,
textarea {
	-webkit-tap-highlight-color: transparent;
}

button {
	color: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

code {
	color: #d7c292;
	font-family:
		"SFMono-Regular",
		Consolas,
		"Liberation Mono",
		monospace;
	font-size: 0.92em;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	line-height: 1.15;
}

h1 {
	max-width: 720px;
	margin-bottom: 24px;
	font-size: clamp(2.7rem, 6vw, 4.8rem);
	font-weight: 750;
	letter-spacing: -0.05em;
}

h2 {
	margin-bottom: 12px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	letter-spacing: -0.03em;
}

h3 {
	margin-bottom: 0;
	font-size: 1.08rem;
}

p {
	color: var(--text-secondary);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(209, 163, 71, 0.4);
	outline-offset: 3px;
}

.hidden {
	display: none !important;
}

.page-container {
	width: min(calc(100% - 40px), var(--page-width));
	margin: 0 auto;
}

.eyebrow {
	margin-bottom: 12px;
	color: var(--accent);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(15, 17, 21, 0.88);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.header-container {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	width: min(calc(100% - 40px), var(--page-width));
	min-height: 78px;
	margin: 0 auto;
	gap: 28px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.brand-mark {
	display: grid;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid rgba(209, 163, 71, 0.45);
	border-radius: 50%;
	background:
		linear-gradient(
			145deg,
			rgba(209, 163, 71, 0.24),
			rgba(209, 163, 71, 0.06)
		),
		var(--surface);
	color: var(--accent);
	font-family: Georgia, serif;
	font-size: 1.3rem;
	font-weight: 800;
	box-shadow: inset 0 0 20px rgba(209, 163, 71, 0.08);
}

.brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.brand-name {
	color: var(--text-primary);
	font-size: 1rem;
	font-weight: 760;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.brand-tagline {
	color: var(--text-muted);
	font-size: 0.72rem;
	white-space: nowrap;
}

.primary-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.navigation-link {
	padding: 10px 14px;
	border-radius: var(--radius-small);
	color: var(--text-secondary);
	font-size: 0.9rem;
	font-weight: 650;
	transition:
		background var(--transition),
		color var(--transition);
}

.navigation-link:hover {
	background: var(--surface);
	color: var(--text-primary);
}

.navigation-link.active {
	background: var(--accent-soft);
	color: var(--accent);
}

.authentication-controls {
	display: flex;
	justify-content: flex-end;
}

.guest-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobile-menu-button {
	display: none;
	width: 42px;
	height: 42px;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: var(--surface);
	cursor: pointer;
}

.mobile-menu-button span {
	display: block;
	width: 100%;
	height: 2px;
	margin: 4px 0;
	border-radius: 99px;
	background: var(--text-primary);
}

.user-controls {
	position: relative;
}

.account-button {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px 6px 6px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	cursor: pointer;
}

.account-avatar {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: #17120a;
	font-size: 0.82rem;
	font-weight: 800;
}

.account-name {
	max-width: 130px;
	overflow: hidden;
	font-size: 0.85rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	display: grid;
	min-width: 190px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	background: var(--surface-raised);
	box-shadow: var(--shadow-large);
}

.account-menu a,
.account-menu button {
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--radius-small);
	background: transparent;
	color: var(--text-secondary);
	text-align: left;
	cursor: pointer;
}

.account-menu a:hover,
.account-menu button:hover {
	background: var(--surface-hover);
	color: var(--text-primary);
}

/* Buttons */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--radius-small);
	font-size: 0.88rem;
	font-weight: 750;
	cursor: pointer;
	transition:
		transform var(--transition),
		background var(--transition),
		border-color var(--transition),
		color var(--transition),
		opacity var(--transition);
}

.button:hover:not(:disabled) {
	transform: translateY(-1px);
}

.button:active:not(:disabled) {
	transform: translateY(0);
}

.button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.button-primary {
	border-color: var(--accent);
	background: var(--accent);
	color: #17120a;
}

.button-primary:hover:not(:disabled) {
	border-color: var(--accent-hover);
	background: var(--accent-hover);
}

.button-secondary {
	border-color: var(--border);
	background: var(--surface);
	color: var(--text-primary);
}

.button-secondary:hover:not(:disabled) {
	border-color: var(--border-light);
	background: var(--surface-raised);
}

.button-text {
	min-height: auto;
	padding: 8px 10px;
	background: transparent;
	color: var(--text-secondary);
}

.button-large {
	min-height: 50px;
	padding: 13px 22px;
	font-size: 0.94rem;
}

.button-full {
	width: 100%;
}

.button-link {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--accent);
	font-weight: 750;
	cursor: pointer;
}

.button-google {
	border-color: var(--border-light);
	background: #f4f4f4;
	color: #202124;
}

.google-mark {
	display: inline-grid;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	place-items: center;
	border-radius: 50%;
	background: #ffffff;
	color: #4285f4;
	font-weight: 800;
}

/* Hero */

.hero-section {
	padding: 82px 0 68px;
}

.hero-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
	align-items: end;
	gap: 64px;
}

.hero-description {
	max-width: 680px;
	margin-bottom: 30px;
	font-size: clamp(1rem, 2vw, 1.18rem);
	line-height: 1.75;
}

.hero-features {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hero-features span {
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.025);
	color: var(--text-secondary);
	font-size: 0.8rem;
	font-weight: 650;
}

.guest-notice {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px;
	border: 1px solid rgba(111, 159, 216, 0.25);
	border-radius: var(--radius-large);
	background:
		linear-gradient(
			145deg,
			rgba(111, 159, 216, 0.1),
			rgba(111, 159, 216, 0.025)
		),
		var(--surface);
	box-shadow: var(--shadow-small);
}

.guest-notice h2 {
	margin-bottom: 6px;
	font-size: 1rem;
}

.guest-notice p {
	margin-bottom: 0;
	font-size: 0.88rem;
	line-height: 1.65;
}

.notice-icon {
	display: grid;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: 50%;
	background: rgba(111, 159, 216, 0.16);
	color: var(--info);
	font-family: Georgia, serif;
	font-weight: 800;
}

/* Analyzer */

.analyzer-section {
	padding: 0 0 90px;
}

.analyzer-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: 28px;
}

.analyzer-panel,
.sidebar-card,
.result-card,
.score-card {
	border: 1px solid var(--border);
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.025),
			transparent
		),
		var(--surface);
	box-shadow: var(--shadow-small);
}

.analyzer-panel {
	padding: clamp(22px, 4vw, 38px);
	border-radius: var(--radius-large);
}

.section-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 32px;
	gap: 20px;
}

.section-heading p:last-child {
	margin-bottom: 0;
}

.analyzer-form {
	display: grid;
	gap: 24px;
}

.form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.form-group {
	display: grid;
	gap: 8px;
}

.form-group label,
.label-row label {
	color: var(--text-primary);
	font-size: 0.84rem;
	font-weight: 750;
}

.label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.label-row span {
	color: var(--text-muted);
	font-size: 0.72rem;
}

input,
select,
textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: var(--background-soft);
	color: var(--text-primary);
	transition:
		border-color var(--transition),
		background var(--transition),
		box-shadow var(--transition);
}

input,
select {
	min-height: 48px;
	padding: 0 14px;
}

textarea {
	min-height: 120px;
	padding: 14px;
	line-height: 1.65;
	resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--border-light);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--accent);
	background: #171b23;
	box-shadow: 0 0 0 4px rgba(209, 163, 71, 0.1);
	outline: none;
}

input::placeholder,
textarea::placeholder {
	color: #667080;
}

select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
		linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 20px,
		calc(100% - 13px) 20px;
	background-repeat: no-repeat;
	background-size: 5px 5px;
	padding-right: 40px;
}

.field-help {
	margin-bottom: 0;
	color: var(--text-muted);
	font-size: 0.76rem;
	line-height: 1.55;
}

.import-card {
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	background: rgba(255, 255, 255, 0.015);
}

.import-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 6px;
	border-bottom: 1px solid var(--border);
	gap: 6px;
}

.import-tab {
	min-height: 44px;
	border: 0;
	border-radius: var(--radius-small);
	background: transparent;
	color: var(--text-secondary);
	font-size: 0.86rem;
	font-weight: 750;
	cursor: pointer;
}

.import-tab:hover {
	background: var(--surface);
	color: var(--text-primary);
}

.import-tab.active {
	background: var(--accent-soft);
	color: var(--accent);
}

.import-panel {
	padding: 22px;
}

.file-upload {
	position: relative;
	display: grid;
	min-height: 220px;
	padding: 28px;
	place-items: center;
	border: 1px dashed var(--border-light);
	border-radius: var(--radius-medium);
	background: rgba(255, 255, 255, 0.018);
	text-align: center;
	transition:
		border-color var(--transition),
		background var(--transition);
}

.file-upload:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.file-upload input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	clip-path: inset(50%);
}

.file-upload label {
	display: grid;
	place-items: center;
	gap: 6px;
	cursor: pointer;
}

.file-upload-icon {
	display: grid;
	width: 46px;
	height: 46px;
	margin-bottom: 4px;
	place-items: center;
	border: 1px solid rgba(209, 163, 71, 0.35);
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 1.4rem;
}

.file-upload-title {
	color: var(--accent);
	font-size: 0.96rem;
	font-weight: 800;
}

.file-upload-description {
	max-width: 390px;
	color: var(--text-secondary);
	font-size: 0.8rem;
}

.selected-file-name {
	margin: 14px 0 0;
	color: var(--text-muted);
	font-size: 0.76rem;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.form-message {
	padding: 13px 15px;
	border: 1px solid var(--danger);
	border-radius: var(--radius-small);
	background: rgba(215, 105, 105, 0.1);
	color: #efb4b4;
	font-size: 0.84rem;
}

.form-message.success {
	border-color: var(--success);
	background: rgba(87, 180, 122, 0.1);
	color: #a9dfba;
}

.export-summary {
	padding: 22px;
	border: 1px solid rgba(87, 180, 122, 0.3);
	border-radius: var(--radius-medium);
	background: rgba(87, 180, 122, 0.06);
}

.export-summary-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 18px;
}

.export-summary-heading .eyebrow {
	margin-bottom: 6px;
}

.status-badge {
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(87, 180, 122, 0.14);
	color: #8dd9a5;
	font-size: 0.72rem;
	font-weight: 750;
	white-space: nowrap;
}

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

.summary-item {
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-small);
	background: rgba(0, 0, 0, 0.12);
}

.summary-item span {
	display: block;
	margin-bottom: 6px;
	color: var(--text-muted);
	font-size: 0.7rem;
	text-transform: uppercase;
}

.summary-item strong {
	display: block;
	overflow: hidden;
	color: var(--text-primary);
	font-size: 0.92rem;
	text-overflow: ellipsis;
}

.export-source {
	margin: 14px 0 0;
	color: var(--text-muted);
	font-size: 0.72rem;
}

.save-message {
	margin: -12px 0 0;
	color: var(--text-muted);
	font-size: 0.78rem;
}

.sidebar {
	display: grid;
	position: sticky;
	top: 104px;
	gap: 20px;
}

.sidebar-card {
	padding: 24px;
	border-radius: var(--radius-medium);
}

.sidebar-card h2 {
	font-size: 1.04rem;
}

.sidebar-card > p {
	margin-bottom: 20px;
	font-size: 0.84rem;
	line-height: 1.65;
}

.instruction-list,
.simple-list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.instruction-list {
	display: grid;
	gap: 18px;
}

.instruction-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.instruction-list li > span {
	display: grid;
	flex: 0 0 auto;
	width: 27px;
	height: 27px;
	place-items: center;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 0.72rem;
	font-weight: 800;
}

.instruction-list p {
	margin: 3px 0 0;
	font-size: 0.8rem;
}

.simple-list {
	display: grid;
	gap: 10px;
}

.simple-list li {
	position: relative;
	padding-left: 18px;
	color: var(--text-secondary);
	font-size: 0.8rem;
}

.simple-list li::before {
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	content: "";
}

/* Results */

.results-section {
	padding: 0 0 100px;
}

.results-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;
	gap: 24px;
}

.results-header p:last-child {
	margin-bottom: 0;
}

.results-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.score-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 24px;
	gap: 16px;
}

.score-card {
	padding: 22px;
	border-radius: var(--radius-medium);
}

.score-card p {
	margin-bottom: 10px;
	color: var(--text-muted);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.score-card strong {
	display: block;
	margin-bottom: 4px;
	color: var(--accent);
	font-size: 2rem;
	line-height: 1;
}

.score-card span {
	color: var(--text-secondary);
	font-size: 0.78rem;
}

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

.result-card {
	overflow: hidden;
	border-radius: var(--radius-medium);
}

.result-card-wide {
	grid-column: 1 / -1;
}

.result-card-heading {
	padding: 18px 22px;
	border-bottom: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.018);
}

.result-content {
	padding: 22px;
}

.result-content p:last-child {
	margin-bottom: 0;
}

.result-content ul {
	margin: 0;
	padding-left: 20px;
	color: var(--text-secondary);
}

.result-content li + li {
	margin-top: 9px;
}

.card-chip-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 8px;
	list-style: none;
}

.card-chip-list li {
	margin: 0;
	padding: 7px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--background-soft);
	color: var(--text-secondary);
	font-size: 0.76rem;
}

.turn-list {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 12px;
	list-style: none;
}

.turn-list li {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: rgba(255, 255, 255, 0.015);
	gap: 14px;
}

.turn-list li + li {
	margin-top: 0;
}

.turn-number {
	color: var(--accent);
	font-size: 0.8rem;
	font-weight: 800;
}

.turn-details {
	display: grid;
	gap: 5px;
}

.turn-details strong {
	font-size: 0.85rem;
}

.turn-details p {
	margin: 0;
	font-size: 0.77rem;
	line-height: 1.55;
}

/* Footer */

.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(8, 10, 13, 0.5);
}

.footer-container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 34px;
	padding-bottom: 34px;
	gap: 32px;
}

.footer-container strong {
	display: block;
	margin-bottom: 6px;
	font-size: 0.88rem;
}

.footer-container p {
	max-width: 520px;
	margin-bottom: 0;
	color: var(--text-muted);
	font-size: 0.74rem;
}

/* Modals */

.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	padding: 24px;
	place-items: center;
	overflow-y: auto;
	background: rgba(4, 5, 7, 0.76);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.modal {
	position: relative;
	width: min(100%, 460px);
	padding: 32px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-large);
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.035),
			transparent
		),
		var(--surface-raised);
	box-shadow: var(--shadow-large);
}

.modal-large {
	width: min(100%, 720px);
}

.modal-heading {
	padding-right: 32px;
}

.modal-heading p:last-child {
	margin-bottom: 26px;
}

.modal-close-button {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	width: 38px;
	height: 38px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface);
	color: var(--text-secondary);
	font-size: 1.45rem;
	cursor: pointer;
}

.authentication-form {
	display: grid;
	gap: 18px;
}

.auth-divider {
	display: flex;
	align-items: center;
	margin: 20px 0;
	gap: 14px;
	color: var(--text-muted);
	font-size: 0.74rem;
	text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
	flex: 1;
	height: 1px;
	background: var(--border);
	content: "";
}

.modal-switch {
	display: flex;
	justify-content: center;
	margin-top: 22px;
	gap: 6px;
	color: var(--text-secondary);
	font-size: 0.82rem;
}

.example-log {
	max-height: 480px;
	margin: 0;
	padding: 20px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: #0d1015;
	color: #d7dce4;
	font-family:
		"SFMono-Regular",
		Consolas,
		"Liberation Mono",
		monospace;
	font-size: 0.78rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

/* Responsive */

@media (max-width: 1000px) {
	.header-container {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}

	.mobile-menu-button {
		display: block;
		grid-column: 2;
		grid-row: 1;
	}

	.primary-navigation,
	.authentication-controls {
		display: none;
		grid-column: 1 / -1;
		width: 100%;
	}

	.primary-navigation.open,
	.authentication-controls.open {
		display: flex;
	}

	.primary-navigation {
		flex-direction: column;
		align-items: stretch;
		padding: 10px 0;
	}

	.navigation-link {
		width: 100%;
	}

	.authentication-controls {
		justify-content: flex-start;
		padding-bottom: 18px;
	}

	.hero-container {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 34px;
	}

	.guest-notice {
		max-width: 620px;
	}

	.analyzer-layout {
		grid-template-columns: 1fr;
	}

	.sidebar {
		position: static;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

@media (max-width: 700px) {
	.page-container,
	.header-container {
		width: min(calc(100% - 28px), var(--page-width));
	}

	.header-container {
		min-height: 68px;
	}

	.brand-tagline {
		display: none;
	}

	.hero-section {
		padding: 58px 0 52px;
	}

	h1 {
		font-size: clamp(2.3rem, 13vw, 3.7rem);
	}

	.analyzer-panel {
		padding: 20px;
		border-radius: var(--radius-medium);
	}

	.section-heading,
	.results-header,
	.footer-container,
	.export-summary-heading {
		flex-direction: column;
		align-items: flex-start;
	}

	.form-row,
	.sidebar,
	.summary-grid,
	.score-grid,
	.results-grid {
		grid-template-columns: 1fr;
	}

	.result-card-wide {
		grid-column: auto;
	}

	.form-actions,
	.results-actions {
		width: 100%;
	}

	.form-actions .button,
	.results-actions .button {
		width: 100%;
	}

	.turn-list li {
		grid-template-columns: 1fr;
		gap: 7px;
	}

	.modal-backdrop {
		padding: 14px;
	}

	.modal {
		padding: 24px 20px;
		border-radius: var(--radius-medium);
	}
}

@media (max-width: 420px) {
	.brand-name {
		font-size: 0.84rem;
	}

	.brand-mark {
		width: 36px;
		height: 36px;
	}

	.guest-controls {
		width: 100%;
		flex-direction: column;
	}

	.guest-controls .button {
		width: 100%;
	}

	.hero-features {
		align-items: stretch;
		flex-direction: column;
	}

	.hero-features span {
		text-align: center;
	}
}

/* Shared logo */

.brand-logo-shell {
	display: grid;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	place-items: center;
	overflow: hidden;
	border: 1px solid rgba(209, 163, 71, 0.35);
	border-radius: 50%;
	background: var(--surface);
}

.brand-logo {
	width: 60px;
	height: 60px;
	max-width: none;
	object-fit: contain;
	transform: scale(1.18);
}

/* Shared accessibility */

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Interior page hero */

.page-hero {
	padding: 66px 0 42px;
}

.page-hero-container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.page-hero h1 {
	margin-bottom: 14px;
	font-size: clamp(2.4rem, 5vw, 4rem);
}

.page-hero-description {
	max-width: 650px;
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.7;
}

/* Signed-out and empty states */

.signed-out-panel,
.empty-state {
	padding: 64px 28px;
	border: 1px solid var(--border);
	border-radius: var(--radius-large);
	background: var(--surface);
	text-align: center;
	box-shadow: var(--shadow-small);
}

.signed-out-panel {
	margin-bottom: 90px;
}

.signed-out-panel h2,
.empty-state h2 {
	margin-bottom: 10px;
	font-size: 1.4rem;
}

.signed-out-panel p,
.empty-state p {
	max-width: 480px;
	margin: 0 auto 24px;
}

.signed-out-icon,
.empty-state-icon {
	display: grid;
	width: 54px;
	height: 54px;
	margin: 0 auto 18px;
	place-items: center;
	border: 1px solid rgba(209, 163, 71, 0.35);
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 1.4rem;
	font-weight: 800;
}

/* Deck collection */

.decks-section {
	padding: 0 0 90px;
}

.collection-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 26px;
	gap: 24px;
}

.collection-toolbar h2 {
	margin-bottom: 6px;
	font-size: 1.4rem;
}

.collection-toolbar p {
	margin-bottom: 0;
	font-size: 0.82rem;
}

.collection-search {
	width: min(100%, 310px);
}

.collection-search input {
	min-height: 44px;
}

.loading-panel {
	padding: 44px;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	background: var(--surface);
	color: var(--text-secondary);
	text-align: center;
}

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

.deck-card {
	position: relative;
	display: flex;
	min-height: 300px;
	flex-direction: column;
	overflow: visible;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.025),
			transparent
		),
		var(--surface);
	box-shadow: var(--shadow-small);
	transition:
		transform var(--transition),
		border-color var(--transition);
}

.deck-card:hover {
	border-color: var(--border-light);
	transform: translateY(-2px);
}

.deck-card-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--border);
}

.deck-format-badge {
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.deck-menu-button {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-small);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
}

.deck-menu-button:hover {
	background: var(--surface-hover);
	color: var(--text-primary);
}

.deck-action-menu {
	position: absolute;
	top: 52px;
	right: 14px;
	z-index: 10;
	display: grid;
	min-width: 150px;
	padding: 7px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-small);
	background: var(--surface-raised);
	box-shadow: var(--shadow-large);
}

.deck-action-menu button {
	padding: 9px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text-secondary);
	text-align: left;
	cursor: pointer;
}

.deck-action-menu button:hover {
	background: var(--surface-hover);
	color: var(--text-primary);
}

.deck-action-menu .danger-action {
	color: #e28b8b;
}

.deck-card-body {
	flex: 1;
	padding: 24px 20px;
}

.deck-card-body h3 {
	margin-bottom: 8px;
	font-size: 1.25rem;
}

.deck-commander {
	min-height: 44px;
	margin-bottom: 24px;
	font-size: 0.84rem;
	line-height: 1.55;
}

.deck-card-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.deck-card-stats div {
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: var(--background-soft);
}

.deck-card-stats span {
	display: block;
	margin-bottom: 4px;
	color: var(--text-muted);
	font-size: 0.67rem;
	text-transform: uppercase;
}

.deck-card-stats strong {
	font-size: 1rem;
}

.deck-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 18px;
	border-top: 1px solid var(--border);
	gap: 16px;
}

.deck-card-footer > span {
	color: var(--text-muted);
	font-size: 0.7rem;
}

.deck-search-empty {
	grid-column: 1 / -1;
	padding: 50px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	text-align: center;
}

.deck-search-empty p {
	margin-bottom: 0;
}

/* Deck editor */

.deck-form {
	display: grid;
	gap: 20px;
}

.deck-count-warning {
	padding: 12px 14px;
	border: 1px solid rgba(209, 163, 71, 0.35);
	border-radius: var(--radius-small);
	background: var(--accent-soft);
	color: #e3ca96;
	font-size: 0.8rem;
}

.deck-count-warning.success {
	border-color: rgba(87, 180, 122, 0.35);
	background: rgba(87, 180, 122, 0.1);
	color: #a9dfba;
}

.modal-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.button-danger {
	border-color: var(--danger);
	background: var(--danger);
	color: #ffffff;
}

.button-danger:hover:not(:disabled) {
	border-color: #e47b7b;
	background: #e47b7b;
}

.delete-confirmation-modal {
	width: min(100%, 430px);
}

@media (max-width: 1000px) {
	.deck-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.brand-logo-shell {
		width: 38px;
		height: 38px;
	}

	.brand-logo {
		width: 50px;
		height: 50px;
	}

	.page-hero {
		padding: 48px 0 34px;
	}

	.page-hero-container,
	.collection-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.page-hero-container .button,
	.collection-search {
		width: 100%;
	}

	.deck-grid {
		grid-template-columns: 1fr;
	}

	.modal-form-actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.modal-form-actions .button {
		width: 100%;
	}
}

/* History page */

.history-section {
	padding: 0 0 90px;
}

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

.history-summary-card {
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.025),
			transparent
		),
		var(--surface);
	box-shadow: var(--shadow-small);
}

.history-summary-card span {
	display: block;
	margin-bottom: 8px;
	color: var(--text-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.history-summary-card strong {
	color: var(--accent);
	font-size: 1.8rem;
	line-height: 1;
}

.history-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 24px;
}

.history-toolbar h2 {
	margin-bottom: 6px;
	font-size: 1.4rem;
}

.history-toolbar p {
	margin-bottom: 0;
	font-size: 0.82rem;
}

.history-filters {
	display: grid;
	grid-template-columns: minmax(180px, 280px) 190px 170px;
	gap: 10px;
}

.history-filters input,
.history-filters select {
	min-height: 44px;
}

.history-list {
	display: grid;
	gap: 14px;
}

.history-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.02),
			transparent
		),
		var(--surface);
	box-shadow: var(--shadow-small);
	transition:
		border-color var(--transition),
		transform var(--transition);
}

.history-card:hover {
	border-color: var(--border-light);
	transform: translateY(-1px);
}

.history-card-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	width: 100%;
	padding: 20px;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	gap: 24px;
}

.history-card-title {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 14px;
}

.history-card-title > div {
	min-width: 0;
}

.history-card-title h3 {
	margin-bottom: 6px;
	overflow: hidden;
	font-size: 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.history-card-title p {
	margin-bottom: 0;
	overflow: hidden;
	color: var(--text-muted);
	font-size: 0.75rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.history-result-badge {
	flex: 0 0 auto;
	padding: 6px 9px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.history-result-win {
	background: rgba(87, 180, 122, 0.14);
	color: #8dd9a5;
}

.history-result-loss {
	background: rgba(215, 105, 105, 0.14);
	color: #e99a9a;
}

.history-result-unfinished {
	background: rgba(111, 159, 216, 0.14);
	color: #9dbfe4;
}

.history-result-goldfish {
	background: var(--accent-soft);
	color: var(--accent);
}

.history-result-unspecified {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-secondary);
}

.history-card-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(58px, auto));
	gap: 10px;
}

.history-card-metrics div {
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: var(--background-soft);
	text-align: center;
}

.history-card-metrics span {
	display: block;
	margin-bottom: 3px;
	color: var(--text-muted);
	font-size: 0.62rem;
	text-transform: uppercase;
}

.history-card-metrics strong {
	font-size: 0.86rem;
}

.history-card-date {
	min-width: 140px;
	color: var(--text-muted);
	font-size: 0.72rem;
	text-align: right;
}

.history-delete-button {
	padding: 0 18px;
	border: 0;
	border-left: 1px solid var(--border);
	background: transparent;
	color: #d88989;
	font-size: 0.76rem;
	font-weight: 700;
	cursor: pointer;
}

.history-delete-button:hover {
	background: rgba(215, 105, 105, 0.08);
	color: #efaaaa;
}

.history-search-empty {
	padding: 50px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	text-align: center;
}

.history-search-empty p {
	margin-bottom: 0;
}

/* History detail modal */

.modal-extra-large {
	width: min(100%, 940px);
}

.playtest-detail-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 22px;
	gap: 12px;
}

.playtest-detail-metrics div {
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: var(--background-soft);
}

.playtest-detail-metrics span {
	display: block;
	margin-bottom: 5px;
	color: var(--text-muted);
	font-size: 0.66rem;
	text-transform: uppercase;
}

.playtest-detail-metrics strong {
	font-size: 0.92rem;
}

.playtest-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 24px;
	gap: 14px;
}

.playtest-detail-section {
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-small);
	background: rgba(255, 255, 255, 0.015);
}

.playtest-detail-section h3 {
	margin-bottom: 12px;
	font-size: 0.9rem;
}

.playtest-detail-section p {
	margin-bottom: 0;
	font-size: 0.8rem;
	line-height: 1.65;
}

.playtest-detail-section ul:not(.card-chip-list) {
	margin: 0;
	padding-left: 18px;
	color: var(--text-secondary);
	font-size: 0.8rem;
}

.playtest-detail-section li + li {
	margin-top: 7px;
}

.playtest-detail-wide {
	grid-column: 1 / -1;
}

@media (max-width: 1000px) {
	.history-summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.history-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.history-filters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.history-card-main {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.history-card-date {
		grid-column: 1 / -1;
		min-width: 0;
		text-align: left;
	}
}

@media (max-width: 700px) {
	.history-summary-grid,
	.playtest-detail-metrics,
	.playtest-detail-grid {
		grid-template-columns: 1fr;
	}

	.history-filters {
		grid-template-columns: 1fr;
	}

	.history-card {
		grid-template-columns: 1fr;
	}

	.history-card-main {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.history-card-title {
		align-items: flex-start;
	}

	.history-card-metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
	}

	.history-card-date {
		grid-column: auto;
	}

	.history-delete-button {
		min-height: 44px;
		border-top: 1px solid var(--border);
		border-left: 0;
	}

	.playtest-detail-wide {
		grid-column: auto;
	}
}