:root {
	--ink: #17233f;
	--muted: #6f7482;
	--faint: #9499a4;
	--canvas: #f2f1e9;
	--paper: #fffdf7;
	--paper-strong: #ffffff;
	--line: #dcded5;
	--line-strong: #c7cac0;
	--indigo: #26336f;
	--indigo-dark: #182249;
	--indigo-soft: #eef0ff;
	--lime: #c9f45a;
	--lime-soft: #efffc8;
	--green: #287455;
	--green-soft: #e3f5e9;
	--orange: #a96017;
	--orange-soft: #fff0d8;
	--red: #a74045;
	--red-soft: #ffe7e5;
	--violet: #6d4bb1;
	--violet-soft: #f0eaff;
	--shadow: 0 14px 35px rgba(23, 35, 63, .06);
	--rail: 236px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); scroll-behavior: smooth; }
body {
	min-height: 100%; margin: 0; color: var(--ink);
	background:
		radial-gradient(circle at 88% 5%, rgba(201, 244, 90, .32), transparent 23rem),
		linear-gradient(rgba(38, 51, 111, .028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(38, 51, 111, .028) 1px, transparent 1px),
		var(--canvas);
	background-size: auto, 40px 40px, 40px 40px, auto;
	font: 14px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
a { color: var(--indigo); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Brand rail */
.topbar {
	position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--rail); min-height: 100vh;
	background: var(--indigo-dark); color: #fff;
}
.topbar:after {
	content: ""; position: absolute; right: -1px; bottom: 9%; width: 2px; height: 118px;
	background: var(--lime); border-radius: 2px;
}
.topbar-inner { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 28px 20px 22px; }
.brand, .auth-brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark {
	position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 39px; height: 39px;
	border: 1px solid rgba(255,255,255,.46); border-radius: 50%;
}
.brand-mark:before, .brand-mark:after, .brand-mark i {
	content: ""; position: absolute; display: block; border-radius: 999px; background: var(--lime);
}
.brand-mark:before { width: 19px; height: 3px; transform: translateY(-6px); }
.brand-mark i { width: 13px; height: 3px; }
.brand-mark:after { width: 7px; height: 3px; transform: translateY(6px); }
.brand-copy { display: grid; gap: 1px; min-width: 0; }
.brand-copy strong { font-size: 18px; line-height: 1.1; letter-spacing: -.03em; }
.brand-copy small { color: rgba(255,255,255,.55); font-size: 8px; font-weight: 800; letter-spacing: .13em; white-space: nowrap; }
.topbar nav { display: grid; gap: 6px; margin-top: 54px; }
.topbar nav a {
	display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; min-height: 45px;
	padding: 8px 12px; border-radius: 12px; color: rgba(255,255,255,.68); text-decoration: none; font-weight: 700;
}
.topbar nav a span { color: rgba(255,255,255,.32); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.topbar nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.topbar nav a.active { color: var(--indigo-dark); background: var(--lime); }
.topbar nav a.active span { color: rgba(24,34,73,.55); }
.account { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.11); }
.account-admin { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; text-decoration: none; }
.account-admin:hover, .account-admin.active { border-color: var(--lime); color: var(--lime); }
.account-menu { position: relative; }
.account-user {
	display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 6px 9px; border: 0; border-radius: 9px;
	background: transparent; color: rgba(255,255,255,.82); font: inherit; font-weight: 700; cursor: pointer;
}
.account-user .lucide { width: 14px; height: 14px; flex: none; }
.account-user > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-user[aria-expanded="true"] .lucide { transform: rotate(180deg); }
.account-menu-panel {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 168px; padding: 8px;
	border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
	background: rgba(8,11,18,.96); box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.account-menu-panel form { margin: 0; }
.account-menu-panel a, .account-menu-panel button {
	display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
	color: rgba(255,255,255,.86); text-align: left; text-decoration: none; cursor: pointer;
}

/* Main workspace */
.site-heading { margin-left: var(--rail); border-bottom: 1px solid rgba(38,51,111,.12); background: rgba(255,253,247,.74); backdrop-filter: blur(12px); }
.site-heading > div { max-width: 1180px; margin: auto; padding: 22px 32px; }
.site-heading > div > a:first-child, .site-heading > div > span, .site-heading > div > strong { margin-right: 6px; color: var(--faint); font-size: 11px; text-decoration: none; }
.site-heading h1 { display: inline; margin: 9px 12px 0 0; font-size: 25px; letter-spacing: -.035em; }
.site-heading .badge.platform { margin: 0 10px 0 0; vertical-align: 3px; }
.site-heading h1 + a, .site-heading .badge.platform + a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.container { width: min(1180px, calc(100% - var(--rail))); margin: 0 0 80px calc(var(--rail) + max(0px, (100vw - var(--rail) - 1180px) / 2)); padding: 46px 32px 0; }
.site-container { width: min(1040px, calc(100% - var(--rail))); margin-left: calc(var(--rail) + max(0px, (100vw - var(--rail) - 1040px) / 2)); }
.dashboard-heading, .workspace-heading {
	display: flex; align-items: end; justify-content: space-between; gap: 28px; margin: 0 0 28px;
}
.dashboard-heading span, .workspace-heading span, .manual-hero > span { color: #637023; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.dashboard-heading h1, .workspace-heading h1, .manual-hero h1 { margin: 4px 0 3px; font-size: clamp(28px, 4vw, 43px); line-height: 1.15; letter-spacing: -.055em; }
.dashboard-heading p, .workspace-heading p, .manual-hero p { margin: 0; color: var(--muted); }
.dashboard-heading > strong, .workspace-heading > strong { color: var(--indigo); font-size: 24px; font-variant-numeric: tabular-nums; }
.dashboard-heading > strong small { color: var(--faint); font-size: 9px; letter-spacing: .12em; }

.panel, .site-card, .shortcut-card {
	background: rgba(255,253,247,.93); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
}
.panel { padding: 25px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
.panel p, .site-card-main > div > span, .site-card-main > small { color: var(--muted); }
.panel p { margin: 4px 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 19px; }

/* Inputs and actions */
label { font-weight: 720; }
input, select, textarea {
	width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 11px;
	background: var(--paper-strong); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(201,244,90,.55); border-color: var(--indigo); }
.button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 15px;
	border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-strong); color: var(--indigo);
	font-weight: 760; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); border-color: var(--indigo); }
.button.primary { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.button.primary:hover { background: #35448d; }
.button.danger { border-color: #e0afb0; background: var(--red-soft); color: var(--red); }
.button.small { min-height: 32px; padding: 5px 10px; font-size: 11px; }
.button.wide { width: 100%; }

/* Dashboard */
.dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr) 255px; gap: 20px; align-items: start; }
.dashboard-main { min-width: 0; }
.dashboard-shortcuts { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-bottom: 18px; }
.shortcut-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; min-height: 124px; padding: 20px; color: var(--ink); text-decoration: none; overflow: hidden; }
.shortcut-card > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lime); color: var(--indigo-dark); font-size: 21px; font-weight: 900; }
.shortcut-card.plugin { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.shortcut-card.plugin > span { background: #fff; color: var(--indigo); }
.shortcut-card small, .shortcut-card strong, .shortcut-card p { display: block; }
.shortcut-card small { color: #66703c; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.shortcut-card.plugin small, .shortcut-card.plugin p { color: rgba(255,255,255,.62); }
.shortcut-card strong { font-size: 15px; }
.shortcut-card p { margin: 2px 0; color: var(--muted); font-size: 11px; }
.shortcut-card > b { color: currentColor; font-size: 11px; white-space: nowrap; }
.shortcut-card:hover { transform: translateY(-2px); }
.add-site { border-left: 6px solid var(--lime); padding: 23px 25px; }
.add-site > div { margin-bottom: 15px; }
.add-site form { display: grid; grid-template-columns: 1fr 1.25fr .72fr auto; gap: 12px; align-items: end; }
.site-cards, .report-list, .plugin-list { display: grid; gap: 13px; }
.site-card { display: grid; grid-template-columns: minmax(0,1fr) auto 22px; align-items: center; gap: 24px; padding: 21px; color: var(--ink); text-decoration: none; }
.site-card:hover { border-color: var(--indigo); transform: translateY(-1px); }
.site-card-main h2 { display: inline; margin: 0 7px 0 0; font-size: 17px; }
.site-card-main > small { display: block; margin-top: 10px; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; }
.badge { display: inline-flex; align-items: center; width: max-content; padding: 4px 9px; border-radius: 999px; background: #eceee9; color: #555c69; font-size: 10px; font-style: normal; font-weight: 760; line-height: 1.35; }
.badge.good { background: var(--green-soft); color: var(--green); }
.badge.warn { background: var(--orange-soft); color: var(--orange); }
.badge.bad { background: var(--red-soft); color: var(--red); }
.badge.pending { background: var(--violet-soft); color: var(--violet); }
.badge.online { background: var(--indigo-soft); color: var(--indigo); }
.badge.neutral { background: #eceee9; color: #555c69; }
.badge.platform.wordpress { background: var(--indigo-soft); color: var(--indigo); }
.badge.platform.standalone { background: var(--violet-soft); color: var(--violet); }
.site-group { display: grid; gap: 12px; margin: 8px 0 22px; }
.site-group:last-child { margin-bottom: 0; }
.site-group-heading {
	display: flex; align-items: end; justify-content: space-between; gap: 16px;
	padding: 2px 6px 0;
}
.site-group-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.site-group-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.site-group-heading > strong { color: var(--indigo); font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1; }
.site-group-heading > strong small { color: var(--faint); font-size: 9px; letter-spacing: .12em; }
.site-card-metrics { display: grid; grid-template-columns: repeat(3,88px); gap: 10px; }
.site-card-metrics div { text-align: center; }
.site-card-metrics span { display: block; color: var(--faint); font-size: 9px; white-space: nowrap; }
.site-card-metrics strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.chevron { color: var(--indigo); font-size: 24px; }
.good { color: var(--green) !important; }
.warn { color: var(--orange) !important; }
.bad { color: var(--red) !important; }
.pending { color: var(--faint) !important; }
.next-guide { position: sticky; top: 24px; background: var(--lime-soft); border-color: #cedf8a; box-shadow: none; }
.next-guide > span { color: #637023; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.next-guide ol { display: grid; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.next-guide li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(99,112,35,.2); }
.next-guide li > b { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border: 1px solid #aebd6e; border-radius: 50%; }
.next-guide li strong, .next-guide li small { display: block; }
.next-guide li small { color: #70765a; }
.next-guide li.done > b { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.next-guide li.current > b { background: var(--lime); border-color: var(--indigo); }

/* Site detail */
.tabs { display: flex; align-items: center; gap: 6px; padding: 8px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px 18px 0 0; background: var(--paper); }
.tabs a { flex: none; padding: 9px 13px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs a:hover, .tabs a.active { background: var(--indigo); color: #fff; font-weight: 720; }
.tab-caption { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding: 8px 18px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; background: rgba(255,253,247,.78); color: var(--muted); font-size: 11px; }
.tab-caption a { text-decoration: none; }
.alert { margin-bottom: 18px; padding: 13px 16px; border: 1px solid #aed8bc; border-radius: 13px; background: var(--green-soft); color: var(--green); }
.alert.error { border-color: #e8b7b7; background: var(--red-soft); color: var(--red); }
.alert.warn { border-color: #ebcf98; background: var(--orange-soft); color: var(--orange); }
.cwv-panel { padding: 27px; }
.visit-count { color: var(--muted); font-size: 11px; }
.cwv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.cwv-card { position: relative; overflow: hidden; min-height: 150px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper-strong); }
.cwv-card:after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--line); }
.cwv-card.good:after { background: var(--green); }.cwv-card.warn:after { background: #e5ad45; }.cwv-card.bad:after { background: #d96868; }
.cwv-card header { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.cwv-card header i, .help { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 9px; font-style: normal; }
.cwv-card > strong { display: block; margin: 14px 0 6px; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.cwv-card > b { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #eceee9; font-size: 10px; }
.cwv-card.good > b { background: var(--green-soft); }.cwv-card.warn > b { background: var(--orange-soft); }.cwv-card.bad > b { background: var(--red-soft); }
.cwv-card small { display: block; margin-top: 11px; color: var(--muted); }
.effect-callout { display: grid; grid-template-columns: 28px auto 1fr auto; align-items: center; gap: 10px; margin-top: 18px; padding: 14px; border: 1px solid #cdc4e8; border-radius: 15px; background: var(--violet-soft); color: var(--violet); text-decoration: none; }
.effect-callout > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-weight: 900; }
.effect-callout small { color: #7b6b9f; }.effect-callout.good { border-color: #b8d8bf; background: var(--green-soft); color: var(--green); }.effect-callout.bad { border-color: #e4b4b4; background: var(--red-soft); color: var(--red); }
.status-grid, .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.status-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-card dl { display: grid; grid-template-columns: 110px 1fr; margin: 14px 0; }
.status-card dt, .status-card dd { margin: 0; padding: 7px 0; border-top: 1px solid var(--line); }
.status-card dt { color: var(--muted); }.status-card > .button { margin-top: 14px; }
.effect-progress-card { display: flex; flex-direction: column; }
.effect-progress-card > small { margin-bottom: 14px; }
.effect-progress-card > .button { align-self: flex-start; margin-top: auto; }
.progress { height: 9px; overflow: hidden; border-radius: 999px; background: #e2e4dc; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--indigo),#7081dc,var(--lime)); }
.status-card .progress { margin: 17px 0 5px; }

/* Effects and analysis */
.measurement-hero { border-left: 6px solid var(--violet); }.measurement-hero.good { border-left-color: var(--green); }.measurement-hero.bad { border-left-color: var(--red); }
.measurement-hero > div:first-child { display: flex; align-items: center; gap: 14px; }
.hero-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-size: 21px; font-weight: 900; }
.measurement-hero.good .hero-icon { background: var(--green-soft); color: var(--green); }
.measurement-progress { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 12px; margin-top: 20px; color: var(--muted); }
.effect-panels { display: grid; gap: 14px; }
.effect-panel { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.62); }
.effect-panel.good { border-color: #add0b8; }.effect-panel.bad { border-color: #e1b2b4; }
.effect-panel > header { display: flex; align-items: start; justify-content: space-between; }
.effect-panel > header span { font-weight: 760; }.effect-panel > header small { display: block; color: var(--muted); }
.effect-values { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.effect-values > div { width: 185px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.effect-values > div.with { border-color: #a9c871; background: var(--lime-soft); }
.effect-values span { display: block; color: var(--muted); font-size: 10px; }.effect-values strong { font-size: 23px; }.effect-values > b { color: var(--green); font-size: 19px; }
.effect-wait { width: min(430px,100%); margin: 13px 0; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 14px; background: #f5f5ee; }
.effect-wait strong { font-size: 15px; }
.effect-steps { display: flex; align-items: center; gap: 7px; margin: 11px 0; color: var(--faint); font-size: 10px; }
.effect-steps .current { padding: 3px 8px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo); font-weight: 760; }
.effect-steps .current:last-of-type { background: var(--green-soft); color: var(--green); }
.effect-toggle, .range-field { border-top: 1px solid var(--line); padding: 15px 0; }
.effect-toggle { display: flex; align-items: center; justify-content: space-between; }.effect-toggle strong, .effect-toggle small { display: block; }.effect-toggle small, .range-field > small { color: var(--muted); font-weight: 400; }
.range-field { display: block; }.range-field > span:first-child, .range-ends { display: flex; justify-content: space-between; }.range-field input { height: 6px; margin: 18px 0 6px; padding: 0; accent-color: var(--indigo); }.range-ends { color: var(--muted); font-size: 10px; }.range-ends i { font-style: normal; }
.analysis-metrics, .detail-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.analysis-metrics > div, .detail-metrics > div { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.6); }
.analysis-metrics span, .detail-metrics span { display: block; color: var(--muted); font-size: 10px; }.analysis-metrics strong { display: block; margin: 5px 0; font-size: 24px; }.detail-metrics strong { display: block; margin-top: 4px; font-size: 16px; }
.health-list { margin: 12px 0 0; }.health-list div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); }.health-list dt { color: var(--muted); }.health-list dd { margin: 0; font-weight: 720; }
.device-bar { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: 10px; margin: 15px 0; }.device-bar i { height: 8px; overflow: hidden; border-radius: 999px; background: #e2e4dc; }.device-bar b { display: block; height: 100%; background: var(--indigo); }
.duplicate-row { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid var(--line); }.duplicate-row code { overflow-wrap: anywhere; }.duplicate-row span { flex: none; color: var(--muted); }
.chart-legend { display: flex; gap: 18px; color: var(--muted); font-size: 10px; }.chart-legend span:before { content: ""; display: inline-block; width: 13px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: 3px; }.chart-legend .with:before { background: var(--indigo); }.chart-legend .without:before { background: #a6aa9f; }
.trend-chart { display: block; width: 100%; height: auto; min-height: 220px; }.trend-chart text { fill: var(--muted); font-size: 10px; }.grid-line { stroke: #dedfd7; stroke-width: 1; }.threshold { stroke-width: 1; stroke-dasharray: 5 4; }.threshold.good { stroke: var(--green); }.threshold.poor { stroke: var(--red); }.trend-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }.trend-line.on { stroke: var(--indigo); }.trend-line.off { stroke: #a6aa9f; stroke-dasharray: 5 4; }
.cause-list { display: grid; gap: 8px; }.cause-list article { display: grid; grid-template-columns: 1fr auto; gap: 3px 20px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }.cause-list small { grid-column: 1/3; color: var(--muted); }.cause-list strong { min-width: 0; }.cause-list code { overflow-wrap: anywhere; }.cause-list span { color: var(--muted); font-size: 10px; }

/* Tables, installation and settings */
.metric-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 16px; }.metric-pills a { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: #f3f3ed; color: var(--muted); text-decoration: none; }.metric-pills a.active { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.table-wrap { overflow: auto; margin: 0 -25px -25px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 13px 15px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; } thead th { color: var(--muted); font-size: 10px; letter-spacing: .04em; } th:nth-child(2), td:nth-child(2) { text-align: left; } td:first-child, th:first-child { width: 40px; text-align: center; color: var(--faint); } table a { color: var(--indigo); text-decoration: none; }
.ranking-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; color: var(--muted); }.ranking-footer nav { display: flex; gap: 4px; }.ranking-footer a { min-width: 34px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--indigo); text-align: center; text-decoration: none; }.ranking-footer a.active { border-color: var(--indigo); background: var(--indigo); color: #fff; }.ranking-note { margin-top: 16px !important; color: var(--muted); font-size: 10px; }
.install-panel { padding: 27px; }.install-steps { display: grid; gap: 12px; }.install-step { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); }.install-step > b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--indigo-dark); }.install-step strong { font-size: 15px; }.install-step p { margin: 3px 0 11px; }.install-step form { display: inline-block; }.install-step small { display: block; margin-top: 8px; color: var(--muted); }
.tag-code { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px; border-radius: 13px; background: var(--indigo-dark); }.tag-code code { padding: 7px; color: #fff; overflow-wrap: anywhere; }
.authority { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 18px; border: 1px solid #c8d09a; border-radius: 17px; background: var(--lime-soft); }.authority > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 19px; font-weight: 900; }.authority strong { font-size: 15px; }.authority p { margin: 3px 0; color: var(--muted); }.authority.compact { margin: 0; }
.connection-panel dl { display: grid; grid-template-columns: 140px 1fr; margin: 13px 0; }.connection-panel dt, .connection-panel dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }.connection-panel dt { color: var(--muted); }
.switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.switch-row, .field-row, .effect-toggle {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 15px;
	padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.48);
}
.effect-toggle { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 15px 0; }
.switch-row.enabled { border-color: #b7c988; background: var(--lime-soft); }
.switch-row > span:first-child, .field-row > span:first-child, .effect-toggle > span:first-child { min-width: 0; flex: 1; }
.switch-row strong, .switch-row small, .field-row strong, .field-row small, .effect-toggle strong, .effect-toggle small { display: block; }
.switch-row small, .field-row small, .effect-toggle small { color: var(--muted); font-weight: 400; }
.switch {
	position: relative; display: block; flex: none; width: 44px; height: 24px; margin-top: 2px;
}
.switch input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.switch-ui {
	position: absolute; inset: 0; border-radius: 999px; background: #b8bcb3; pointer-events: none; transition: background .15s ease, box-shadow .15s ease;
}
.switch-ui:after {
	content: ""; position: absolute; top: 50%; left: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transform: translateY(-50%); transition: transform .15s ease;
}
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--lime); outline-offset: 2px; }
.switch input:checked + .switch-ui { background: var(--lime); }
.switch input:checked + .switch-ui:after { transform: translate(20px, -50%); }
.field-control { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-top: 2px; }
.field-control em { font-style: normal; color: var(--muted); }
.field-row input { width: 145px; }
.field-row.vertical { align-items: start; flex-direction: column; }
.field-row.vertical textarea { width: 100%; }
.save-actions { margin: 18px 0 0; text-align: right; }
.danger-panel { border-color: #e0afb0; background: var(--red-soft); }
.danger-panel .panel-heading h2 { color: var(--red); }
.danger-copy { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Reports, plugin and manual */
.report-guide { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #c8d09a; background: var(--lime-soft); }.report-guide span, .plugin-hero > div:nth-child(2) > span { color: #637023; font-size: 10px; font-weight: 800; letter-spacing: .09em; }.report-card { margin: 0; }.report-card > header { display: flex; justify-content: space-between; gap: 18px; }.report-card > header span { color: var(--muted); font-size: 10px; }.report-card > header h2 { margin: 2px 0; }.report-card > header p { font-size: 11px; }.report-card.good { border-left: 6px solid var(--green); }.report-card.bad { border-left: 6px solid var(--red); }.report-card.pending { border-left: 6px solid var(--violet); }
.report-comparison { display: grid; grid-template-columns: 150px 28px 150px minmax(160px,1fr); align-items: center; gap: 10px; margin: 18px 0; }.report-comparison > div { padding: 12px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }.report-comparison > div.with { border-color: #b7c988; background: var(--lime-soft); }.report-comparison small, .report-comparison strong, .report-comparison span { display: block; }.report-comparison small, .report-comparison span { color: var(--muted); font-size: 10px; }.report-comparison strong { font-size: 22px; }.report-comparison > b { color: var(--green); text-align: center; font-size: 18px; }.report-comparison > .report-result { border: 0; text-align: left; }.report-result strong { color: var(--green); }.report-card.bad .report-result strong { color: var(--red); }.report-card.pending .report-result strong { color: var(--violet); }.report-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; border-top: 1px solid var(--line); }.report-card > footer p { margin: 0; }
.plugin-hero { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 17px; border-color: var(--indigo); background: var(--indigo); color: #fff; }.plugin-hero p { color: rgba(255,255,255,.65); }.plugin-mark, .plugin-site-icon { display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--indigo-dark); font-weight: 900; }.plugin-mark { width: 60px; height: 60px; font-size: 25px; }.plugin-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; }.plugin-card-main { display: flex; align-items: center; gap: 14px; min-width: 0; }.plugin-site-icon { flex: none; width: 44px; height: 44px; font-size: 18px; }.plugin-card-main h2 { margin: 0; }.plugin-card-main p { max-width: 410px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.plugin-card-main .badge { margin-top: 6px; }.plugin-card-actions { display: flex; flex-direction: column; gap: 7px; }
.install-summary ol { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 16px 0; padding: 0; list-style: none; }.install-summary li { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }.install-summary li b { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border-radius: 50%; background: var(--indigo); color: #fff; }.install-summary li span { font-size: 11px; }.install-summary > p { padding-top: 11px; border-top: 1px solid var(--line); font-size: 11px; }
.manual-hero { margin-bottom: 26px; }.manual-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 20px; align-items: start; }.manual-toc { position: sticky; top: 24px; display: grid; padding: 15px; border: 1px solid #c8d09a; border-radius: 18px; background: var(--lime-soft); }.manual-toc strong { padding: 4px 8px 10px; }.manual-toc a { padding: 8px; border-left: 2px solid transparent; color: #65703c; text-decoration: none; }.manual-toc a:hover { border-color: var(--indigo); color: var(--indigo); }.manual-content { min-width: 0; }.manual-section, .manual-callout { scroll-margin-top: 24px; }.manual-callout { border-color: var(--indigo); background: var(--indigo); color: #fff; }.manual-callout p { color: rgba(255,255,255,.66); }.manual-callout > strong, .manual-section > em { color: var(--lime); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .1em; }.manual-section > em { color: #637023; }.manual-callout h2, .manual-section h2 { margin: 5px 0; font-size: 20px; }.manual-section h3 { margin: 22px 0 5px; font-size: 14px; }.manual-section li { margin: 7px 0; color: var(--muted); }.quick-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }.quick-steps li { display: flex; gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.23); border-radius: 14px; }.quick-steps b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--indigo-dark); }.quick-steps span, .quick-steps small { display: block; }.quick-steps small { color: rgba(255,255,255,.6); }.manual-ui { display: grid; grid-template-columns: 140px 1fr; margin: 15px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }.manual-ui span, .manual-ui strong { padding: 10px; border-bottom: 1px solid var(--line); }.manual-ui span { background: #f0f1e9; color: var(--muted); }.manual-note { padding: 12px 14px !important; border-left: 4px solid var(--lime); background: var(--lime-soft); color: #536025 !important; }.manual-section pre { overflow: auto; padding: 14px; border-radius: 13px; background: var(--indigo-dark); color: #edf6c8; }.manual-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.manual-metrics div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }.manual-metrics span, .manual-metrics strong { display: block; }.manual-metrics span { color: var(--muted); }.manual-compare { display: flex; align-items: center; gap: 12px; margin: 14px 0; }.manual-compare div { padding: 13px 25px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }.manual-compare div:nth-of-type(2) { border-color: #b7c988; background: var(--lime-soft); }.manual-compare small, .manual-compare strong { display: block; }.manual-compare span { padding: 4px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green); }.manual-dl > div { display: grid; grid-template-columns: 170px 1fr; padding: 10px; border-top: 1px solid var(--line); }.manual-dl dt { font-weight: 720; }.manual-dl dd { margin: 0; color: var(--muted); }.manual-table { overflow: auto; }.manual-section details { padding: 12px 0; border-top: 1px solid var(--line); }.manual-section summary { cursor: pointer; font-weight: 720; }.manual-section details p { padding-left: 17px; }

/* Admin */
.admin-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.admin-summary .panel { border-top: 5px solid var(--lime); }.admin-summary span, .admin-summary strong, .admin-summary small { display: block; }.admin-summary span, .admin-summary small { color: var(--muted); }.admin-summary strong { margin: 5px 0; font-size: 30px; }.admin-jump { display: flex; gap: 7px; margin: 4px 0 18px; }.admin-jump a { padding: 7px 12px; border-radius: 999px; background: var(--indigo); color: #fff; text-decoration: none; }
.admin-panel { min-width: 0; }
.admin-panel .table-wrap {
	margin: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 14px;
}
.admin-table { table-layout: fixed; width: 100%; }
.admin-table th, .admin-table td { white-space: nowrap; vertical-align: middle; }
.admin-table td:nth-child(2), .admin-table th:nth-child(2) {
	white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.admin-table small { display: block; color: var(--muted); }
.admin-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.admin-actions form { margin: 0; }
.self-label { color: var(--muted); font-size: 11px; }
.token-key { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 22rem; }
.token-key code { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.token-key button { flex: none; padding: 3px 7px; border: 0; border-radius: 999px; background: var(--lime-soft); color: var(--indigo); cursor: pointer; }
.admin-owner-groups { display: grid; gap: 22px; min-width: 0; }
.admin-owner-group { min-width: 0; scroll-margin-top: 24px; }
.admin-owner-heading {
	display: flex; align-items: end; justify-content: space-between; gap: 16px;
	margin: 0 0 10px; padding: 0 2px;
}
.admin-owner-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.admin-owner-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.admin-owner-heading > strong { color: var(--indigo); font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1; }
.admin-owner-heading > strong small { color: var(--faint); font-size: 9px; letter-spacing: .12em; }
.empty-state, .empty-inline { padding: 42px 22px; text-align: center; color: var(--muted); }.empty-state .empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; background: var(--lime); color: var(--indigo); font-size: 20px; }.empty-state.compact { padding: 26px; }.empty-state h2, .empty-state h3 { color: var(--ink); }.empty-state .button { margin-top: 14px; }

/* Authentication */
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: radial-gradient(circle at 18% 15%, rgba(201,244,90,.75), transparent 21rem), var(--indigo-dark); }
.auth-page:after { content: "MEASURE / LEARN / TUNE"; position: fixed; right: 28px; bottom: 20px; color: rgba(255,255,255,.27); font-size: 9px; font-weight: 800; letter-spacing: .24em; }
.auth-page.admin-auth:after { content: "ADMIN ACCESS ONLY"; }
.auth-card { width: min(445px,100%); padding: 34px; border: 0; border-radius: 28px; background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.auth-card .auth-brand { width: max-content; margin-bottom: 32px; color: var(--indigo); }.auth-card .brand-mark { border-color: var(--indigo); }.auth-card .brand-copy small { color: var(--muted); }.auth-card h1 { margin: 0; font-size: 31px; letter-spacing: -.045em; }.auth-card > p { margin: 5px 0 22px; color: var(--muted); }.auth-card form { display: grid; gap: 13px; }.auth-switch { margin: 22px 0 0 !important; text-align: center; }.auth-switch a { font-weight: 720; }

@media (max-width: 1100px) {
	.container { padding-right: 24px; padding-left: 24px; }
	.dashboard-layout { grid-template-columns: 1fr; }
	.next-guide { position: static; order: -1; }
	.next-guide ol { grid-template-columns: repeat(3,1fr); }
	.report-comparison { grid-template-columns: 1fr 26px 1fr; }
	.report-comparison > .report-result { grid-column: 1/4; text-align: center; }
	.install-summary ol { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	:root { --rail: 0px; }
	.topbar { position: sticky; width: 100%; min-height: 0; height: auto; }
	.topbar:after { display: none; }
	.topbar-inner { flex-direction: row; align-items: center; height: auto; padding: 12px 18px; }
	.topbar nav { display: flex; gap: 4px; margin: 0 0 0 20px; overflow-x: auto; }
	.topbar nav a { display: block; min-height: 38px; padding: 9px 12px; white-space: nowrap; }
	.topbar nav a span { display: none; }
	.account { margin: 0 0 0 auto; padding: 0 0 0 12px; border: 0; }
	.brand-copy small { display: none; }
	.site-heading { margin-left: 0; }
	.container { margin-left: 0; }
}

@media (max-width: 680px) {
	body { background-size: auto, 32px 32px, 32px 32px, auto; }
	.topbar-inner { flex-wrap: wrap; padding: 11px 14px; }
	.brand-mark { width: 34px; height: 34px; }
	.topbar nav { order: 3; width: calc(100% + 28px); margin: 10px -14px -11px; padding: 7px 14px; border-top: 1px solid rgba(255,255,255,.1); }
	.topbar nav a { min-height: 34px; padding: 7px 10px; font-size: 12px; }
	.account-user, .account-menu-panel button { font-size: 11px; }
	.site-heading > div { padding: 16px; }
	.site-heading h1 { display: block; margin-top: 7px; font-size: 21px; }
	.container { margin-bottom: 55px; padding: 27px 13px 0; }
	.site-container { padding-right: 0; padding-left: 0; }
	.dashboard-heading, .workspace-heading { align-items: flex-start; margin-bottom: 20px; padding: 0 4px; }
	.dashboard-heading h1, .workspace-heading h1, .manual-hero h1 { font-size: 29px; }
	.dashboard-heading p, .workspace-heading p { display: none; }
	.dashboard-heading > strong, .workspace-heading > strong { font-size: 18px; }
	.panel { padding: 18px; border-radius: 18px; }
	.panel-heading { align-items: flex-start; }
	.dashboard-shortcuts, .add-site form, .switch-grid, .status-grid, .detail-grid { grid-template-columns: 1fr; }
	.shortcut-card { min-height: 105px; padding: 16px; }
	.add-site { border-left-width: 1px; border-top: 6px solid var(--lime); }
	.site-card { grid-template-columns: 1fr 18px; gap: 12px; padding: 17px; }
	.site-card-metrics { grid-column: 1/3; grid-template-columns: repeat(3,1fr); width: 100%; }
	.site-group-heading { align-items: flex-start; padding: 0 4px; }
	.site-group-heading p { display: none; }
	.chevron { grid-column: 2; grid-row: 1; }
	.badges { display: flex; margin: 8px 0 0; }
	.next-guide ol { grid-template-columns: 1fr; }
	.tabs { border-radius: 0; border-right: 0; border-left: 0; }
	.tab-caption { border-radius: 0; border-right: 0; border-left: 0; }
	.cwv-panel { padding: 18px; border-right: 0; border-left: 0; border-radius: 0; }
	.cwv-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
	.cwv-card { min-width: 0; min-height: 136px; padding: 11px 8px; }
	.cwv-card header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.cwv-card > strong { font-size: 19px; }
	.cwv-card small { font-size: 9px; }
	.effect-callout { grid-template-columns: 28px 1fr auto; }.effect-callout small { display: none; }
	.measurement-progress { grid-template-columns: 1fr 40px; }.measurement-progress > span { grid-column: 1/3; }
	.effect-values > div { width: calc(50% - 20px); padding: 10px 4px; }.effect-values strong { font-size: 19px; }
	.analysis-metrics, .detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.field-row { align-items: flex-start; flex-wrap: wrap; }.field-row input { width: 100%; }
	.table-wrap { margin: 0 -18px -18px; }
	.ranking-footer { align-items: flex-start; gap: 10px; }.ranking-footer nav { max-width: 65%; overflow: auto; }
	.report-guide { display: block; }.report-guide .button { margin-top: 13px; }
	.report-card > footer, .plugin-card { align-items: stretch; flex-direction: column; }.report-card > footer .button, .plugin-card-actions .button { width: 100%; }
	.plugin-hero { grid-template-columns: 50px 1fr; }.plugin-mark { width: 50px; height: 50px; }.plugin-hero > .badge { grid-column: 1/3; }
	.install-summary ol { grid-template-columns: 1fr; }
	.manual-hero { padding: 0 5px; }.manual-layout { display: block; }.manual-toc { position: static; display: flex; overflow: auto; margin-bottom: 14px; }.manual-toc strong { display: none; }.manual-toc a { flex: none; border-left: 0; border-bottom: 2px solid transparent; }.quick-steps, .manual-metrics { grid-template-columns: 1fr; }.manual-compare { flex-wrap: wrap; }.manual-compare div { flex: 1; padding: 11px; }.manual-compare span { width: 100%; text-align: center; }.manual-ui, .manual-dl > div { grid-template-columns: 1fr; }
	.cause-list article { grid-template-columns: 1fr; }.cause-list small { grid-column: 1; }
	.admin-summary { grid-template-columns: 1fr; }.admin-actions { flex-direction: column; }
	.auth-page { padding: 16px; }.auth-card { padding: 27px 22px; border-radius: 23px; }.auth-page:after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
}

/* SokuTune Acrylic Black — translucent performance workspace */
:root {
	--ink: #f4f7ff;
	--muted: #a5adbf;
	--faint: #747d91;
	--canvas: #05070b;
	--paper: rgba(18, 23, 33, .68);
	--paper-strong: #111620;
	--line: rgba(255, 255, 255, .10);
	--line-strong: rgba(255, 255, 255, .18);
	--indigo: #91a6ff;
	--indigo-dark: #080b12;
	--indigo-soft: rgba(118, 143, 255, .14);
	--lime: #baff63;
	--lime-soft: rgba(186, 255, 99, .10);
	--green: #72f0ad;
	--green-soft: rgba(77, 226, 145, .12);
	--orange: #ffc06b;
	--orange-soft: rgba(255, 177, 72, .12);
	--red: #ff8e96;
	--red-soft: rgba(255, 104, 113, .12);
	--violet: #c3a5ff;
	--violet-soft: rgba(176, 133, 255, .13);
	--shadow: 0 28px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html { background: #05070b; }
body {
	background:
		radial-gradient(circle at 88% 8%, rgba(114, 143, 255, .24), transparent 29rem),
		radial-gradient(circle at 28% 84%, rgba(145, 67, 255, .12), transparent 32rem),
		radial-gradient(circle at 55% 38%, rgba(186, 255, 99, .07), transparent 24rem),
		linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
		#05070b;
	background-attachment: fixed;
	background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
}
body:before {
	content: ""; position: fixed; z-index: -1; left: 42%; top: -16rem; width: 34rem; height: 34rem;
	border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 140px rgba(115,142,255,.12);
}
a { color: #aebdff; }
.topbar { border-right: 1px solid rgba(255,255,255,.08); background: rgba(5, 8, 13, .76); box-shadow: 18px 0 60px rgba(0,0,0,.26); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); }
.topbar:after { width: 1px; background: linear-gradient(transparent, var(--lime), transparent); box-shadow: 0 0 18px rgba(186,255,99,.55); }
.brand-mark { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 24px rgba(186,255,99,.08); }
.topbar nav a:hover { background: rgba(255,255,255,.055); }
.topbar nav a.active { color: #080b12; background: linear-gradient(135deg,#d5ff9c,var(--lime)); box-shadow: 0 10px 30px rgba(186,255,99,.13), inset 0 1px 0 #fff; }
.site-heading { border-color: var(--line); background: rgba(7,10,16,.58); box-shadow: inset 0 -1px 0 rgba(255,255,255,.025); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
.panel, .site-card, .shortcut-card {
	position: relative; border-color: var(--line);
	background: linear-gradient(145deg,rgba(27,34,47,.72),rgba(12,16,24,.58));
	box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.panel:before, .site-card:before, .shortcut-card:before {
	content: ""; position: absolute; pointer-events: none; inset: 0; border-radius: inherit;
	background: linear-gradient(125deg,rgba(255,255,255,.075),transparent 24%,transparent 74%,rgba(145,166,255,.035));
}
.panel > *, .site-card > *, .shortcut-card > * { position: relative; }
.button { border-color: var(--line-strong); background: rgba(255,255,255,.055); color: #e7ebf7; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.button:hover { border-color: rgba(186,255,99,.55); background: rgba(186,255,99,.08); color: #fff; }
.button.primary { border-color: rgba(186,255,99,.45); background: linear-gradient(135deg,#cfff8e,var(--lime)); color: #080b12; box-shadow: 0 12px 34px rgba(186,255,99,.12), inset 0 1px 0 #fff; }
.button.primary:hover { background: linear-gradient(135deg,#dcffad,#baff63); color: #05070b; }
input, select, textarea { border-color: var(--line-strong); background: rgba(2,5,10,.56); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
input:focus, select:focus, textarea:focus { border-color: rgba(186,255,99,.65); outline-color: rgba(186,255,99,.14); }
select option { background: #10141d; color: #fff; }
.dashboard-heading span, .workspace-heading span, .manual-hero > span, .next-guide > span, .report-guide span, .plugin-hero > div:nth-child(2) > span { color: var(--lime); text-shadow: 0 0 24px rgba(186,255,99,.2); }
.dashboard-heading > strong, .workspace-heading > strong, .site-group-heading > strong, .admin-owner-heading > strong, .chevron { color: var(--lime); }
.shortcut-card.plugin, .plugin-hero, .manual-callout { border-color: rgba(145,166,255,.25); background: linear-gradient(145deg,rgba(66,84,159,.28),rgba(11,15,25,.7)); }
.shortcut-card > span, .plugin-mark, .plugin-site-icon, .empty-state .empty-icon { background: linear-gradient(135deg,#d8ffa6,var(--lime)); color: #080b12; box-shadow: 0 10px 30px rgba(186,255,99,.12); }
.add-site { border-left-color: var(--lime); }
.site-card:hover { border-color: rgba(186,255,99,.44); box-shadow: 0 30px 75px rgba(0,0,0,.42), 0 0 0 1px rgba(186,255,99,.08); }
.badge { background: rgba(255,255,255,.07); color: #c2c9d7; }.badge.good { background: var(--green-soft); color: var(--green); }.badge.warn { background: var(--orange-soft); color: var(--orange); }.badge.bad { background: var(--red-soft); color: var(--red); }.badge.pending { background: var(--violet-soft); color: var(--violet); }.badge.online { background: var(--indigo-soft); color: #aebdff; }
.next-guide, .report-guide, .authority { border-color: rgba(186,255,99,.20); background: linear-gradient(145deg,rgba(186,255,99,.10),rgba(16,22,28,.58)); }
.next-guide li { border-color: rgba(255,255,255,.08); }.next-guide li > b { border-color: rgba(186,255,99,.38); }.next-guide li.done > b { background: #91a6ff; border-color: #91a6ff; color: #070a10; }
.tabs, .tab-caption { border-color: var(--line); background: rgba(13,18,27,.58); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }.tabs a:hover, .tabs a.active { background: rgba(145,166,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(145,166,255,.28); }
.alert { border-color: rgba(114,240,173,.28); background: var(--green-soft); color: var(--green); }.alert.error { border-color: rgba(255,142,150,.28); background: var(--red-soft); color: var(--red); }.alert.warn { border-color: rgba(255,192,107,.28); background: var(--orange-soft); color: var(--orange); }
.cwv-card, .effect-panel, .effect-values > div, .analysis-metrics > div, .detail-metrics > div, .install-step, .switch-row, .field-row { border-color: var(--line); background: rgba(5,9,15,.36); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.cwv-card > b { background: rgba(255,255,255,.07); }.cwv-card.good > b { background: var(--green-soft); }.cwv-card.warn > b { background: var(--orange-soft); }.cwv-card.bad > b { background: var(--red-soft); }
.effect-callout { border-color: rgba(195,165,255,.25); background: var(--violet-soft); color: var(--violet); }.effect-callout > span { background: rgba(255,255,255,.08); }.effect-callout.good { border-color: rgba(114,240,173,.25); background: var(--green-soft); color: var(--green); }.effect-callout.bad { border-color: rgba(255,142,150,.25); background: var(--red-soft); color: var(--red); }
.effect-values > div.with, .report-comparison > div.with, .manual-compare div:nth-of-type(2), .switch-row.enabled { border-color: rgba(186,255,99,.24); background: var(--lime-soft); }
.effect-wait, .manual-ui span { border-color: var(--line); background: rgba(4,8,14,.48); }.effect-steps .current { background: var(--indigo-soft); color: #b5c2ff; }.effect-steps .current:last-of-type { background: var(--green-soft); color: var(--green); }
.progress, .device-bar i { background: rgba(255,255,255,.08); }.progress i, .device-bar b { background: linear-gradient(90deg,#7d93ff,#b58aff,var(--lime)); box-shadow: 0 0 18px rgba(145,166,255,.22); }
.grid-line { stroke: rgba(255,255,255,.09); }.trend-line.on { stroke: #aab9ff; }.trend-line.off { stroke: #667087; }.trend-chart text { fill: var(--muted); }
.metric-pills a, .ranking-footer a { border-color: var(--line); background: rgba(255,255,255,.045); color: var(--muted); }.metric-pills a.active, .ranking-footer a.active { border-color: rgba(186,255,99,.36); background: var(--lime); color: #080b12; }
th, td, .status-card dt, .status-card dd, .health-list div, .duplicate-row, .connection-panel dt, .connection-panel dd, .effect-toggle, .range-field, .report-card > footer, .manual-section details, .manual-dl > div { border-color: var(--line); }
thead th { color: #7f879a; } table a { color: #b9c5ff; }.tag-code, .manual-section pre { background: rgba(0,2,6,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.report-card.good { border-left-color: var(--green); }.report-card.bad { border-left-color: var(--red); }.report-card.pending { border-left-color: var(--violet); }
.manual-toc { border-color: rgba(186,255,99,.18); background: rgba(24,32,24,.62); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }.manual-toc a { color: #9eaa7a; }.manual-toc a:hover { border-color: var(--lime); color: #fff; }.manual-note { border-color: var(--lime); background: var(--lime-soft); color: #d7e5b5 !important; }
.admin-summary .panel { border-top-color: var(--lime); }.admin-jump a { background: rgba(145,166,255,.15); color: #c8d1ff; }.token-key button { background: var(--lime-soft); color: var(--lime); }
.auth-page { background: radial-gradient(circle at 18% 12%,rgba(186,255,99,.18),transparent 24rem),radial-gradient(circle at 82% 78%,rgba(119,143,255,.22),transparent 30rem),#040609; }
.auth-card { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg,rgba(28,35,48,.74),rgba(9,13,20,.70)); box-shadow: 0 40px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.09); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); }
.auth-card .auth-brand { color: #fff; }.auth-card .brand-mark { border-color: rgba(255,255,255,.3); }.auth-card .brand-copy small { color: var(--muted); }
@supports not (backdrop-filter: blur(1px)) {
	.panel, .site-card, .shortcut-card, .auth-card, .topbar, .site-heading { background-color: #121722; }
}

/* CodePen-inspired glow bodies behind smoked glass */
body {
	background:
		radial-gradient(ellipse at 88% 6%, rgba(0,208,255,.18), transparent 26rem),
		radial-gradient(ellipse at 27% 26%, rgba(255,0,88,.12), transparent 24rem),
		radial-gradient(ellipse at 43% 86%, rgba(77,255,3,.10), transparent 30rem),
		linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
		#0b050f;
	background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
}
.panel, .site-card, .shortcut-card {
	--card-glow: linear-gradient(315deg,#03a9f4,#ff0058);
	isolation: isolate; overflow: visible;
	background: linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
	border-color: rgba(255,255,255,.13);
	box-shadow: 0 24px 55px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.025);
	backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.panel:after, .site-card:after, .shortcut-card:after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	top: 9%; left: 11%; width: 42%; height: 82%; border-radius: 18px;
	background: var(--card-glow); opacity: .26; filter: blur(34px); transform: skewX(12deg);
	transition: opacity .45s ease,transform .55s ease,left .55s ease,width .55s ease;
	animation: none;
}
.panel:nth-of-type(3n+1), .site-card:nth-child(3n+1), .report-card:nth-child(3n+1), .plugin-card:nth-child(3n+1) { --card-glow: linear-gradient(315deg,#ffbc00,#ff0058); }
.panel:nth-of-type(3n+2), .site-card:nth-child(3n+2), .report-card:nth-child(3n+2), .plugin-card:nth-child(3n+2) { --card-glow: linear-gradient(315deg,#03a9f4,#ff0058); }
.panel:nth-of-type(3n), .site-card:nth-child(3n), .report-card:nth-child(3n), .plugin-card:nth-child(3n) { --card-glow: linear-gradient(315deg,#4dff03,#00d0ff); }
.shortcut-card.report { --card-glow: linear-gradient(315deg,#ffbc00,#ff0058); }
.shortcut-card.plugin { --card-glow: linear-gradient(315deg,#03a9f4,#ff0058); }
.panel:hover:after, .site-card:hover:after, .shortcut-card:hover:after {
	left: 5%; width: 66%; opacity: .38; transform: skewX(2deg) translateY(-2px);
}
.panel:before, .site-card:before, .shortcut-card:before {
	z-index: 0; border: 1px solid rgba(255,255,255,.025);
	background: linear-gradient(125deg,rgba(255,255,255,.105),transparent 25%,transparent 72%,rgba(255,255,255,.028));
}
.panel > *, .site-card > *, .shortcut-card > * { z-index: 1; }
.cwv-card, .effect-panel, .analysis-metrics > div, .detail-metrics > div {
	position: relative; isolation: isolate; overflow: hidden;
	background: rgba(9,11,17,.55); border-color: rgba(255,255,255,.12);
	backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}
.cwv-card:before, .effect-panel:before, .analysis-metrics > div:before, .detail-metrics > div:before {
	content: ""; position: absolute; z-index: -1; pointer-events: none; left: -18%; top: 18%; width: 58%; height: 66%;
	border-radius: 50%; background: linear-gradient(315deg,#03a9f4,#ff0058); opacity: .16; filter: blur(24px); transform: skewX(10deg);
}
.cwv-card:nth-child(3n+1):before, .effect-panel:nth-child(3n+1):before, .analysis-metrics > div:nth-child(3n+1):before, .detail-metrics > div:nth-child(3n+1):before { background: linear-gradient(315deg,#ffbc00,#ff0058); }
.cwv-card:nth-child(3n+2):before, .effect-panel:nth-child(3n+2):before, .analysis-metrics > div:nth-child(3n+2):before, .detail-metrics > div:nth-child(3n+2):before { background: linear-gradient(315deg,#03a9f4,#ff0058); }
.cwv-card:nth-child(3n):before, .effect-panel:nth-child(3n):before, .analysis-metrics > div:nth-child(3n):before, .detail-metrics > div:nth-child(3n):before { background: linear-gradient(315deg,#4dff03,#00d0ff); }
.auth-card { position: relative; isolation: isolate; overflow: visible; background: rgba(255,255,255,.065); border-color: rgba(255,255,255,.14); backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); }
.auth-card:before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 7%; left: 8%; width: 54%; height: 86%; border-radius: 22px; background: linear-gradient(315deg,#03a9f4,#ff0058); opacity: .38; filter: blur(42px); transform: skewX(12deg); }
.auth-page { background: radial-gradient(circle at 82% 15%,rgba(0,208,255,.15),transparent 25rem),radial-gradient(circle at 18% 78%,rgba(255,0,88,.15),transparent 25rem),#0b050f; }
@keyframes sokutune-glow-float {
	0%,100% { translate: 0 8px; }
	50% { translate: -8px -6px; }
}
@media (max-width:680px) {
	.panel:after, .site-card:after, .shortcut-card:after { left: 8%; width: 52%; opacity: .22; filter: blur(28px); }
	.panel:hover:after, .site-card:hover:after, .shortcut-card:hover:after { left: 8%; width: 64%; opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
	.panel:after, .site-card:after, .shortcut-card:after, .auth-card:before { animation: none !important; }
}

/* Single shared violet light source */
body, .auth-page {
	background:
		linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
		#08050b;
	background-size: 42px 42px,42px 42px,auto;
}
body:before {
	content: ""; position: fixed; z-index: 0; pointer-events: none;
	top: 7vh; left: 48%; width: min(58vw,860px); height: 78vh;
	border: 0; border-radius: 34%; background: #7657ff; opacity: .30;
	filter: blur(105px); transform: rotate(-12deg) skewX(-10deg);
	box-shadow: none;
}
.site-heading, .container, .auth-card { position: relative; }
.site-heading, .container, .auth-card { z-index: 1; }
.panel:after, .site-card:after, .shortcut-card:after,
.cwv-card:before, .effect-panel:before, .analysis-metrics > div:before, .detail-metrics > div:before,
.auth-card:before { display: none; }
.panel, .site-card, .shortcut-card, .cwv-card, .effect-panel, .analysis-metrics > div, .detail-metrics > div, .auth-card {
	background: linear-gradient(135deg,rgba(255,255,255,.088),rgba(255,255,255,.032));
	border-color: rgba(255,255,255,.14);
	box-shadow: 0 24px 55px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,255,255,.025);
	backdrop-filter: blur(20px) saturate(118%); -webkit-backdrop-filter: blur(20px) saturate(118%);
}
@media (max-width:680px) {
	body:before { top: 16vh; left: 26%; width: 92vw; height: 68vh; opacity: .24; filter: blur(82px); }
}

/* One sculpted violet object: a solid core with its own emitted light. */
body:before { display: none; }
.ambient-object {
	position: fixed; z-index: 0; pointer-events: none;
	top: 22vh; left: 50%; width: min(44vw,620px); height: min(44vw,620px);
	background: url("sokutune-icon.svg") center/contain no-repeat;
	filter: drop-shadow(0 0 32px rgba(118,87,255,.34));
	transform: translateX(-50%) rotate(-8deg);
}
.ambient-object:before, .ambient-object:after {
	content: ""; position: absolute; inset: 0;
}
.ambient-object:before { display: none; }
.ambient-object:after {
	z-index: -1; opacity: .64; background: url("sokutune-icon.svg") center/contain no-repeat;
	filter: blur(58px); transform: scale(1.12);
}
.panel, .site-card, .shortcut-card, .cwv-card, .effect-panel, .analysis-metrics > div, .detail-metrics > div, .auth-card {
	background: linear-gradient(135deg,rgba(24,22,31,.64),rgba(10,9,15,.42));
	border-color: rgba(255,255,255,.15);
	box-shadow: 0 24px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.025);
	backdrop-filter: blur(21px) saturate(116%); -webkit-backdrop-filter: blur(21px) saturate(116%);
}
i[data-lucide], .lucide { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.14em; overflow: hidden; }
.lucide { stroke-width: 1.8; }
.tabs a, .tab-caption a, .panel-heading h2, .shortcut-card > b, .effect-callout > b { display: inline-flex; align-items: center; gap: 7px; }
.tabs a .lucide { width: 15px; height: 15px; }
.tab-caption .lucide, .account-admin .lucide { display: block; width: 15px; height: 15px; vertical-align: 0; }
.account-admin { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.shortcut-card > span .lucide, .plugin-mark .lucide, .plugin-site-icon .lucide, .empty-icon .lucide, .authority > span .lucide, .hero-icon .lucide { width: 22px; height: 22px; }
.inline-icon { width: 12px; height: 12px; }
@media (max-width:680px) {
	.ambient-object { top: 22vh; left: 50%; width: 72vw; height: 72vw; }
	.ambient-object:after { filter: blur(42px); opacity: .54; }
}
@media (prefers-reduced-motion: reduce) {
	.ambient-object { transform: translateX(-50%) rotate(-8deg); }
}

/* Browser-QA polish: responsive rhythm, contextual help and route feedback. */
.site-card-main { min-width: 0; }
.site-card-main > div { min-width: 0; }
.site-card-main > div > span, .site-heading h1 + a, .site-heading .badge.platform + a { overflow-wrap: anywhere; word-break: break-word; }
.tabs { scrollbar-width: none; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { scroll-snap-align: start; }
.help-tip {
	display: inline-grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
	border: 1px solid rgba(174,189,255,.38); border-radius: 50%; background: rgba(145,166,255,.16); color: #cbd4ff;
	font: 800 11px/1 system-ui,sans-serif; cursor: help; vertical-align: .08em;
}
.help-tip:hover, .help-tip:focus-visible, .help-tip.is-open { outline: none; border-color: var(--lime); background: var(--lime); color: #080b12; box-shadow: 0 0 18px rgba(186,255,99,.28); }
.tooltip-popover {
	position: fixed; z-index: 1000; width: max-content; max-width: min(280px,calc(100vw - 24px)); padding: 10px 12px;
	border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(5,7,12,.94); color: #f4f7ff;
	box-shadow: 0 14px 40px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(16px);
	font-size: 12px; line-height: 1.55; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .16s ease,transform .16s ease;
}
.tooltip-popover.is-visible { opacity: 1; transform: translateY(0); }
.page-loader {
	position: fixed; z-index: 1200; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 9px; padding: 10px 13px;
	border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(7,9,15,.88); color: #f4f7ff;
	box-shadow: 0 18px 50px rgba(0,0,0,.44); backdrop-filter: blur(18px); font-size: 11px; font-weight: 750;
	pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease,transform .18s ease;
}
.page-loader:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#7657ff,var(--lime),transparent); transform: scaleX(.25); transform-origin: left; }
.page-loader > i { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--lime); border-radius: 50%; }
.is-navigating .page-loader { visibility: visible; opacity: 1; transform: translateY(0); }
.is-navigating .page-loader:after { animation: loading-line 1.1s ease-in-out infinite; }
.is-navigating .page-loader > i { animation: loading-spin .7s linear infinite; }
.ambient-object {
	animation: ambient-drift 14s ease-in-out infinite alternate;
	will-change: transform;
}
.ambient-object:after {
	animation: ambient-breathe 7s ease-in-out infinite alternate;
}
.panel, .site-card, .shortcut-card { animation: surface-enter .48s cubic-bezier(.2,.8,.2,1) backwards; }
.panel:nth-of-type(2), .site-card:nth-child(2), .shortcut-card:nth-child(2) { animation-delay: .05s; }
.panel:nth-of-type(3), .site-card:nth-child(3) { animation-delay: .1s; }
.shortcut-card:hover { border-color: rgba(174,189,255,.25); transform: translateY(-2px); transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-line { 0% { transform: translateX(-35%) scaleX(.2); } 55% { transform: translateX(65%) scaleX(.55); } 100% { transform: translateX(160%) scaleX(.18); } }
@keyframes ambient-drift { from { transform: translateX(-50%) rotate(-8deg) translate3d(0,0,0); } to { transform: translateX(-50%) rotate(-5deg) translate3d(0,-12px,0); } }
@keyframes ambient-breathe { from { opacity: .48; } to { opacity: .78; } }
@keyframes surface-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:680px) {
	.site-container { padding: 27px 14px 0; }
	.site-heading h1 + a { display: block; margin-top: 4px; white-space: normal; font-size: 11px; }
	.tabs, .tab-caption { border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
	.tabs { border-radius: 18px 18px 0 0; }
	.tab-caption { border-radius: 0 0 14px 14px; }
	.cwv-panel { padding: 18px; border-right: 1px solid rgba(255,255,255,.15); border-left: 1px solid rgba(255,255,255,.15); border-radius: 18px; }
	.cwv-card { min-height: 146px; }
	.cwv-card header span { white-space: normal; line-height: 1.35; }
	.site-card { min-width: 0; }
	.site-card-main > div > span { display: block; max-width: 100%; font-size: 10px; }
	.page-loader { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ambient-object, .ambient-object:after, .panel, .site-card, .shortcut-card, .page-loader:after, .page-loader > i { animation: none !important; }
}

/* Metric motion: count-up values, growing bars and drawn trend lines. */
.number-animating { font-variant-numeric: tabular-nums; }
.progress i, .device-bar b { transition: width 1s cubic-bezier(.2,.8,.2,1); }
.trend-chart .grid-line, .trend-chart .threshold, .trend-chart text { opacity: 0; transition: opacity .45s ease; }
.trend-chart .trend-line { opacity: 0; stroke-dashoffset: 1; }
.trend-chart .trend-line.on { stroke-dasharray: 1; }
.trend-chart .trend-line.off { stroke-dasharray: .025 .018; }
.trend-chart.is-visible .grid-line, .trend-chart.is-visible .threshold, .trend-chart.is-visible text { opacity: 1; }
.trend-chart.is-visible .threshold { transition-delay: .18s; }
.trend-chart.is-visible .trend-line { opacity: 1; animation: chart-draw 1.15s cubic-bezier(.2,.75,.2,1) .22s forwards; }
.trend-chart.is-visible .trend-line.off { animation-delay: .38s; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.progress i, .device-bar b { transition: none; }
	.trend-chart .grid-line, .trend-chart .threshold, .trend-chart text, .trend-chart .trend-line { opacity: 1; }
	.trend-chart .trend-line { stroke-dashoffset: 0; animation: none !important; }
}

/* High-contrast glass palette: lime actions and near-white supporting copy. */
:root { --muted: #d5dae5; --faint: #aeb6c7; }
.panel, .site-card, .shortcut-card, .cwv-card, .effect-panel, .analysis-metrics > div, .detail-metrics > div, .auth-card { color: #f7f9ff; }
.panel p, .site-card-main > div > span, .site-card-main > small, .shortcut-card p,
.dashboard-heading p, .workspace-heading p, .manual-hero p, .tab-caption, .visit-count,
.site-group-heading p, .admin-owner-heading p,
.cwv-card header, .cwv-card small, .status-card dt, .measurement-progress,
.effect-panel > header small, .effect-values span, .effect-toggle small, .range-field > small, .range-ends,
.analysis-metrics span, .detail-metrics span, .health-list dt, .duplicate-row span, .chart-legend,
.cause-list small, .cause-list span, thead th, .ranking-footer, .ranking-note,
.install-step small, .authority p, .connection-panel dt, .switch-row small, .field-row small,
.report-card > header span, .report-comparison small, .report-comparison span,
.manual-section li, .manual-metrics span, .manual-dl dd, .admin-summary span, .admin-summary small,
.admin-table small, .self-label, .empty-state, .empty-inline, .auth-card > p { color: var(--muted); }
.button:not(.danger) {
	border-color: rgba(186,255,99,.48); background: rgba(186,255,99,.12); color: #edffd9;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(186,255,99,.05);
}
.button:not(.danger):hover, .button:not(.danger):focus-visible {
	border-color: var(--lime); background: var(--lime); color: #080b12; box-shadow: 0 12px 32px rgba(186,255,99,.18),inset 0 1px 0 #fff;
}
.button.primary { border-color: var(--lime); background: linear-gradient(135deg,#dcffad,var(--lime)); color: #080b12; }
.button.primary:hover, .button.primary:focus-visible { background: linear-gradient(135deg,#e8ffc9,#c5ff79); color: #05070b; }
.tabs a:hover, .tabs a.active, .metric-pills a.active, .ranking-footer a.active {
	border-color: var(--lime); background: var(--lime); color: #080b12; box-shadow: 0 9px 24px rgba(186,255,99,.12);
}
.account-user, .account-menu-panel a, .account-menu-panel button { color: #dfffb9; }
.account-user:hover, .account-user:focus-visible, .account-menu-panel a:hover, .account-menu-panel a:focus-visible, .account-menu-panel button:hover, .account-menu-panel button:focus-visible { color: var(--lime); }
.tab-caption a, table a, .site-heading a { color: #dce4ff; }

/* Top navigation and a page-length violet atmosphere. */
:root { --rail: 0px; }
body:not(.auth-page) {
	position: relative; min-height: 100vh;
	background:
		radial-gradient(ellipse 32rem 48rem at 61% 15%,rgba(118,87,255,.20),transparent 72%),
		radial-gradient(ellipse 38rem 64rem at 58% 72%,rgba(118,87,255,.16),transparent 74%),
		linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
		#08050b;
	background-size: auto,auto,42px 42px,42px 42px,auto;
	background-repeat: no-repeat,no-repeat,repeat,repeat,no-repeat;
}
.topbar {
	position: sticky; top: 0; width: 100%; min-height: 0; height: auto;
	border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09);
	box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.topbar:after { display: none; }
.topbar-inner {
	flex-direction: row; align-items: center; width: min(1180px,100%); height: auto;
	margin: 0 auto; padding: 14px 24px;
}
.topbar nav { display: flex; gap: 5px; margin: 0 0 0 42px; }
.topbar nav a { display: grid; min-height: 40px; padding: 8px 13px; }
.account { margin: 0 0 0 auto; padding: 0 0 0 18px; border-top: 0; }
.site-heading { margin-left: 0; }
.container { width: min(1180px,100%); margin: 0 auto 80px; }
.site-container { width: min(1040px,100%); margin: 0 auto 80px; }
@media (max-width:900px) {
	.topbar-inner { width: 100%; padding: 12px 18px; }
	.topbar nav { margin-left: 20px; }
	.account { padding-left: 12px; }
}
@media (max-width:680px) {
	body:not(.auth-page) {
		background:
			radial-gradient(ellipse 22rem 38rem at 68% 14%,rgba(118,87,255,.20),transparent 72%),
			radial-gradient(ellipse 26rem 54rem at 52% 74%,rgba(118,87,255,.15),transparent 74%),
			linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
			linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
			#08050b;
		background-size: auto,auto,32px 32px,32px 32px,auto;
		background-repeat: no-repeat,no-repeat,repeat,repeat,no-repeat;
	}
	.topbar-inner { flex-wrap: wrap; padding: 11px 14px; }
	.topbar nav {
		order: 3; width: calc(100% + 28px); margin: 10px -14px -11px; padding: 7px 14px; gap: 8px;
		border-top: 1px solid rgba(255,255,255,.08);
	}
	.topbar nav a { display: flex; align-items: center; min-height: 34px; padding: 7px 10px; }
}

/* Unified interactive language: lime actions and feedback on every control. */
:where(a[href],button,summary,select,input[type="range"],.switch) { cursor: pointer; }
:where(a[href],button,summary,select,input,textarea):focus-visible {
	outline: 2px solid var(--lime); outline-offset: 3px;
}
.button,
.topbar nav a,
.account-user,
.account-menu-panel button,
.account-admin,
.tabs a,
.metric-pills a,
.ranking-footer a,
.admin-jump a,
.manual-toc a,
.effect-callout,
.site-card,
.shortcut-card,
.token-key button,
.manual-section summary,
.tab-caption a,
.site-heading a,
table a,
.brand,
.auth-brand {
	transition: color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .22s ease,transform .18s ease,opacity .18s ease;
}
.button:not(.danger) {
	min-height: 42px; padding: 9px 16px; border: 1px solid var(--lime); border-radius: 12px;
	background: linear-gradient(135deg,#ddffb0,var(--lime)); color: #080b12; font-weight: 800;
	box-shadow: 0 10px 28px rgba(186,255,99,.12),inset 0 1px 0 rgba(255,255,255,.8);
}
.button.primary { background: linear-gradient(135deg,#ddffb0,var(--lime)); }
.button.small { min-height: 34px; padding: 6px 10px; border-radius: 10px; }
.button.danger {
	border-color: rgba(255,142,150,.48); border-radius: 12px; background: rgba(255,104,113,.12); color: #ffd7da;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.tabs a,.metric-pills a,.ranking-footer a,.admin-jump a { border: 1px solid rgba(255,255,255,.12); }
.tabs a.active,.metric-pills a.active,.ranking-footer a.active {
	border-color: var(--lime); background: var(--lime); color: #080b12; box-shadow: 0 9px 24px rgba(186,255,99,.13);
}
.topbar nav a.active { border-color: var(--lime); background: linear-gradient(135deg,#d5ff9c,var(--lime)); color: #080b12; }
.effect-callout > b,.site-card .chevron,.shortcut-card > b { transition: transform .18s ease,color .18s ease; }
.account-user { padding: 6px 9px; border-radius: 9px; }
.manual-section summary { border-radius: 9px; }
.token-key button { min-height: 28px; padding: 4px 9px; border: 1px solid rgba(186,255,99,.35); }
.switch-ui { box-shadow: 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.08); }
input[type="range"] { accent-color: var(--lime); }

@media (hover:hover) {
	.button:not(.danger):hover {
		border-color: #dfffba; background: linear-gradient(135deg,#efffd9,#c7ff7e); color: #05070b;
		box-shadow: 0 14px 34px rgba(186,255,99,.23),inset 0 1px 0 #fff; transform: translateY(-2px);
	}
	.button.danger:hover { border-color: #ff9ba2; background: #ff8e96; color: #190508; box-shadow: 0 12px 30px rgba(255,104,113,.18); transform: translateY(-2px); }
	.topbar nav a:not(.active):hover,.account-admin:hover { border-color: rgba(186,255,99,.32); background: rgba(186,255,99,.10); color: #f4ffea; transform: translateY(-1px); }
	.topbar nav a.active:hover { background: linear-gradient(135deg,#edffd4,#c7ff7e); color: #05070b; box-shadow: 0 12px 30px rgba(186,255,99,.20); transform: translateY(-1px); }
	.brand:hover,.auth-brand:hover { opacity: .82; }
	.brand:hover .brand-mark,.auth-brand:hover .brand-mark { border-color: var(--lime); box-shadow: 0 0 24px rgba(186,255,99,.20),inset 0 1px 0 rgba(255,255,255,.18); }
	.account-user:hover, .account-menu-panel a:hover, .account-menu-panel button:hover { background: rgba(186,255,99,.09); color: var(--lime); }
	.tabs a:not(.active):hover,.metric-pills a:not(.active):hover,.ranking-footer a:not(.active):hover,.admin-jump a:hover {
		border-color: rgba(186,255,99,.48); background: rgba(186,255,99,.11); color: #f3ffe5; box-shadow: 0 8px 22px rgba(186,255,99,.08); transform: translateY(-1px);
	}
	.effect-callout:hover,.site-card:hover,.shortcut-card:hover {
		border-color: rgba(186,255,99,.46); box-shadow: 0 30px 75px rgba(0,0,0,.44),0 0 0 1px rgba(186,255,99,.08); transform: translateY(-3px); will-change: transform;
	}
	.effect-callout:hover > b,.site-card:hover .chevron,.shortcut-card:hover > b { color: var(--lime); transform: translateX(4px); }
	.manual-toc a:hover,.manual-section summary:hover { border-color: var(--lime); background: rgba(186,255,99,.09); color: #fff; }
	.tab-caption a:hover,.site-heading a:hover,table a:hover,.auth-switch a:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
	.token-key button:hover { border-color: var(--lime); background: var(--lime); color: #080b12; box-shadow: 0 8px 20px rgba(186,255,99,.14); transform: translateY(-1px); }
	.switch:hover .switch-ui { box-shadow: 0 0 0 3px rgba(186,255,99,.13),0 0 20px rgba(186,255,99,.12); }
	.switch-row:has(.switch:hover),select:hover,input[type="range"]:hover { border-color: rgba(186,255,99,.48); }
}
.button:active,.tabs a:active,.metric-pills a:active,.ranking-footer a:active,.effect-callout:active,.site-card:active,.shortcut-card:active,.token-key button:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion:reduce) {
	.button,.topbar nav a,.account-user,.account-menu-panel button,.account-admin,.tabs a,.metric-pills a,.ranking-footer a,.admin-jump a,.manual-toc a,.effect-callout,.site-card,.shortcut-card,.token-key button,.manual-section summary { transition:none; }
}

/* Pulse S brand system: one mark for header, favicon and ambient object. */
.brand-mark {
	border: 0; border-radius: 12px; background: url("sokutune-icon.svg") center/contain no-repeat;
	box-shadow: 0 0 22px rgba(118,87,255,.18); overflow: visible;
}
.brand-mark:before,.brand-mark:after,.brand-mark i { display: none; }
@media (hover:hover) {
	.brand:hover .brand-mark,.auth-brand:hover .brand-mark { border-color: transparent; box-shadow: 0 0 28px rgba(118,87,255,.34),0 0 18px rgba(186,255,99,.12); }
}

/* Admin: keep Console violet, use red for the dedicated admin surfaces. */
.admin-app, .auth-page.admin-auth {
	--indigo: #ff6d78;
	--indigo-soft: rgba(255, 72, 88, .16);
	--violet: #ff6d78;
	--violet-soft: rgba(255, 72, 88, .14);
}
.admin-app .ambient-object,
.auth-page.admin-auth .ambient-object {
	background-image: url("sokutune-icon-admin.svg");
	filter: drop-shadow(0 0 32px rgba(255, 48, 72, .48));
}
.admin-app .ambient-object:after,
.auth-page.admin-auth .ambient-object:after {
	background-image: url("sokutune-icon-admin.svg");
}
.admin-app .brand-mark,
.auth-page.admin-auth .brand-mark {
	background-image: url("sokutune-icon-admin.svg");
	box-shadow: 0 0 22px rgba(255, 48, 72, .30);
}
.admin-app .brand-copy small,
.auth-page.admin-auth .brand-copy small {
	color: #ff8f98;
}
.admin-app .admin-jump a {
	background: rgba(255, 72, 88, .18);
	color: #ffc2c6;
}
.admin-app .admin-summary .panel {
	border-top-color: #ff6d78;
}
.admin-app .panel.admin-panel {
	overflow: hidden;
}
@media (hover:hover) {
	.admin-app .brand:hover .brand-mark,
	.auth-page.admin-auth .auth-brand:hover .brand-mark {
		box-shadow: 0 0 28px rgba(255, 48, 72, .46), 0 0 18px rgba(186, 255, 99, .10);
	}
}

/* Login and admin were stuttering because every card live-blurred the huge ambient mark. */
.topbar, .site-heading, .panel, .site-card, .shortcut-card, .cwv-card, .effect-panel,
.analysis-metrics > div, .detail-metrics > div, .auth-card, .button, .tabs, .tab-caption,
.manual-toc, .page-loader, .tooltip-popover, .account-menu-panel {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.panel, .site-card, .shortcut-card, .cwv-card, .effect-panel, .analysis-metrics > div, .detail-metrics > div, .auth-card {
	background: linear-gradient(135deg, rgba(20,18,26,.94), rgba(9,8,14,.90));
}
.topbar { background: rgba(5, 8, 13, .96); }
.panel, .site-card, .shortcut-card { animation: none; }