:root
{
	--bg: #f4f6f9;
	--surface: #fff;
	--soft: #f8fafc;
	--sidebar: #111827;
	--text: #172033;
	--muted: #697386;
	--subtle: #9aa4b2;
	--border: #e2e7ef;
	--primary: #4f6bed;
	--primary-dark: #3e56c5;
	--green: #19a974;
	--red: #d94f5c;
	--violet: #8a63d2;
	--blue: #4f8cc9;
	--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
	--sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mono: "SFMono-Regular", Consolas, monospace;
}

*
{
	box-sizing: border-box;
}

html
{
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body
{
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 14px var(--sans);
	-webkit-font-smoothing: antialiased;
}

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

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

.app-shell
{
	display: flex;
	min-height: 100vh;
}

.sidebar
{
	position: sticky;
	top: 0;
	display: flex;
	flex: 0 0 236px;
	flex-direction: column;
	height: 100vh;
	padding: 26px 18px 20px;
	background: var(--sidebar);
	color: #dbe3f1;
}

.brand
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 8px 28px;
}

.brand-mark
{
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 11px;
	background: linear-gradient(145deg, #6b82ff, var(--primary));
	color: white;
	font-size: 18px;
	font-weight: 800;
	box-shadow: 0 8px 22px rgba(79, 107, 237, .32);
}

.brand strong,
.brand small,
.run-status strong,
.run-status small
{
	display: block;
}

.brand strong
{
	color: white;
	font-size: 16px;
}

.brand small
{
	margin-top: 2px;
	color: #8390a5;
	font-size: 11px;
}

.nav-list
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nav-label
{
	margin: 20px 12px 6px;
	color: #637087;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nav-label:first-child
{
	margin-top: 0;
}

.nav-list a
{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 9px;
	color: #9aa7ba;
	font-size: 13px;
	font-weight: 550;
	transition: 140ms ease;
}

.nav-list a:hover,
.nav-list a.active
{
	background: #1f2937;
	color: white;
}

.nav-list a.active
{
	box-shadow: inset 3px 0 0 var(--primary);
}

.nav-icon
{
	width: 20px;
	color: #71809a;
	font-size: 18px;
	text-align: center;
}

.sidebar-action
{
	margin-top: auto;
}

.session-panel
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding: 12px 8px;
	border-top: 1px solid #283446;
}

.session-panel > span
{
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	min-width: 0;
}

.session-panel > span > i
{
	grid-row: 1 / 3;
	align-self: center;
	color: #8390a5;
}

.session-panel small,
.session-panel strong
{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.session-panel small
{
	color: #637087;
	font-size: 9px;
}

.session-panel strong
{
	color: #dbe3f1;
	font-size: 10px;
}

.session-panel button
{
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #1f2937;
	color: #9aa7ba;
	cursor: pointer;
}

.session-panel button:hover
{
	color: white;
}

.main-content
{
	width: calc(100% - 236px);
	max-width: 1580px;
	padding: 38px 44px 60px;
}

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

.eyebrow
{
	margin: 0 0 7px;
	color: var(--primary);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

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

h1
{
	margin-bottom: 7px;
	font-size: clamp(25px, 3vw, 34px);
	letter-spacing: -.035em;
}

h2
{
	margin-bottom: 4px;
	font-size: 16px;
}

.subtitle,
.card-header p,
.settings-title p
{
	margin-bottom: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55;
}

.run-status
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 260px;
	padding: 11px 14px;
	border: 1px solid var(--border);
	border-radius: 11px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.status-dot
{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px rgba(25, 169, 116, .12);
}

.status-error .status-dot
{
	background: var(--red);
}

.run-status strong
{
	max-width: 310px;
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.run-status small
{
	margin-top: 3px;
	color: var(--muted);
	font-size: 10px;
}

.stats-grid
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.stat-card
{
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 17px 18px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.stat-icon
{
	display: grid;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
}

.blue
{
	background: #edf5ff;
	color: var(--blue);
}

.violet
{
	background: #f3effc;
	color: var(--violet);
}

.green
{
	background: #eaf8f3;
	color: var(--green);
}

.red
{
	background: #fff0f1;
	color: var(--red);
}

.orange
{
	background: #fff5e7;
	color: #e59b3a;
}

.stat-card small,
.stat-card strong
{
	display: block;
}

.stat-card small
{
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 11px;
}

.stat-card strong
{
	font-size: 22px;
}

.card
{
	margin-bottom: 18px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.card-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--border);
}

.activity-card,
.rules-card
{
	overflow: hidden;
}

.quick-search
{
	display: flex;
	gap: 8px;
	width: min(100%, 500px);
}

.quick-search input
{
	flex: 1;
}

.category-tabs
{
	display: flex;
	gap: 4px;
	padding: 0 18px;
	overflow-x: auto;
	border-bottom: 1px solid var(--border);
}

.category-tab
{
	position: relative;
	flex: 0 0 auto;
	padding: 14px 10px 12px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 650;
}

.category-tab.active
{
	border-bottom: 2px solid var(--category, var(--primary));
	color: var(--text);
}

.advanced-filters
{
	border-bottom: 1px solid var(--border);
	background: var(--soft);
}

.advanced-filters summary
{
	padding: 10px 22px;
	color: var(--muted);
	cursor: pointer;
	font-size: 11px;
	font-weight: 650;
}

.filter-grid
{
	display: grid;
	grid-template-columns: repeat(5, minmax(110px, 1fr)) auto;
	gap: 10px;
	padding: 4px 22px 18px;
}

.filter-actions
{
	display: flex;
	align-items: flex-end;
	gap: 7px;
}

.email-row
{
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) 116px;
	gap: 14px;
	align-items: center;
	padding: 14px 22px;
	border-bottom: 1px solid #edf0f5;
}

.email-row:hover
{
	background: #fafbfe;
}

.email-row.has-error
{
	box-shadow: inset 3px 0 0 var(--red);
}

.email-date
{
	text-align: center;
}

.email-date strong,
.email-date small
{
	display: block;
	font-size: 10px;
}

.email-date small
{
	margin-top: 3px;
	color: var(--subtle);
}

.email-main
{
	min-width: 0;
}

.email-topline
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.email-topline > strong,
.email-main p,
.email-main > small
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.email-topline > strong
{
	font-size: 13px;
}

.email-main p,
.email-main > small
{
	display: block;
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 10px;
}

.email-main > small
{
	color: var(--subtle);
}

.category-badge
{
	flex: 0 0 auto;
	padding: 3px 7px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--category) 10%, white);
	color: color-mix(in srgb, var(--category) 82%, #111827);
	font-size: 9px;
	font-weight: 750;
}

.corrected-badge
{
	flex: 0 0 auto;
	color: var(--green);
	font-size: 9px;
	font-weight: 750;
}

.correction-control
{
	margin-top: 7px;
}

.correction-control summary
{
	width: max-content;
	color: var(--primary);
	cursor: pointer;
	font-size: 9px;
	font-weight: 700;
	list-style: none;
}

.correction-control summary::-webkit-details-marker
{
	display: none;
}

.correction-control form
{
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 7px;
}

.correction-control select
{
	width: min(260px, 100%);
	min-height: 30px;
	padding: 4px 28px 4px 8px;
	font-size: 10px;
}

.correction-control > small
{
	display: block;
	margin-top: 5px;
	color: var(--subtle);
	font-size: 9px;
}

.correction-status.is-success
{
	color: var(--green);
	font-weight: 700;
}

.correction-status.is-error
{
	color: var(--red);
	font-weight: 700;
}

.email-row.is-corrected
{
	background: color-mix(in srgb, var(--green) 4%, white);
}

.email-meta
{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 10px;
	text-align: right;
}

.email-meta span,
.email-meta strong,
.email-meta small
{
	font-size: 10px;
}

.email-meta span,
.email-meta small
{
	color: var(--muted);
}

.email-meta small
{
	grid-column: 1 / -1;
}

.notice
{
	margin-bottom: 18px;
	padding: 12px 15px;
	border: 1px solid #cdd7ff;
	border-radius: 10px;
	background: #f3f6ff;
	color: #50618e;
	font-size: 11px;
}

.notice
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.analysis-layout
{
	//max-width: 980px;
}

.stack-form
{
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px 22px;
}

.ai-flow
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-bottom: 22px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.ai-flow div
{
	display: grid;
	grid-template-columns: 28px auto;
	column-gap: 10px;
	align-items: center;
}

.ai-flow div > span
{
	display: grid;
	grid-row: 1 / 3;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: #eef1ff;
	color: var(--primary);
	font-size: 11px;
	font-weight: 800;
}

.ai-flow strong,
.ai-flow small
{
	display: block;
	font-size: 11px;
}

.ai-flow small
{
	color: var(--muted);
	font-size: 10px;
}

.ai-flow i
{
	color: var(--subtle);
	font-style: normal;
}

.result-card
{
	padding: 14px;
	border: 1px solid #bfe5d8;
	border-radius: 10px;
	background: #f0fbf7;
}

.result-card.is-error
{
	border-color: #f0c6ca;
	background: #fff5f6;
}

.result-card > div
{
	display: flex;
	justify-content: space-between;
	margin: 6px 0;
}

.result-card p
{
	margin: 0;
	color: var(--muted);
	font-size: 11px;
}

.prompt-advanced
{
	overflow: hidden;
}

.prompt-advanced summary
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	cursor: pointer;
}

.prompt-advanced summary strong,
.prompt-advanced summary small
{
	display: block;
}

.prompt-advanced summary small,
.prompt-advanced summary > span:last-child,
.field-help
{
	margin-top: 3px;
	color: var(--muted);
	font-size: 11px;
}

.prompt-advanced[open] summary
{
	border-bottom: 1px solid var(--border);
}

.prompt-editor
{
	width: 100%;
	font: 11px/1.6 var(--mono);
}

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

.category-card,
.settings-section
{
	padding: 20px 22px;
}

.category-card-head
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.category-card-head input[type="text"]
{
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 750;
}

.category-mark
{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--category);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--category) 12%, white);
}

.default-badge,
.count-badge
{
	margin-left: auto;
	padding: 4px 7px;
	border-radius: 99px;
	background: #eef1f6;
	color: var(--muted);
	font-size: 9px;
	font-weight: 700;
}

.category-fields
{
	display: grid;
	grid-template-columns: 1fr 72px;
	gap: 12px;
	margin: 14px 0;
}

.category-card textarea
{
	width: 100%;
	resize: vertical;
}

.toggle-line
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 12px 0;
	border-top: 1px solid var(--border);
}

.toggle-line strong,
.toggle-line small
{
	display: block;
}

.toggle-line strong
{
	color: var(--text);
	font-size: 11px;
}

.toggle-line small
{
	margin-top: 3px;
	font-size: 9px;
	font-weight: 400;
}

.card-actions
{
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

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

.settings-title
{
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.settings-title > span
{
	color: var(--primary);
	font: 700 10px var(--mono);
}

.settings-title h2
{
	font-size: 14px;
}

.settings-actions
{
	grid-column: 1 / -1;
	text-align: right;
}

.connection-test
{
	margin-top: -52px;
	width: max-content;
}

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

.form-grid .full
{
	grid-column: 1 / -1;
}

label
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 650;
}

.check-field
{
	flex-direction: row;
	align-items: center;
	align-self: end;
	min-height: 38px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="color"],
select,
textarea
{
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid #d8dee8;
	border-radius: 8px;
	outline: none;
	background: white;
	color: var(--text);
	font-size: 12px;
}

input:focus,
select:focus,
textarea:focus
{
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(79, 107, 237, .11);
}

input[type="checkbox"]
{
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
}

code
{
	padding: 2px 5px;
	border-radius: 5px;
	background: #eef1f6;
	font: 10px var(--mono);
}

.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 37px;
	padding: 8px 13px;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
}

.btn-primary
{
	background: var(--primary);
	color: white;
}

.btn-primary:hover
{
	background: var(--primary-dark);
}

.btn-secondary
{
	border-color: var(--border);
	background: white;
	color: var(--text);
}

.btn-danger
{
	border-color: #f0d4d8;
	background: white;
	color: var(--red);
}

.btn.small
{
	min-height: 30px;
	padding: 5px 9px;
	font-size: 10px;
}

.btn.full
{
	width: 100%;
}

.banner
{
	margin-bottom: 18px;
	padding: 12px 15px;
	border: 1px solid;
	border-radius: 10px;
	font-size: 12px;
}

.banner-ok
{
	border-color: #bfe5d8;
	background: #f0fbf7;
	color: #167d59;
}

.banner-error
{
	border-color: #f0c6ca;
	background: #fff5f6;
	color: #b73d48;
}

.rule-row
{
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: center;
	padding: 13px 22px;
	border-bottom: 1px solid var(--border);
}

.rule-row.disabled
{
	opacity: .5;
}

.rule-priority
{
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 8px;
	background: #eef1f6;
	font: 10px var(--mono);
}

.rule-row strong,
.rule-row small
{
	display: block;
	font-size: 11px;
}

.rule-row small
{
	margin-top: 4px;
	color: var(--muted);
	font-size: 10px;
}

.empty-state
{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 54px 20px;
	color: var(--muted);
	text-align: center;
}

.empty-state.compact
{
	padding: 34px 20px;
}

.empty-state > span,
.empty-state > i
{
	margin-bottom: 10px;
	font-size: 28px;
}

.empty-state strong
{
	color: var(--text);
}

.empty-state p
{
	margin: 5px 0 0;
	font-size: 11px;
}

.auth-page
{
	min-height: 100vh;
	min-height: 100dvh;
	padding-bottom: 0;
	overflow-x: hidden;
	background:
		radial-gradient(circle at 20% 15%, rgba(79, 107, 237, .18), transparent 32%),
		linear-gradient(145deg, #111827, #1d2940);
}

.auth-shell
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100dvh;
	padding: 24px;
	place-items: center;
}

.auth-card
{
	width: min(430px, calc(100vw - 48px));
	min-width: 0;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 18px;
	background: var(--surface);
	box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.auth-brand
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
}

.auth-brand strong,
.auth-brand small
{
	display: block;
}

.auth-brand strong
{
	font-size: 16px;
}

.auth-brand small
{
	margin-top: 2px;
	color: var(--muted);
	font-size: 11px;
}

.auth-heading
{
	margin-bottom: 24px;
}

.auth-heading > i
{
	display: grid;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	place-items: center;
	border-radius: 12px;
	background: #eef1ff;
	color: var(--primary);
	font-size: 18px;
}

.auth-heading h1
{
	font-size: 23px;
}

.auth-heading p,
.auth-help
{
	margin-bottom: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.auth-form
{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.auth-form label,
.auth-form input
{
	width: 100%;
	min-width: 0;
}

.auth-form input
{
	font-size: 16px;
}

.auth-form .btn
{
	margin-top: 4px;
}

.auth-help
{
	margin-top: 20px;
	text-align: center;
}

@media (max-width: 1120px)
{
	.main-content
	{
		padding: 30px 26px 50px;
	}

	.stats-grid
	{
		grid-template-columns: repeat(2, 1fr);
	}

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

@media (max-width: 780px)
{
	.app-shell
	{
		flex-direction: column;
	}

	.sidebar
	{
		position: static;
		flex: auto;
		height: auto;
		padding: 14px;
	}

	.brand
	{
		padding-bottom: 13px;
	}

	.nav-list
	{
		flex-direction: row;
		overflow-x: auto;
	}

	.nav-label,
	.sidebar-action
	{
		display: none;
	}

	.nav-list a
	{
		flex: 0 0 auto;
	}

	.main-content
	{
		width: 100%;
		padding: 24px 16px 44px;
	}

	.page-header,
	.card-header
	{
		align-items: stretch;
		flex-direction: column;
	}

	.run-status,
	.quick-search
	{
		width: 100%;
	}

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

	.connection-test
	{
		margin-top: 12px;
	}
}

@media (max-width: 560px)
{
	.stats-grid,
	.form-grid,
	.filter-grid
	{
		grid-template-columns: 1fr;
	}

	.form-grid .full
	{
		grid-column: auto;
	}

	.ai-flow
	{
		align-items: flex-start;
		flex-direction: column;
	}

	.ai-flow i,
	.email-meta
	{
		display: none;
	}

	.email-row
	{
		grid-template-columns: 42px minmax(0, 1fr);
		padding: 13px;
	}

	.email-topline
	{
		align-items: flex-start;
		flex-direction: column;
	}
}