:root {
			--bg: #f4f2ee;
			--surface: #ffffff;
			--surface-soft: #f8f7f4;
			--ink: #171717;
			--muted: #676b73;
			--line: #dedbd2;
			--accent: #0f766e;
			--accent-strong: #115e59;
			--blue: #2563eb;
			--amber: #b7791f;
			--danger: #b42318;
			--success-bg: #e7f5ef;
			--warning-bg: #fff6df;
			--danger-bg: #fff0ee;
			--shadow: 0 18px 45px rgba(23, 23, 23, 0.08);
			--radius: 8px;
		}

		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			min-height: 100vh;
			background:
				linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0) 260px),
				var(--bg);
			color: var(--ink);
			font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
			font-size: 15px;
			letter-spacing: 0;
		}

		button,
		input,
		textarea {
			font: inherit;
		}

		button {
			border: 0;
		}

		a {
			color: inherit;
		}

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

		.topbar {
			position: sticky;
			top: 0;
			z-index: 20;
			background: rgba(244, 242, 238, 0.92);
			backdrop-filter: blur(16px);
			border-bottom: 1px solid var(--line);
		}

		.topbar-inner {
			max-width: 1180px;
			margin: 0 auto;
			padding: 14px 22px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 18px;
		}

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

		.brand-mark {
			width: 34px;
			height: 34px;
			border-radius: 8px;
			background: #171717;
			color: white;
			display: grid;
			place-items: center;
			font-size: 14px;
			font-weight: 800;
			flex: 0 0 auto;
		}

		.brand-copy {
			min-width: 0;
		}

		.brand-name {
			font-size: 16px;
			font-weight: 750;
			line-height: 1.1;
		}

		.brand-context {
			margin-top: 3px;
			color: var(--muted);
			font-size: 12px;
			line-height: 1.2;
		}

		.topbar-actions {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.nav-links {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.nav-link {
			min-height: 34px;
			display: inline-flex;
			align-items: center;
			padding: 0 12px;
			border: 1px solid transparent;
			border-radius: 8px;
			color: var(--muted);
			text-decoration: none;
			font-size: 13px;
			font-weight: 700;
		}

		.nav-link:hover,
		.nav-link.active {
			background: var(--surface);
			border-color: var(--line);
			color: var(--ink);
		}

		.workspace {
			width: min(1180px, calc(100% - 32px));
			margin: 28px auto 44px;
			display: grid;
			grid-template-columns: minmax(0, 1fr) 320px;
			gap: 18px;
			align-items: start;
		}

		.tool-panel,
		.side-panel {
			background: var(--surface);
			border: 1px solid var(--line);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
		}

		.tool-panel {
			overflow: hidden;
		}

		.query-zone {
			padding: 22px;
			border-bottom: 1px solid var(--line);
			background: linear-gradient(180deg, #ffffff, #fbfaf7);
		}

		.query-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 16px;
			margin-bottom: 18px;
		}

		h1 {
			margin: 0;
			font-size: 24px;
			line-height: 1.16;
			font-weight: 780;
		}

		.query-meta {
			margin-top: 7px;
			color: var(--muted);
			line-height: 1.45;
		}

		.search-form {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			gap: 10px;
		}

		.input-wrap {
			position: relative;
		}

		.input-icon {
			position: absolute;
			left: 14px;
			top: 50%;
			transform: translateY(-50%);
			color: var(--muted);
			width: 20px;
			height: 20px;
			pointer-events: none;
		}

		.search-input {
			width: 100%;
			min-height: 52px;
			padding: 0 16px 0 44px;
			border: 1px solid #c9c4b8;
			border-radius: 8px;
			background: white;
			color: var(--ink);
			outline: none;
			font-size: 16px;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
		}

		.search-input:focus {
			border-color: var(--accent);
			box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13);
		}

		.primary-button,
		.secondary-button,
		.icon-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			border-radius: 8px;
			cursor: pointer;
			font-weight: 750;
			transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
		}

		.primary-button {
			min-height: 52px;
			padding: 0 20px;
			background: var(--accent);
			color: white;
			box-shadow: 0 12px 22px rgba(15, 118, 110, 0.18);
		}

		.primary-button:hover {
			background: var(--accent-strong);
			transform: translateY(-1px);
		}

		.primary-button:disabled {
			cursor: wait;
			background: #8aa9a5;
			box-shadow: none;
			transform: none;
		}

		.secondary-button,
		.icon-button {
			min-height: 36px;
			border: 1px solid var(--line);
			background: var(--surface);
			color: var(--ink);
		}

		.secondary-button {
			padding: 0 12px;
			font-size: 13px;
		}

		.icon-button {
			width: 36px;
			padding: 0;
		}

		.secondary-button:hover,
		.icon-button:hover {
			background: var(--surface-soft);
		}

		.button-icon {
			width: 18px;
			height: 18px;
			flex: 0 0 auto;
		}

		.results-zone {
			padding: 22px;
		}

		.notice {
			display: none;
			margin-bottom: 16px;
			padding: 12px 14px;
			border-radius: 8px;
			border: 1px solid var(--line);
			line-height: 1.4;
		}

		.notice.is-visible {
			display: block;
		}

		.notice.success {
			background: var(--success-bg);
			border-color: #b8decf;
			color: #175c47;
		}

		.notice.warning {
			background: var(--warning-bg);
			border-color: #ead08c;
			color: #73510f;
		}

		.notice.error {
			background: var(--danger-bg);
			border-color: #f0b8b0;
			color: var(--danger);
		}

		.result-summary {
			display: grid;
			grid-template-columns: minmax(0, 1fr) repeat(2, minmax(118px, 160px));
			gap: 12px;
			margin-bottom: 18px;
		}

		.metric {
			min-height: 86px;
			padding: 14px;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--surface-soft);
			min-width: 0;
		}

		.metric-label {
			color: var(--muted);
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0;
		}

		.metric-value {
			margin-top: 9px;
			font-size: 22px;
			font-weight: 780;
			line-height: 1.15;
			overflow-wrap: anywhere;
		}

		.metric-value.small {
			font-size: 15px;
			font-weight: 700;
		}

		.result-summary.is-loading .metric-value {
			color: transparent;
			height: 1.15em;
			white-space: nowrap;
			overflow: hidden;
			user-select: none;
			border-radius: 4px;
			background: linear-gradient(100deg, #e8e5df 25%, #f6f4ef 45%, #e8e5df 65%);
			background-size: 250% 100%;
			animation: summary-shimmer 1.5s ease-in-out infinite;
			width: 75%;
		}
		@keyframes summary-shimmer {
			from { background-position: 100% 0; }
			to { background-position: -100% 0; }
		}
		@media (prefers-reduced-motion: reduce) {
			.result-summary.is-loading .metric-value { animation: none; }
		}

		.results-toolbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			margin: 20px 0 12px;
		}

		.results-title-group {
			display: grid;
			gap: 4px;
			min-width: 0;
		}

		.results-title-line {
			display: flex;
			align-items: baseline;
			gap: 10px;
			min-width: 0;
		}

		.section-title {
			margin: 0;
			font-size: 15px;
			font-weight: 780;
		}

		.section-description {
			margin: 0;
			color: var(--muted);
			font-size: 13px;
			line-height: 1.35;
		}

		.domain-page-summary {
			color: var(--muted);
			font-size: 13px;
			font-weight: 700;
			white-space: nowrap;
		}

		.toolbar-actions {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.domain-traffic { padding: 0 12px 12px; }
		.traffic-overview { margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
		.traffic-overview[hidden] { display: none; }
		.traffic-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
		.traffic-domain { margin: 6px 0; font-size: 20px; overflow-wrap: anywhere; }
		.traffic-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0; }
		.traffic-kpis .metric { background: white; }
		.traffic-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
		.traffic-breakdown h3 { margin: 0 0 8px; font-size: 14px; }
		.country-row { padding: 10px 0; }
		.country-label { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
		.country-bar { height: 6px; margin-top: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
		.country-bar span { display: block; height: 100%; background: var(--accent); }
		.traffic-empty { color: var(--muted); font-size: 13px; line-height: 1.5; }
		.traffic-keyword { overflow-wrap: anywhere; white-space: normal !important; }
		.traffic-summary { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
		.traffic-form { display: flex; width: 100%; }
		.traffic-input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 6px 0 0 6px; padding: 6px 8px; font: inherit; font-size: 12px; }
		.traffic-save { display: grid; place-items: center; flex: 0 0 32px; border: 1px solid var(--line); border-left: 0; border-radius: 0 6px 6px 0; background: var(--surface-soft); color: #176b5b; cursor: pointer; }
		.traffic-save:disabled { opacity: .5; cursor: wait; }
		.traffic-feedback { display: block; font-size: 12px; margin-top: 4px; color: var(--muted); }
		.traffic-input:focus-visible, .traffic-save:focus-visible { outline: 2px solid #a8c7c1; outline-offset: 2px; }

		.domain-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			gap: 10px;
		}

		.domain-item {
			position: relative;
			min-width: 0;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: #fff;
			transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
		}

		.domain-ahrefs-button {
			position: absolute;
			top: 6px;
			right: 6px;
			display: grid;
			place-items: center;
			width: 32px;
			height: 32px;
			padding: 0;
			border: 1px solid var(--line);
			border-radius: 6px;
			background: #fff;
			color: var(--muted);
			cursor: pointer;
		}

		.domain-ahrefs-button:hover,
		.domain-ahrefs-button:focus-visible {
			color: #176b5b;
			background: var(--surface-soft);
			outline: 2px solid #a8c7c1;
			outline-offset: 2px;
		}





		.domain-item:has(.domain-ahrefs-button) .domain-name {
			padding-right: 72px;
		}

		.domain-item:hover {
			border-color: #a8c7c1;
			box-shadow: 0 8px 20px rgba(23, 23, 23, 0.07);
			transform: translateY(-1px);
		}

		.domain-link {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			align-items: center;
			gap: 10px;
			padding: 12px;
			text-decoration: none;
		}

		.domain-name {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-weight: 650;
		}

		.domain-meta {
			grid-column: 1 / -1;
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
			color: var(--muted);
			font-size: 12px;
			font-weight: 700;
		}

		.status-badge {
			display: inline-flex;
			align-items: center;
			min-height: 22px;
			padding: 0 8px;
			border-radius: 999px;
			border: 1px solid var(--line);
			background: var(--surface-soft);
			color: var(--muted);
			font-size: 11px;
			font-weight: 800;
			text-transform: uppercase;
		}

		.status-badge.active {
			border-color: #b8decf;
			background: var(--success-bg);
			color: #175c47;
		}

		.status-badge.warning {
			border-color: #ead08c;
			background: var(--warning-bg);
			color: #73510f;
		}

		.status-badge.error {
			border-color: #f0b8b0;
			background: var(--danger-bg);
			color: var(--danger);
		}

		/* Domain cards: identity, health and traffic each have a stable row. */
		.domain-item { display: flex; flex-direction: column; border-radius: 10px; }
		.domain-item:hover { transform: none; box-shadow: 0 3px 12px rgba(23,23,23,.04); }
		.domain-link { padding: 16px; gap: 10px; }
		.domain-name { line-height: 24px; }
		.domain-ahrefs-button { top: 12px; right: 12px; border-color: transparent; background: transparent; }

		.domain-meta { font-weight: 500; }
		.domain-meta .status-badge { padding: 0; border: 0; background: transparent; text-transform: none; font-size: 12px; font-weight: 600; gap: 6px; white-space: nowrap; }
		.domain-meta .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
		.domain-checked { color: var(--muted); font-size: 11px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.domain-traffic { margin-top: auto; padding: 12px 16px; border-top: 1px solid #eeece7; background: #fafaf8; border-radius: 0 0 10px 10px; }
		.traffic-summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; min-height: 22px; }
		.traffic-summary strong { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
		.traffic-summary .traffic-unavailable { font-size: 12px; font-weight: 500; color: var(--muted); }
		.domain-traffic .traffic-form { margin-top: 10px; }

		.external-icon {
			width: 16px;
			height: 16px;
			color: var(--blue);
		}

		.domain-pagination {
			margin-top: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 12px;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--surface-soft);
		}

		.domain-pagination[hidden] {
			display: none;
		}

		.historical-domains {
			margin-top: 18px;
			padding-top: 18px;
			border-top: 1px solid var(--line);
		}

		.historical-domains[hidden] {
			display: none;
		}

		.state-history-section {
			margin-top: 18px;
			padding-top: 18px;
			border-top: 1px solid var(--line);
		}

		.state-history-section[hidden] {
			display: none;
		}

		.history-table-wrap {
			overflow-x: auto;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: #fff;
		}

		.history-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 13px;
		}

		.history-table th,
		.history-table td {
			padding: 10px 12px;
			border-bottom: 1px solid var(--line);
			text-align: left;
			vertical-align: top;
			white-space: nowrap;
		}

		.history-table th {
			background: var(--surface-soft);
			color: var(--muted);
			font-size: 11px;
			font-weight: 800;
			text-transform: uppercase;
		}

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

		.history-table .wide-cell {
			white-space: normal;
			min-width: 180px;
		}

		.page-nav-button {
			width: 36px;
			height: 36px;
			display: inline-grid;
			place-items: center;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: #fff;
			color: var(--ink);
			cursor: pointer;
		}

		.page-nav-button:disabled {
			color: #a9a49a;
			cursor: not-allowed;
			background: #f1efea;
		}

		.page-nav-button:not(:disabled):hover {
			border-color: #b9d5d0;
		}

		.page-nav-button svg {
			width: 18px;
			height: 18px;
		}

		.domain-page-state {
			color: var(--muted);
			font-size: 13px;
			font-weight: 750;
			text-align: center;
		}

		.empty-state {
			border: 1px dashed #c8c1b3;
			border-radius: 8px;
			background: var(--surface-soft);
			padding: 34px 18px;
			text-align: center;
			color: var(--muted);
		}

		.empty-state strong {
			display: block;
			color: var(--ink);
			font-size: 16px;
			margin-bottom: 6px;
		}

		.raw-response {
			margin-top: 18px;
			border-top: 1px solid var(--line);
			padding-top: 18px;
		}

		.raw-response textarea {
			width: 100%;
			min-height: 172px;
			resize: vertical;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: #111;
			color: #f8f8f2;
			padding: 14px;
			line-height: 1.5;
			font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
			font-size: 13px;
		}

		.side-panel {
			padding: 18px;
		}

		.side-section + .side-section {
			margin-top: 18px;
			padding-top: 18px;
			border-top: 1px solid var(--line);
		}

		.side-title {
			margin: 0 0 12px;
			font-size: 13px;
			color: var(--muted);
			text-transform: uppercase;
			font-weight: 800;
			letter-spacing: 0;
		}

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

		.detail-row {
			display: flex;
			justify-content: space-between;
			gap: 12px;
			color: var(--muted);
			font-size: 13px;
		}

		.detail-row strong {
			color: var(--ink);
			font-weight: 700;
			text-align: right;
			overflow-wrap: anywhere;
		}

		.detail-row strong a {
			color: var(--blue);
			text-decoration: none;
		}

		.detail-row strong a:hover {
			text-decoration: underline;
		}

		.database-stats {
			margin-top: 16px;
			padding-top: 16px;
			border-top: 1px solid var(--line);
		}

		.stats-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
		}

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

		.stat-card {
			min-width: 0;
			padding: 12px;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--surface-soft);
		}

		.stat-label {
			color: var(--muted);
			font-size: 11px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0;
		}

		.stat-value {
			margin-top: 7px;
			font-size: 20px;
			font-weight: 780;
			line-height: 1.1;
		}

		.timeline {
			display: grid;
			gap: 10px;
		}

		.history-empty {
			color: var(--muted);
			font-size: 13px;
			line-height: 1.4;
		}

		.timeline-item {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			gap: 10px;
			align-items: start;
			color: var(--muted);
			font-size: 13px;
			line-height: 1.35;
		}

		.timeline-dot {
			width: 9px;
			height: 9px;
			border-radius: 999px;
			margin-top: 5px;
			background: var(--amber);
		}

		.is-loading .timeline-dot {
			background: var(--accent);
			box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
		}

		@media (max-width: 940px) {
			.workspace {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 700px) {
			.topbar-inner {
				align-items: flex-start;
				flex-direction: column;
				padding: 14px 16px;
			}

			.topbar-actions {
				width: 100%;
				align-items: flex-start;
				flex-direction: column;
			}

			.workspace {
				width: min(100% - 20px, 1180px);
				margin-top: 16px;
			}

			.query-zone,
			.results-zone {
				padding: 16px;
			}

			.query-header {
				flex-direction: column;
			}

			.search-form {
				grid-template-columns: 1fr;
			}

			.primary-button {
				width: 100%;
			}

			.result-summary {
				grid-template-columns: 1fr;
			}

			.results-toolbar {
				align-items: flex-start;
				flex-direction: column;
			}

			.results-title-group {
				align-items: flex-start;
				flex-direction: column;
				gap: 4px;
			}

			.toolbar-actions {
				width: 100%;
			}

			.secondary-button {
				flex: 1;
			}
		}