:root {
	--q88-color-bg: #0b0907;
	--q88-color-bgElev: #141110;
	--q88-color-bgInset: #070504;
	--q88-color-line: #d6b26c1f;
	--q88-color-text: #f4ecd8;
	--q88-color-textMute: #f4ecd88c;
	--q88-color-gold: #d6b26c;
	--q88-color-goldDeep: #9c7a3d;
	--q88-color-goldLight: #f0d9a4;
	--q88-color-danger: #c64a3b;
	--q88-color-dangerInk: #e06655;
	--q88-color-win: #7fb069;
	--radius: 2px;
	--font-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	color: var(--q88-color-text);
	background: var(--q88-color-bg);
	font-family: var(--font-sans);
	font-optical-sizing: auto;
}

.top {
	display: flex;
	justify-content: space-between;
	gap: 1.25rem;
	align-items: center;
	padding: 1.5rem 1.75rem 1rem;
	border-bottom: 1px solid var(--q88-color-line);
}

.brand {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.brand-logo {
	display: block;
	height: 46px;
	width: auto;
}

.eyebrow,
.section-mark,
.list-title {
	margin: 0;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--q88-color-gold);
	font-family: var(--font-sans);
}

h1 {
	margin: 0.15rem 0 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	letter-spacing: 0.01em;
}

.meta {
	font-size: 0.8rem;
	color: var(--q88-color-textMute);
	text-align: right;
	line-height: 1.45;
}

.tabs {
	display: flex;
	gap: 0.35rem;
	padding: 0.85rem 1.75rem;
	border-bottom: 1px solid var(--q88-color-line);
}

.tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 1px solid transparent;
	background: transparent;
	color: var(--q88-color-textMute);
	padding: 0.55rem 0.95rem;
	border-radius: var(--radius);
	cursor: pointer;
	font: 500 0.82rem/1 var(--font-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tab-ico {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--q88-color-gold);
	opacity: 0.75;
}

.tab-ico svg {
	width: 100%;
	height: 100%;
}

.tab.active {
	color: var(--q88-color-text);
	border-color: var(--q88-color-line);
	background: var(--q88-color-bgElev);
}

.tab.active .tab-ico {
	opacity: 1;
}

main {
	padding: 1.35rem 1.75rem 2.75rem;
}

.panel {
	display: none;
}

.panel.active {
	display: block;
}

.layout {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 1rem;
}

.list,
.card {
	background: var(--q88-color-bgElev);
	border: 1px solid var(--q88-color-line);
	border-radius: var(--radius);
}

.list-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--q88-color-line);
}

.thread-list {
	max-height: 70vh;
	overflow: auto;
}

.thread {
	width: 100%;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--q88-color-line);
	background: transparent;
	color: inherit;
	padding: 0.9rem 1rem;
	cursor: pointer;
	font: inherit;
}

.thread:hover,
.thread.active {
	background: color-mix(in srgb, var(--q88-color-gold) 7%, var(--q88-color-bgElev));
}

.thread.active {
	box-shadow: inset 2px 0 0 var(--q88-color-gold);
}

.thread .id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--q88-color-goldLight);
	font-size: 0.84rem;
}

.thread .sub {
	display: block;
	color: var(--q88-color-textMute);
	font-size: 0.78rem;
	margin-top: 0.25rem;
}

.badge {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.62rem;
	padding: 0.12rem 0.4rem;
	border-radius: var(--radius);
	border: 1px solid var(--q88-color-line);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	vertical-align: 0.05em;
}

.badge.locked {
	color: var(--q88-color-gold);
}
.badge.open {
	color: var(--q88-color-win);
}
.badge.closed {
	color: var(--q88-color-textMute);
}

.compose {
	padding: 1.15rem 1.25rem 1.4rem;
}

.compose h2 {
	margin: 0.2rem 0 0.35rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.55rem;
}

.muted {
	color: var(--q88-color-textMute);
	font-size: 0.85rem;
	margin: 0 0 0.4rem;
}

label {
	display: grid;
	gap: 0.4rem;
	margin: 0.95rem 0;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--q88-color-textMute);
}

input[type='text'],
textarea,
select {
	width: 100%;
	border: 1px solid var(--q88-color-line);
	background: var(--q88-color-bgInset);
	color: var(--q88-color-text);
	border-radius: var(--radius);
	padding: 0.7rem 0.8rem;
	font: 400 1rem/1.4 var(--font-sans);
	text-transform: none;
	letter-spacing: normal;
	color-scheme: dark;
}

input:focus,
textarea:focus,
select:focus {
	outline: 1px solid var(--q88-color-goldDeep);
	border-color: var(--q88-color-goldDeep);
}

.file-label .file-drop {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	border: 1px dashed var(--q88-color-line);
	background: var(--q88-color-bgInset);
	color: var(--q88-color-textMute);
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.9rem;
	border-radius: var(--radius);
	cursor: pointer;
}

.file-drop svg {
	width: 22px;
	height: 22px;
	color: var(--q88-color-gold);
	flex: 0 0 auto;
}

.file-drop input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	grid-template-columns: none;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.88rem;
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 0.85rem;
}

.primary,
.danger,
.ghost,
.sm,
.icon-btn {
	appearance: none;
	border-radius: var(--radius);
	border: 1px solid var(--q88-color-line);
	padding: 0 1.15rem;
	min-height: 42px;
	cursor: pointer;
	font: 600 0.78rem/1 var(--font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.primary {
	background: var(--q88-color-gold);
	border-color: var(--q88-color-gold);
	color: var(--q88-color-bg);
}

.primary .arrow {
	margin-left: 0.35rem;
	font-weight: 400;
}

.danger {
	background: transparent;
	color: var(--q88-color-dangerInk);
	border-color: color-mix(in srgb, var(--q88-color-danger) 45%, transparent);
}

.ghost,
.icon-btn {
	background: transparent;
	color: var(--q88-color-textMute);
	padding: 0 0.7rem;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 36px;
	padding: 0;
}

.icon-btn svg {
	width: 16px;
	height: 16px;
	color: var(--q88-color-gold);
}

.sm {
	min-height: 34px;
	padding: 0 0.8rem;
	font-size: 0.7rem;
}

button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.desk-callout {
	margin: 0 1.75rem 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--q88-color-line);
	background: var(--q88-color-bgElev);
	color: var(--q88-color-textMute);
	font-size: 0.88rem;
	line-height: 1.45;
}

.desk-callout code {
	color: var(--q88-color-goldLight);
	font-size: 0.82em;
}

.rules-card {
	max-width: 640px;
}

.rules-hr {
	border: 0;
	border-top: 1px solid var(--q88-color-line);
	margin: 1.1rem 0;
}

#ruleGreeting {
	min-height: 8rem;
}

.broadcast-box .check {
	margin-top: 0.65rem;
}

.photo-preview {
	margin-top: 0.55rem;
}

.photo-preview img,
.photo-preview video {
	max-width: min(100%, 360px);
	max-height: 240px;
	border-radius: var(--radius);
	border: 1px solid var(--q88-color-line);
	object-fit: cover;
	background: var(--q88-color-bgInset);
	display: block;
}

.hidden {
	display: none !important;
}

.status {
	min-height: 1.2em;
	font-size: 0.85rem;
	color: var(--q88-color-gold);
	margin: 0.75rem 0 0;
}

.layout-3 {
	grid-template-columns: minmax(200px, 280px) minmax(280px, 1fr) minmax(240px, 300px);
}

.ghost-outline {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border-radius: var(--radius);
	border: 1px solid var(--q88-color-goldDeep);
	background: transparent;
	color: var(--q88-color-goldLight);
	padding: 0 1rem;
	min-height: 42px;
	cursor: pointer;
	font: 600 0.78rem/1 var(--font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ghost-outline svg {
	width: 16px;
	height: 16px;
}

.preview-pane {
	padding: 1rem 1rem 1.15rem;
}

.live-hint {
	margin-bottom: 0.75rem;
}

.phone {
	background: var(--q88-color-bgInset);
	border: 1px solid var(--q88-color-line);
	border-radius: 14px;
	overflow: hidden;
	min-height: 320px;
	display: flex;
	flex-direction: column;
}

.phone-lg {
	min-height: 420px;
	max-width: 360px;
	margin: 0 auto;
}

.phone-bar {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--q88-color-line);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--q88-color-gold);
	background: color-mix(in srgb, var(--q88-color-gold) 6%, var(--q88-color-bgInset));
}

.phone-chat {
	flex: 1;
	padding: 0.9rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.55rem;
}

.bubble {
	align-self: flex-start;
	max-width: 92%;
	background: #1c1814;
	border: 1px solid var(--q88-color-line);
	border-radius: 10px 10px 10px 3px;
	overflow: hidden;
}

.bubble-tag {
	padding: 0.35rem 0.65rem 0;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--q88-color-gold);
}

.bubble-photo {
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	background: #000;
}

.bubble-video {
	max-height: 220px;
	object-fit: contain;
}

.bubble-text {
	padding: 0.65rem 0.75rem 0.75rem;
	font-size: 0.92rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.bubble-text.muted {
	padding: 0.75rem;
	margin: 0;
}

.bubble-btns {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0 0.55rem 0.65rem;
}

.bubble-btn {
	display: block;
	text-align: center;
	padding: 0.45rem 0.55rem;
	border: 1px solid var(--q88-color-goldDeep);
	color: var(--q88-color-goldLight);
	text-decoration: none;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--radius);
}

.broadcast-box {
	margin: 0.85rem 0 0.25rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--q88-color-line);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--q88-color-gold) 5%, transparent);
}

.broadcast-box label {
	margin: 0;
}

.btn-fields {
	margin: 1rem 0 0.4rem;
	padding: 0.75rem 0.85rem 0.85rem;
	border: 1px solid var(--q88-color-line);
	border-radius: var(--radius);
}

.btn-fields legend {
	padding: 0 0.35rem;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--q88-color-gold);
}

.btn-fields label {
	margin: 0.45rem 0;
}

.login-gate {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.82);
	padding: 1.25rem;
}

.login-gate.hidden {
	display: none !important;
}

.login-card {
	width: min(100%, 380px);
	background: var(--q88-color-bgElev);
	border: 1px solid var(--q88-color-line);
	border-radius: var(--radius);
	padding: 1.35rem 1.25rem 1.4rem;
}

.login-card h2 {
	margin: 0.25rem 0 0.75rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.7rem;
}

.preview-modal {
	border: 1px solid var(--q88-color-line);
	border-radius: var(--radius);
	background: var(--q88-color-bgElev);
	color: var(--q88-color-text);
	padding: 0;
	max-width: min(92vw, 440px);
	width: 100%;
}

.preview-modal::backdrop {
	background: rgba(0, 0, 0, 0.72);
}

.preview-modal-inner {
	margin: 0;
	padding: 1.1rem 1.15rem 1.2rem;
}

.preview-modal-inner header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 0.75rem;
	align-items: start;
	margin-bottom: 0.9rem;
}

.preview-modal-inner header .section-mark {
	grid-column: 1;
}

.preview-modal-inner header h2 {
	grid-column: 1;
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.45rem;
}

.preview-modal-inner header .icon-btn {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.preview-modal-inner footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.95rem;
}

@media (max-width: 1100px) {
	.layout-3 {
		grid-template-columns: minmax(200px, 280px) 1fr;
	}
	.layout-3 .preview-pane {
		grid-column: 1 / -1;
	}
	.phone {
		min-height: 240px;
		max-width: 420px;
	}
}

@media (max-width: 860px) {
	.top {
		flex-direction: column;
		align-items: flex-start;
	}
	.meta {
		text-align: left;
	}
	.layout,
	.layout-3 {
		grid-template-columns: 1fr;
	}
	.thread-list {
		max-height: 280px;
	}
	.brand-logo {
		height: 40px;
	}
}


.line-filters {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.35rem;
	padding: 0.5rem 0.75rem 0.75rem;
	border-bottom: 1px solid var(--q88-color-line);
}
.line-filters label {
	margin: 0;
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--q88-color-textMute);
}
.line-filters select {
	margin-top: 0.2rem;
	width: 100%;
	font-size: 0.75rem;
	min-height: 32px;
}
.badge.stage-new { color: var(--q88-color-gold); }
.badge.stage-engaged { color: #7fb069; }
.badge.stage-handed_off { color: #6aa3c9; }
.badge.stage-converted { color: #c9a06a; }