/* FTA Search Intelligence: clean, modern UI with light and dark themes.
 * Signature: the //fta. purple → teal gradient (#5C05D9 → #00ADC3), used sparingly
 * for focus, the active state, charts and the primary action.
 * Theme: follows the OS by default; html[data-theme="light|dark"] overrides.
 */

/* Product palette: original FTA purple and cyan, on quiet neutral surfaces. */
:root {
	color-scheme: light;
	--bg: #f6f7fb; --bg-glow-1: transparent; --bg-glow-2: transparent;
	--surface: #ffffff; --surface-2: #f7f8fb; --surface-3: #edf0f6; --glass: rgba(255, 255, 255, .96);
	--line: #e3e6ef; --line-strong: #ccd2e0;
	--text: #202537; --text-2: #4b5368; --muted: #71798c;
	--accent: #5c05d9; --accent-2: #7335df; --accent-hover: #4904ae;
	--accent-soft: #f2ecfd; --accent-ring: rgba(92, 5, 217, .17); --accent-fg: #5c05d9;
	--teal: #007f91; --teal-soft: #e8f6f8;
	--up: #187a58; --up-soft: #e9f4ef; --down: #bb4050; --down-soft: #fceff0; --warn: #94651c;
	--info-bg: #eef8fa; --info-line: #cde7ed; --info-fg: #276575;
	--err-bg: #fff3f4; --err-line: #f0d3d7; --err-fg: #a13545;
	--warn-bg: #fcf6e9; --warn-line: #eadbb6; --warn-fg: #836020;
	--row-hover: #f8f7fd; --highlight: inset 0 1px 0 rgba(255, 255, 255, .65);
	--shadow-sm: 0 2px 3px rgba(30, 35, 60, .025);
	--shadow-md: 0 5px 20px -8px rgba(30, 35, 60, .14);
	--shadow-lg: 0 22px 70px -20px rgba(18, 23, 45, .25);
	--backdrop: rgba(14, 19, 35, .42);
	--grad: linear-gradient(110deg, #5c05d9, #00adc3);
	--grad-soft: linear-gradient(110deg, #f2ecfd, #eaf7fa);
	--radius: 14px; --radius-sm: 8px;
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--ease: cubic-bezier(.2, .8, .2, 1);
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #10131e; --bg-glow-1: transparent; --bg-glow-2: transparent;
	--surface: #191d2b; --surface-2: #202537; --surface-3: #2a3044; --glass: rgba(25, 29, 43, .96);
	--line: #30364b; --line-strong: #474f68;
	--text: #edf0f8; --text-2: #c5cbdf; --muted: #a1abc2;
	--accent: #ad87f7; --accent-2: #c0a2fa; --accent-hover: #c5a9fc;
	--accent-soft: #31244d; --accent-ring: rgba(173, 135, 247, .22); --accent-fg: #b99af8;
	--teal: #54c8dc; --teal-soft: #1c3541;
	--up: #8ed2b6; --up-soft: #233d37; --down: #f197a1; --down-soft: #402a35; --warn: #dbbe80;
	--info-bg: #1d303e; --info-line: #355363; --info-fg: #a7dce6;
	--err-bg: #35232e; --err-line: #64404e; --err-fg: #f4b4bc;
	--warn-bg: #342f25; --warn-line: #5c5138; --warn-fg: #e3cc98;
	--row-hover: #24283d; --highlight: inset 0 1px 0 rgba(255, 255, 255, .025);
	--shadow-sm: 0 2px 3px rgba(0, 0, 0, .1);
	--shadow-md: 0 5px 20px -8px rgba(0, 0, 0, .3);
	--shadow-lg: 0 22px 70px -20px rgba(0, 0, 0, .55);
	--backdrop: rgba(6, 9, 20, .66);
	--grad: linear-gradient(110deg, #9468e6, #21a9c2);
	--grad-soft: linear-gradient(110deg, #31244d, #1c3541);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
	color-scheme: dark;
	--bg: #10131e; --bg-glow-1: transparent; --bg-glow-2: transparent;
	--surface: #191d2b; --surface-2: #202537; --surface-3: #2a3044; --glass: rgba(25, 29, 43, .96);
	--line: #30364b; --line-strong: #474f68;
	--text: #edf0f8; --text-2: #c5cbdf; --muted: #a1abc2;
	--accent: #ad87f7; --accent-2: #c0a2fa; --accent-hover: #c5a9fc;
	--accent-soft: #31244d; --accent-ring: rgba(173, 135, 247, .22); --accent-fg: #b99af8;
	--teal: #54c8dc; --teal-soft: #1c3541;
	--up: #8ed2b6; --up-soft: #233d37; --down: #f197a1; --down-soft: #402a35; --warn: #dbbe80;
	--info-bg: #1d303e; --info-line: #355363; --info-fg: #a7dce6;
	--err-bg: #35232e; --err-line: #64404e; --err-fg: #f4b4bc;
	--warn-bg: #342f25; --warn-line: #5c5138; --warn-fg: #e3cc98;
	--row-hover: #24283d; --highlight: inset 0 1px 0 rgba(255, 255, 255, .025);
	--shadow-sm: 0 2px 3px rgba(0, 0, 0, .1);
	--shadow-md: 0 5px 20px -8px rgba(0, 0, 0, .3);
	--shadow-lg: 0 22px 70px -20px rgba(0, 0, 0, .55);
	--backdrop: rgba(6, 9, 20, .66);
	--grad: linear-gradient(110deg, #9468e6, #21a9c2);
	--grad-soft: linear-gradient(110deg, #31244d, #1c3541);
	}
}

/* Base -------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; }
body {
	min-height: 100vh;
	background:
		radial-gradient(1100px 520px at 12% -12%, var(--bg-glow-1), transparent 65%),
		radial-gradient(900px 480px at 100% -8%, var(--bg-glow-2), transparent 60%),
		var(--bg);
	background-attachment: fixed;
	transition: background-color .3s var(--ease), color .3s var(--ease);
}
a { color: var(--accent-fg); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0 0 .35em; color: var(--text); }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.028em; line-height: 1.2; }
h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.012em; }
h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--text); letter-spacing: -.005em; margin-bottom: 14px; }
h3::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--grad); flex: none; }
code { font: 12px var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.icon { display: block; flex: none; }
::selection { background: var(--accent-ring); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* Shell ------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px; background: var(--glass); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-right: 1px solid var(--line); overflow-y: auto; }
.brandmark { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 18px; color: var(--text); margin-bottom: 4px; position: relative; }
.brandmark::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.brandmark:hover { color: var(--text); }
.brandmark .product { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-label { font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 18px 12px 6px; opacity: .85; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .brand-list a { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; font-size: 13.5px; transition: background .15s var(--ease), color .15s var(--ease); }
.nav a .icon { color: var(--muted); transition: color .15s; }
.nav a:hover, .brand-list a:hover { background: var(--surface-2); color: var(--text); }
.nav a:hover .icon { color: var(--text); }
.nav a.active, .brand-list a.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.nav a.active::before, .brand-list a.active::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.nav a.active .icon { color: var(--accent-fg); }
.brand-list { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
.brand-list a { font-size: 13px; }
.brand-list .dot, .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.brand-list .dot { box-shadow: 0 0 10px -1px var(--dot-c, transparent); }

.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); font-weight: 600; }
.crumbs .sep { color: var(--line-strong); }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 13px; font-weight: 550; color: var(--text-2); box-shadow: var(--shadow-sm); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.theme-toggle .when-light { display: block; }
.theme-toggle .when-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .when-light { display: none; }
:root[data-theme="dark"] .theme-toggle .when-dark { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .when-light { display: none; }
	:root:not([data-theme="light"]) .theme-toggle .when-dark { display: block; }
}
.theme-toggle .icon { transition: transform .5s var(--ease); }
.theme-toggle:hover .icon { transform: rotate(25deg); }

.main { padding: 32px 32px 72px; min-width: 0; max-width: 1480px; width: 100%; }
.loading { position: relative; color: transparent; height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; user-select: none; overflow: hidden; }
.modal .loading, .card .loading { height: 64px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Page enter animation: each top-level block rises in, slightly staggered. */
.main > * { animation: rise .45s var(--ease) both; }
.main > *:nth-child(2) { animation-delay: .03s; }
.main > *:nth-child(3) { animation-delay: .06s; }
.main > *:nth-child(4) { animation-delay: .09s; }
.main > *:nth-child(5) { animation-delay: .12s; }
.main > *:nth-child(n+6) { animation-delay: .15s; }
.main.still > * { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards & KPIs ------------------------------------------------------------ */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm), var(--highlight); }
.grid { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.kpis:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis:not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
/* Too narrow for 4 across (zoomed in, small laptops): 2 × 2 instead of 3 + 1. */
@media (max-width: 1180px) { .kpis, .kpis:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.kpi .label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 550; }
.kpi .label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; transition: background .2s; }
.kpi .value { font-size: clamp(22px, 2.1vw, 30px); overflow-wrap: anywhere; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; margin-top: 10px; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi .sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 6px; }
.kpi .sub .delta { padding: 1px 7px; border-radius: 99px; }
.kpi .sub .delta.up { background: var(--up-soft); }
.kpi .sub .delta.down { background: var(--down-soft); }
.kpi::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.kpi[data-metric] { cursor: pointer; }
.kpi[data-metric]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--highlight); border-color: var(--line-strong); }
.kpi[data-metric]:hover::after { opacity: 1; }
.kpi.accent { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: 0 10px 30px -12px var(--accent-ring), var(--highlight); }
.kpi.accent .label { color: var(--text); }
.kpi.accent .label::before { background: var(--grad); box-shadow: 0 0 0 3px var(--accent-soft); }
.kpi.accent::after { opacity: 1; }

.brands-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.brand-card { cursor: pointer; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.brand-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md), var(--highlight); }
.brand-card::before { content: ""; position: absolute; top: -90px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--accent)) 22%, transparent), transparent 70%); pointer-events: none; transition: opacity .3s; opacity: .7; }
.brand-card:hover::before { opacity: 1; }
.brand-card .brand-top { display: flex; align-items: center; gap: 12px; }
.brand-card .brand-top h2 { margin: 0; }
.brand-card .mono { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 16px; color: #fff; background: var(--c, var(--accent)); background-image: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%); box-shadow: 0 6px 16px -6px var(--c, var(--accent)), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.brand-card .go { margin-left: auto; color: var(--muted); transition: transform .2s var(--ease), color .2s; }
.brand-card:hover .go { transform: translateX(3px); color: var(--text); }
.brand-card .domain { color: var(--muted); font-size: 12.5px; }
.brand-card .row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.brand-card .stat b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.brand-card .stat span { color: var(--muted); font-size: 11.5px; }

.meter { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 12px 0 8px; }
.meter > i { display: block; height: 100%; background: var(--grad); border-radius: 99px; animation: grow .9s var(--ease) both; transform-origin: left; }
.meter.over > i { background: var(--down); }
@keyframes grow { from { transform: scaleX(0); } }

/* Buttons & forms ---------------------------------------------------------- */
.btn, button.btn { position: relative; appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--radius-sm); font: 600 13px var(--font); letter-spacing: -.005em; color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border: 1px solid var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .12), 0 6px 16px -6px var(--accent-ring); white-space: nowrap; transition: transform .12s var(--ease), box-shadow .2s var(--ease), filter .2s, background .2s; }
.btn:hover { color: #fff; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .12), 0 10px 24px -8px var(--accent-ring); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow-sm), var(--highlight); filter: none; }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.btn.danger { background: var(--surface); color: var(--down); border-color: var(--err-line); box-shadow: var(--shadow-sm); }
.btn.danger:hover { background: var(--err-bg); color: var(--down); filter: none; }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
label { display: block; font-size: 12px; color: var(--text-2); font-weight: 550; margin-bottom: 6px; }
input, select, textarea { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 12px; height: 36px; font: 13.5px var(--font); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868c9e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
textarea { min-height: 130px; padding: 10px 12px; height: auto; resize: vertical; line-height: 1.55; }
input[type="color"] { padding: 3px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; box-shadow: none; accent-color: var(--accent); }
input[type="date"] { font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input:disabled, select:disabled { background-color: var(--surface-2); color: var(--muted); cursor: default; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.field { margin-bottom: 16px; }
.form-grid > *, .filter-grid > * { min-width: 0; }
/* Search Console filter bar: query (operator + text) takes two columns. */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; align-items: end; }
.filter-grid .f-query { grid-column: span 2; }
.q-row { display: flex; gap: 6px; min-width: 0; }
.q-row select { flex: 0 0 auto; width: auto; max-width: 48%; }
.q-row input { flex: 1 1 auto; min-width: 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.search { width: 240px; max-width: 100%; }

/* Segmented controls ------------------------------------------------------- */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.seg.compact { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.seg-opt { margin: 0; cursor: pointer; color: var(--text); }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.seg-opt b { font-size: 13.5px; font-weight: 600; }
.seg-opt small { color: var(--muted); font-size: 12px; }
.seg-opt:hover span { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); }
.seg-opt input:checked + span { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: 0 6px 18px -10px var(--accent-ring); }
.seg.compact .seg-opt span { padding: 5px 12px; border: 0; background: transparent; border-radius: 8px; box-shadow: none; }
.seg.compact .seg-opt b { font-size: 12.5px; font-weight: 550; color: var(--muted); transition: color .15s; }
.seg.compact .seg-opt:hover b { color: var(--text); }
.seg.compact .seg-opt input:checked + span { background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line) inset; }
.seg.compact .seg-opt input:checked + span b { font-weight: 650; color: var(--text); }
.seg-opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
.schedule-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
details.more { margin-bottom: 14px; }
details.more > summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); margin-right: 2px; }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more > summary:hover { color: var(--text); }
details.card.more > summary { color: var(--text); font-size: 13px; }

/* Tables ------------------------------------------------------------------- */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), var(--highlight); }
.card .table-wrap { box-shadow: none; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; background: var(--surface); cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 1; transition: color .15s; }
th:hover { color: var(--text); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--row-hover); }
tbody tr:hover td.kw { color: var(--accent-fg); }
tbody tr:last-child td { border-bottom: 0; }
td.kw { font-weight: 600; white-space: normal; min-width: 200px; color: var(--text); transition: color .12s; }
td.url { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num > div { margin-top: 2px; }
.pos { display: inline-flex; min-width: 36px; justify-content: center; padding: 2px 8px; border-radius: 7px; font-weight: 650; font-size: 12.5px; background: var(--surface-3); color: var(--text); font-variant-numeric: tabular-nums; }
.pos.top3 { background: var(--teal-soft); color: var(--teal); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 25%, transparent); }
.pos.top10 { background: var(--accent-soft); color: var(--accent-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.pos.none { background: transparent; color: var(--muted); font-weight: 500; }
.delta { font-weight: 650; font-size: 12px; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); font-size: 11px; font-weight: 550; margin-right: 4px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 650; background: var(--surface-3); color: var(--muted); }
.badge.queued { background: var(--warn-bg); color: var(--warn-fg); }
.badge.cold { background: var(--info-bg); color: var(--info-fg); }
.badge.ai { background: var(--grad); color: #fff; vertical-align: middle; letter-spacing: .03em; box-shadow: 0 4px 12px -4px var(--accent-ring); }
.icon-btn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 0 7px; border-radius: var(--radius-sm); font-size: 14px; transition: background .15s, color .15s, border-color .15s; }
.icon-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--line); }

/* Charts ------------------------------------------------------------------- */
.chart-box { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .grid-line.base { stroke-dasharray: none; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: url(#fta-grad); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 4px 8px var(--accent-ring)); stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.1s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 1; } }
.chart .area { animation: fade .9s .2s var(--ease) both; }
@keyframes fade { from { opacity: 0; } }
.chart .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; opacity: 0; transition: opacity .15s; }
.chart .pt.show, .chart .pt.on { opacity: 1; }
.chart .pt.show:hover { r: 6; }
.chart .cursor { stroke: var(--line-strong); stroke-width: 1; opacity: 0; pointer-events: none; }
.chart .cursor.on { opacity: 1; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .seg-bar { transition: opacity .15s, filter .15s; transform-origin: bottom; transform-box: fill-box; animation: bar .7s var(--ease) both; }
@keyframes bar { from { transform: scaleY(0); } }
.chart .col:hover .seg-bar { filter: brightness(1.1); }
.chart.dimmable:hover .col:not(:hover) .seg-bar { opacity: .45; }
.spark { width: 96px; height: 28px; color: var(--teal); overflow: visible; }
.bars { max-height: 220px; }
.bars rect { fill: url(#fta-vgrad); transform-origin: bottom; transform-box: fill-box; animation: bar .7s var(--ease) both; transition: opacity .15s; }
.bars:hover rect:not(:hover) { opacity: .55; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px var(--line); }

/* Brand vs non-brand summary */
.bt-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.bt-stats > div { display: flex; flex-direction: column; gap: 2px; }
.bt-stats b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.bt-stats b .delta { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; }
.bt-stats b .delta.up { background: var(--up-soft); }
.bt-stats b .delta.down { background: var(--down-soft); }
.bt-stats .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* Team activity */
.who { display: flex; align-items: center; gap: 10px; }
.avatar.sm { position: relative; width: 30px; height: 30px; font-size: 12px; flex: none; }
.avatar .online { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 2px var(--surface); }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--up); font-weight: 650; font-size: 12.5px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--up-soft); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.minibars { width: 96px; height: 28px; display: block; }
.minibars rect { fill: var(--accent); opacity: .85; }
.minibars rect.zero { fill: var(--line-strong); opacity: .6; }

/* Load errors with retry */
.load-err { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-fg); font-size: 13px; }
.load-err > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.load-err span { opacity: .85; font-size: 12.5px; overflow-wrap: anywhere; }
.load-err.small-err { margin-top: 10px; padding: 10px 14px; }
.chart .failed-bar { fill: none; stroke: var(--warn); stroke-dasharray: 4 4; opacity: .6; }

/* Floating chart tooltip */
.tip { position: fixed; z-index: 100; pointer-events: none; padding: 8px 11px; border-radius: 10px; background: var(--glass); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); color: var(--text); font-size: 12px; line-height: 1.45; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 12px)) scale(.97); transition: opacity .12s, transform .12s var(--ease); }
.tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
.tip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tip .t { color: var(--muted); font-size: 11px; display: block; margin-bottom: 1px; }

/* Savings ------------------------------------------------------------------ */
.savings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.rule { display: flex; gap: 12px; align-items: flex-start; }
.rule .n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; box-shadow: 0 4px 12px -4px var(--accent-ring); }
.rule p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

/* Modal / toast / notices --------------------------------------------------- */
.modal { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); padding: 0; width: min(780px, 94vw); box-shadow: var(--shadow-lg); }
.modal[open] { animation: pop .25s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-body { padding: 24px 28px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 18px; letter-spacing: -.02em; }
.toast { position: fixed; right: 24px; bottom: 24px; display: flex; align-items: flex-start; gap: 10px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); color: var(--text); border: 1px solid var(--line-strong); padding: 13px 16px 13px 14px; border-radius: 12px; max-width: 420px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .2s, transform .25s var(--ease); pointer-events: none; z-index: 99; font-size: 13px; }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px var(--up-soft); }
.toast.show { opacity: 1; transform: none; }
.toast.error::before { background: var(--down); box-shadow: 0 0 0 4px var(--down-soft); }
.empty { text-align: center; padding: 52px 20px; color: var(--muted); }
.empty h2 { color: var(--text); font-size: 17px; }
.card.empty { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--line-strong), var(--line)) border-box; border: 1px dashed var(--line-strong); }
.notice { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-fg); margin-bottom: 18px; font-size: 13px; }
.notice::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.notice.info { border-color: var(--info-line); background: var(--info-bg); color: var(--info-fg); }
.notice.error { border-color: var(--err-line); background: var(--err-bg); color: var(--err-fg); }
.notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Sign-in ------------------------------------------------------------------ */
.gate { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; overflow: hidden; isolation: isolate; }
.gate::before, .gate::after { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.gate::before { background: #5c05d9; top: -260px; left: -160px; }
.gate::after { background: #00adc3; bottom: -280px; right: -180px; animation-delay: -9s; opacity: .4; }
@keyframes drift { to { transform: translate(120px, 80px) scale(1.15); } }
.gate-card { width: min(410px, 100%); background: var(--glass); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--line-strong); border-radius: 20px; padding: 36px 34px; box-shadow: var(--shadow-lg); animation: pop .5s var(--ease) both; }
.gate-logo { color: var(--text); }
.gate-card h1 { margin-top: 22px; font-size: 22px; }
.gate-card p { color: var(--muted); font-size: 13.5px; }
.gate-card form p { margin: 0 0 14px; }
.gate-form { margin-top: 18px; }
.gate-form .field { margin-bottom: 14px; }
.gate-card .notice { margin: 14px 0 0; }
.gate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 18px; font-size: 12.5px; }
.gate-row .check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 450; color: var(--muted); cursor: pointer; }
.gate-submit { width: 100%; height: 42px; border: 0; border-radius: var(--radius-sm); background: var(--grad); color: #fff; font: 650 14px var(--font); cursor: pointer; box-shadow: 0 10px 28px -10px var(--accent-ring), inset 0 1px 0 rgba(255, 255, 255, .25); transition: filter .2s, transform .12s; }
.gate-submit:hover { filter: brightness(1.08); }
.gate-submit:active { transform: translateY(1px); }
.gate-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.gate-card input[type=text], .gate-card input[type=password] { height: 40px; }
.gate-card .login-remember label { display: flex; gap: 8px; align-items: center; font-weight: 400; color: var(--muted); }
.gate-card input[type=submit] { width: 100%; height: 42px; background: var(--grad); border: 0; color: #fff; font-weight: 650; font-size: 14px; cursor: pointer; box-shadow: 0 10px 28px -10px var(--accent-ring), inset 0 1px 0 rgba(255, 255, 255, .25); transition: filter .2s, transform .12s; }
.gate-card input[type=submit]:hover { filter: brightness(1.08); }
.gate-card input[type=submit]:active { transform: translateY(1px); }
.gate-foot { color: var(--muted); font-size: 12px; margin: 0; }

/* Badges (unread counts) ---------------------------------------------------- */
.count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--down); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
.nav a .count { margin-left: auto; }
.bell-wrap { position: relative; }
.bell { position: relative; }
.bell .count { position: absolute; top: 1px; right: 0; transform: translate(30%, -20%); }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(380px, 92vw); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; animation: pop .18s var(--ease) both; }
.np-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 10px; font-size: 13px; }
.note { display: flex; gap: 10px; padding: 10px; border-radius: 10px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.note:hover { background: var(--surface-2); color: var(--text); }
.note.unread { background: var(--accent-soft); }
.note small { display: block; color: var(--muted); margin-top: 2px; }

/* Avatars ------------------------------------------------------------------- */
.avatar.md { position: relative; width: 38px; height: 38px; font-size: 14px; flex: none; }
.avatar.everyone { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Feed layout --------------------------------------------------------------- */
.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.feed-main { min-width: 0; max-width: 760px; width: 100%; }
.feed-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.feed-side .card { padding: 16px; }
.side-list { display: flex; flex-direction: column; gap: 2px; max-height: 38vh; overflow-y: auto; margin: 0 -6px; }
.side-list a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.side-list a:hover, .side-list a.active { background: var(--surface-2); color: var(--text); }
.side-list .avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.dm-link { margin-left: auto; opacity: 0; transition: opacity .15s; font-size: 13px; }
.side-list a:hover .dm-link { opacity: 1; }
.feed-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 650; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.stat-pill.win { color: var(--up); }
.stat-pill.issue { color: var(--down); }
.feed-filters { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
.new-pill { position: sticky; top: 72px; z-index: 5; width: max-content; margin: 0 auto 12px; padding: 7px 16px; border-radius: 99px; background: var(--grad); color: #fff; font-size: 12.5px; font-weight: 650; cursor: pointer; box-shadow: 0 10px 24px -8px var(--accent-ring); }
.composer-card { padding: 16px 18px; }
.cc-head { display: flex; gap: 12px; align-items: flex-start; }
.cc-head > div { flex: 1; min-width: 0; }

/* Composer ------------------------------------------------------------------ */
.composer { display: flex; flex-direction: column; gap: 10px; }
.kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.kind-opt { margin: 0; cursor: pointer; }
.kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.kind-opt span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); transition: all .15s; }
.kind-opt:hover span { border-color: var(--accent); }
.kind-opt input:checked + span { color: #fff; border-color: transparent; }
.kind-opt.k-win input:checked + span { background: linear-gradient(135deg, #0e9466, #22c55e); }
.kind-opt.k-issue input:checked + span { background: linear-gradient(135deg, #d1364a, #f97316); }
.kind-opt.k-update input:checked + span { background: var(--grad); }
.kind-opt.k-question input:checked + span { background: linear-gradient(135deg, #0891b2, #2dd4e6); }
.kind-opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
.cbox { position: relative; }
.composer textarea { min-height: 0; resize: none; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-color: transparent; box-shadow: none; }
.composer textarea:focus { background: var(--surface); }
.composer.compact textarea { padding: 8px 12px; }
.composer .cbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.composer .tools { display: flex; align-items: center; gap: 2px; min-width: 0; }
.composer .tools .icon-btn { font-weight: 700; font-size: 15px; }
.composer .tools label.icon-btn { margin: 0; }
.composer.compact { gap: 6px; }
.composer.compact .cbar { order: 3; }
.drop .composer textarea { outline: 2px dashed var(--accent); outline-offset: 2px; }
.ac { position: absolute; left: 8px; top: calc(100% + 4px); z-index: 70; width: min(320px, 90%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; }
.ac-head { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 4px; }
.ac button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 8px; color: var(--text); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.ac button small { margin-left: auto; color: var(--muted); }
.ac button.on, .ac button:hover { background: var(--accent-soft); }
.ac .avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 4px 6px 4px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; }
.chip img { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }
.chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; font-weight: 550; }
.chip small { color: var(--muted); white-space: nowrap; }
.chip.err { border-color: var(--err-line); background: var(--err-bg); }
.chip.err small { color: var(--down); white-space: normal; }
.chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.chip button:hover { color: var(--down); }

/* Posts --------------------------------------------------------------------- */
.post { margin-bottom: 14px; padding: 18px 20px 14px; }
.post::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.post.k-win::before { background: linear-gradient(#0e9466, #22c55e); }
.post.k-issue::before { background: linear-gradient(#d1364a, #f97316); }
.post.k-issue.resolved::before { background: var(--line-strong); }
.post.k-update::before { background: var(--grad); }
.post.k-question::before { background: linear-gradient(#0891b2, #2dd4e6); }
.post-head { display: flex; align-items: center; gap: 12px; }
.who-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-meta b { font-size: 14px; }
.kind-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.kind-badge.k-win { background: var(--up-soft); color: var(--up); }
.kind-badge.k-issue { background: var(--down-soft); color: var(--down); }
.resolved .kind-badge.k-issue { background: var(--surface-3); color: var(--muted); }
.kind-badge.k-update { background: var(--accent-soft); color: var(--accent-fg); }
.kind-badge.k-question { background: var(--teal-soft); color: var(--teal); }
.post-menu { position: relative; }
.post-menu .menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 130px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-md); padding: 4px; }
.post-menu .menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: 7px; font: 500 13px var(--font); color: var(--text); cursor: pointer; }
.post-menu .menu button:hover { background: var(--surface-2); }
.post-menu .menu .danger { color: var(--down); }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.mention, .tagc { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 6px; font-weight: 600; font-size: .95em; }
.mention { background: var(--accent-soft); color: var(--accent-fg); }
.tagc { background: color-mix(in srgb, var(--c, var(--teal)) 13%, transparent); color: color-mix(in srgb, var(--c, var(--teal)) 75%, var(--text)); }
.mention:hover, .tagc:hover { filter: brightness(1.1); }
.post-body { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.gallery { display: grid; gap: 6px; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.gallery.n1 { grid-template-columns: 1fr; }
.gallery.n2 { grid-template-columns: 1fr 1fr; }
.gallery.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.gallery.n3 a:first-child { grid-row: span 2; }
.gallery.n4 { grid-template-columns: 1fr 1fr; }
.gallery a { display: block; background: var(--surface-2); overflow: hidden; }
.gallery img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.gallery.n2 img, .gallery.n3 img, .gallery.n4 img { aspect-ratio: 4 / 3; }
.gallery a:hover img { transform: scale(1.02); }
.docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.doc { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); max-width: 100%; transition: border-color .15s, background .15s; }
.doc:hover { border-color: var(--accent); color: var(--text); }
.doc .meta { display: flex; flex-direction: column; min-width: 0; }
.doc .meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.doc small { color: var(--muted); font-size: 11.5px; }
.ext { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #fff; background: #64748b; flex: none; }
.chip .ext { width: 32px; height: 32px; }
.ext.xls, .ext.xlsx, .ext.csv { background: #16a34a; }
.ext.pdf { background: #dc2626; }
.ext.doc, .ext.docx { background: #2563eb; }
.ext.ppt, .ext.pptx { background: #ea580c; }
.ext.zip { background: #7c3aed; }
.post-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.reactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rx { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: 600 12.5px var(--font); color: var(--text-2); cursor: pointer; transition: all .15s; }
.rx:hover { border-color: var(--line-strong); background: var(--surface-2); }
.rx.mine { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-fg); }
.rx-add { position: relative; }
.rx-pick { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 99px; box-shadow: var(--shadow-md); animation: pop .15s var(--ease) both; }
.rx-pick button { width: 34px; height: 34px; border: 0; background: none; border-radius: 50%; font-size: 18px; cursor: pointer; transition: transform .15s var(--ease), background .15s; }
.rx-pick button:hover { transform: scale(1.25); background: var(--surface-2); }
.comments { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.comment { display: flex; gap: 10px; align-items: flex-start; }
.comment .avatar.sm { width: 30px; height: 30px; }
.comment .bubble { min-width: 0; flex: 1; background: var(--surface-2); border-radius: 4px 14px 14px 14px; padding: 8px 12px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.c-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 12.5px; }
.c-del { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; }
.comment:hover .c-del { opacity: 1; }
.c-new { padding-left: 40px; }
.lightbox img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 10px; }

/* Chat ---------------------------------------------------------------------- */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 124px); min-height: 460px; padding: 0; overflow: hidden; }
.chat-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.chat-list-head { font-size: 15px; font-weight: 700; padding: 10px 10px 12px; letter-spacing: -.01em; }
.thread { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--text); }
.thread:hover { background: var(--surface-2); color: var(--text); }
.thread.active { background: var(--accent-soft); }
.t-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.t-main b { font-size: 13.5px; font-weight: 600; }
.t-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.t-side small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); min-height: 64px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.chat-msgs .empty { margin: auto; }
.day-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; margin-top: 8px; }
.msg.grouped { margin-top: 2px; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg .avatar.sm, .av-space { width: 30px; height: 30px; flex: none; }
.msg.mine .av-space { display: none; }
.m-body { display: flex; flex-direction: column; min-width: 0; }
.msg.mine .m-body { align-items: flex-end; }
.m-name { font-size: 11.5px; color: var(--muted); margin: 0 0 3px 4px; font-weight: 600; }
.m-bubble { position: relative; padding: 8px 12px 18px; border-radius: 16px 16px 16px 5px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; min-width: 70px; }
.msg.mine .m-bubble { border-radius: 16px 16px 5px 16px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; }
.msg.mine .m-bubble a { color: #fff; text-decoration: underline; }
.msg.mine .mention { background: rgba(255, 255, 255, .2); color: #fff; text-decoration: none; }
.msg.mine .doc { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; text-decoration: none; }
.msg.mine .doc small { color: rgba(255, 255, 255, .75); }
.msg.mine .m-bubble a.doc, .msg.mine .m-bubble a.mention, .msg.mine .m-bubble a.tagc { text-decoration: none; }
.m-bubble .gallery { margin-top: 4px; min-width: 220px; }
.m-time { position: absolute; right: 10px; bottom: 4px; font-size: 10px; opacity: .6; }
.chat-new { padding: 12px 16px 14px; border-top: 1px solid var(--line); }

@media (max-width: 1180px) {
	.feed-layout { grid-template-columns: 1fr; }
	.feed-side { position: static; flex-direction: row; flex-wrap: wrap; }
	.feed-side .card { flex: 1 1 260px; }
	.feed-main { max-width: none; }
}
@media (max-width: 760px) {
	.chat { grid-template-columns: 1fr; height: auto; }
	.chat-list { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
	.chat-msgs { height: 55vh; }
	.msg { max-width: 92%; }
	.hide-sm { display: none; }
	.c-new { padding-left: 0; }
	.kind-badge { font-size: 10.5px; padding: 2px 8px; }
}

/* Chat: channels, threads, receipts, typing ------------------------------- */
.chat.with-thread { grid-template-columns: 280px minmax(0, 1fr) 360px; }
.chat-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); animation: rise .25s var(--ease) both; }
.chat-thread .msg { max-width: 100%; }
.chat-group { font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.avatar.chan { background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface)); color: var(--c, var(--accent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 35%, transparent); font-size: 17px; }
.thread.has-unread .t-main b { font-weight: 750; }
.thread.has-unread .t-main small { color: var(--text-2); }
.msg { position: relative; }
.m-reply { position: absolute; top: -10px; right: -6px; opacity: 0; transform: translateY(2px); transition: opacity .15s, transform .15s; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: 99px; font: 600 11.5px var(--font); padding: 3px 9px; cursor: pointer; box-shadow: var(--shadow-sm); }
.msg.mine .m-reply { right: auto; left: -6px; }
.msg:hover .m-reply { opacity: 1; transform: none; }
.m-reply:hover { color: var(--accent-fg); border-color: var(--accent); }
.reply-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 3px 10px 3px 4px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: 12px var(--font); color: var(--text-2); transition: border-color .15s; }
.reply-pill:hover { border-color: var(--accent); }
.reply-pill b { color: var(--accent-fg); font-weight: 650; }
.reply-pill small { color: var(--muted); }
.reply-pill .faces { display: inline-flex; }
.reply-pill .avatar.sm { width: 20px; height: 20px; font-size: 9px; margin-right: -5px; box-shadow: 0 0 0 2px var(--surface); }
.reply-pill .avatar .online { display: none; }
.m-replies:empty, .m-seen:empty { display: none; }
.m-seen { font-size: 11px; color: var(--muted); margin-top: 3px; }
.m-seen .seen { color: var(--teal); font-weight: 600; }
.typing { min-height: 0; padding: 0 18px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.typing:not(:empty) { padding: 4px 18px 0; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Pinned posts */
.pin-badge { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.pin-badge + .kind-badge { margin-left: 6px; }
.post.pinned { box-shadow: 0 0 0 1px var(--warn-line), var(--shadow-sm); }
.pinned-head { font-size: 12px; font-weight: 700; letter-spacing: .04em; margin: 4px 2px 10px; }

/* New & lost queries, content decay */
.nl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nl-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; }
.nl-h.up { color: var(--up); }
.nl-h.down { color: var(--down); }
.decay-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; }
.decay-bars i { width: 12px; border-radius: 3px 3px 1px 1px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--down) 70%, var(--accent))); opacity: .9; }
.decay-bars i:last-child { background: var(--down); }
.why-row > td { background: var(--surface-2); white-space: normal; }
.why table { margin-top: 8px; font-size: 12.5px; }
.why th { background: transparent; position: static; }

/* Activity log */
.audit { padding: 8px 20px 18px; }
.audit-day { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 16px 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.audit-row:last-child { border-bottom: 0; }
.audit-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.audit-main { min-width: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 1180px) {
	.chat.with-thread { grid-template-columns: 240px minmax(0, 1fr) 320px; }
	.nl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
	.chat.with-thread { grid-template-columns: minmax(0, 1fr) 340px; }
	.chat.with-thread .chat-list { display: none; }
}
@media (max-width: 760px) {
	.chat.with-thread { grid-template-columns: 1fr; }
	.chat.with-thread .chat-pane { display: none; }
	.chat-thread { border-left: 0; }
	.chat-thread .chat-msgs { height: 55vh; }
	.m-reply { opacity: 1; position: static; transform: none; margin-top: 4px; align-self: flex-end; }
}

/* SOPs ---------------------------------------------------------------------- */
.sop-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sop-card { display: flex; flex-direction: column; gap: 8px; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.sop-card:hover { color: var(--text); transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md), var(--highlight); }
.sop-card h2 { margin: 2px 0 0; font-size: 16px; line-height: 1.35; }
.sop-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sop-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--line); }
.sop-icon.lg { width: 56px; height: 56px; font-size: 28px; border-radius: 16px; flex: none; }
.sop-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sop-crumb { margin: -8px 0 14px; font-size: 13px; }
.sop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.sop-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.sop-side .card { padding: 16px; }
.toc { display: flex; flex-direction: column; gap: 1px; max-height: 60vh; overflow-y: auto; }
.toc a { padding: 5px 8px; border-radius: 7px; color: var(--text-2); font-size: 13px; }
.toc a:hover { background: var(--surface-2); color: var(--text); }
.sop-doc { padding: 30px 36px 36px; }
.sop-head { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.sop-head h1 { margin: 8px 0 6px; font-size: 26px; }
.sop-head .lead { margin: 0 0 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 72ch; }
.sop-body { font-size: 14.5px; line-height: 1.7; color: var(--text); max-width: 80ch; }
.sop-body h2 { font-size: 19px; margin: 32px 0 10px; padding-top: 6px; letter-spacing: -.015em; scroll-margin-top: 80px; }
.sop-body h3 { font-size: 15px; margin: 20px 0 8px; scroll-margin-top: 80px; }
.sop-body h3::before { display: none; }
.sop-body p { margin: 0 0 12px; }
.sop-body ul { margin: 0 0 14px; padding-left: 22px; }
.sop-body li { margin: 4px 0; }
.sop-body hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.sop-body code { font-size: 12.5px; }
.sop-body strong { font-weight: 650; }
.sop-body ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 16px; }
.sop-body ol.steps > li { counter-increment: step; position: relative; padding: 2px 0 10px 42px; margin: 0; }
.sop-body ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 4px 10px -4px var(--accent-ring); }
.sop-body ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--line-strong); }
.callout { display: flex; gap: 10px; padding: 12px 16px; border-radius: 12px; margin: 4px 0 16px; border: 1px solid var(--info-line); background: var(--info-bg); color: var(--text); font-size: 13.5px; line-height: 1.6; }
.callout .ci { flex: none; }
.callout.co-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.callout.co-tip { border-color: color-mix(in srgb, var(--up) 30%, transparent); background: var(--up-soft); }
.prompt { margin: 6px 0 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box; overflow: hidden; }
.prompt-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 14px; background: var(--accent-soft); font-size: 12px; font-weight: 650; color: var(--accent-fg); }
.prompt pre, .codeblock pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font: 13px/1.6 var(--mono); color: var(--text); }
.prompt .ph { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-fg); border-radius: 4px; padding: 0 2px; }
.codeblock { position: relative; margin: 6px 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.codeblock [data-copy] { position: absolute; top: 6px; right: 6px; }
[data-copy].done { color: var(--up); border-color: var(--up); }
.checklist { list-style: none; padding: 0 !important; }
.checklist li { margin: 0 0 6px; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); font-weight: 450; cursor: pointer; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: background .15s, border-color .15s; }
.checklist label:hover { border-color: var(--line-strong); }
.checklist input { margin-top: 4px; width: 16px; height: 16px; }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; }
.sop-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sop-editor textarea { min-height: 62vh; font: 13px/1.6 var(--mono); padding: 12px 14px; }
.sop-editor .preview { max-height: 70vh; overflow-y: auto; padding-right: 6px; }
.ed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ed-help { margin: 0; text-align: right; }
.ed-help > div { text-align: left; margin-top: 8px; line-height: 1.9; }
@media (max-width: 1180px) {
	.sop-layout { grid-template-columns: 1fr; }
	.sop-side { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
	.sop-side .card { flex: 1 1 260px; }
	.sop-editor { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.sop-doc { padding: 20px 18px; }
	.sop-side { order: 1; }
	.sop-head { flex-direction: column; }
	.sop-editor .form-grid { grid-template-columns: 1fr !important; }
}
@media print {
	.sidebar, .topbar, .sop-side, .sop-crumb, .toast, [data-copy] { display: none !important; }
	.app { display: block; }
	.main { padding: 0; max-width: none; }
	.sop-layout { display: block; }
	.card { box-shadow: none; border: 0; }
	body { background: #fff; }
}

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

/* Responsive --------------------------------------------------------------- */
@media (max-width: 900px) {
	.app { grid-template-columns: 1fr; }
	.sidebar { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
	.brandmark { margin: 0 8px 0 0; padding: 0; }
	.brandmark::after, .brandmark .product, .nav-label, .brand-list { display: none; }
	.nav { flex-direction: row; }
	.nav a { white-space: nowrap; }
	.nav a.active::before { display: none; }
	.topbar { position: static; padding: 0 16px; }
	.user-name { display: none; }
	.main { padding: 22px 16px 56px; }
	h1 { font-size: 22px; }
	.brand-card .row { grid-template-columns: repeat(2, 1fr); }
	.kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
	.kpi { padding: 16px; }
	.kpi .value { font-size: 23px; }
	.card { padding: 16px; }
}

/* Ranking requests (admin approval) ------------------------------------- */
.req-banner { justify-content: space-between; align-items: flex-start; }
.req-banner::before { margin-top: 5px; }
.req-banner > div { flex: 1; min-width: 0; }
.req-banner ul { margin: 6px 0 0 24px; padding: 0; }
.req-banner li { margin: 2px 0; }
.req-banner .btn { flex: none; }
.approval-hint { padding: 9px 12px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-line); }
.req-card { padding: 0; overflow: hidden; }
.req-card > .empty { padding: 22px; }
.req-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 210px; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.req-row:last-child { border-bottom: 0; }
.req-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.req-what { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; }
.req-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 12.5px; color: var(--text-2); }
.req-brand .dot { width: 8px; height: 8px; border-radius: 50%; }
.req-kws summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.req-kws .req-list { margin-top: 8px; max-height: 180px; overflow: auto; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.req-edit { margin-top: 8px; width: 100%; font-size: 12.5px; }
.req-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.req-side .actions { justify-content: flex-end; margin-top: 4px; }
.req-status { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; background: var(--surface-3); color: var(--muted); }
.req-status.queued { background: var(--warn-bg); color: var(--warn-fg); }
.req-status.ok { background: var(--up-soft); color: var(--up); }
.req-status.bad { background: var(--down-soft); color: var(--down); }
@media (max-width: 860px) {
	.req-row { grid-template-columns: 1fr; gap: 10px; }
	.req-side { align-items: flex-start; text-align: left; }
	.req-side .actions { justify-content: flex-start; }
}

/* Search Console: monthly by account ------------------------------------ */
.gsc-tabs { margin-right: 4px; }
.mo-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.mo-step { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.mo-step select { width: auto; border: 0; background: transparent; font-weight: 650; font-size: 14px; padding: 6px 8px; box-shadow: none; }
.mo-step .icon-btn { font-size: 18px; line-height: 1; }
.mo-step .icon-btn:disabled { opacity: .35; cursor: default; }

.mo-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.mo-summary.solo { grid-template-columns: minmax(0, 1fr); }
.mo-sum { display: flex; flex-direction: column; gap: 14px; }
.mo-sum-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mo-sum-head h3 { margin: 0; }
.mo-sum-grid { display: grid; grid-template-columns: max-content repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 10px; align-items: baseline; }
.mo-sum-col { font-size: 12.5px; font-weight: 650; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.mo-sum-row { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.mo-sum-cell { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mo-sum-cell > span { font-size: 12.5px; color: var(--muted); width: 100%; }
.mo-sum-cell b { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mo-moves { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.mo-moves div { display: flex; flex-direction: column; }
.mo-moves b { font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mo-moves span { font-size: 12px; color: var(--muted); }
.mo-sum-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .mo-summary { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .mo-sum-grid { column-gap: 10px; } .mo-sum-row { font-size: 11.5px; } }

.mo-wrap { max-height: calc(100vh - 140px); }
.mo-table th, .mo-table td { padding: 10px 10px; }
.mo-table .mo-sub th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.mo-table th[data-mo-sort="ai"] { min-width: 78px; }
.mo-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.mo-table .mo-grp th { text-align: center; color: var(--text-2); font-size: 12.5px; border-bottom-color: var(--line); cursor: default; }
.mo-table .mo-grp th[data-mo-sort] { cursor: pointer; }
.mo-table .mo-sub th { top: 38px; }
.mo-table th.g, .mo-table td.g { border-left: 1px solid var(--line); }
.mo-table .mo-acct { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; min-width: 180px; max-width: 240px; }
.mo-table thead .mo-acct { z-index: 3; vertical-align: bottom; }
.mo-table tbody tr:hover .mo-acct { background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
.mo-table td.mo-acct a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.mo-table td.mo-acct a:hover { color: var(--accent-fg); }
.mo-table td.mo-acct .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mo-table td.mo-acct .small { font-weight: 400; margin-left: 16px; overflow: hidden; text-overflow: ellipsis; }
.mo-table td.mo { vertical-align: top; }
.mo-table td.mo > b { display: block; font-size: 14px; font-weight: 650; color: var(--text); }
.mo-d { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; }
.mo-table td.mo-move b { font-weight: 650; }
.mo-table td.mo-move .delta { font-size: 13px; }
.mo-gap { color: var(--muted); font-size: 12.5px; text-align: center; background: var(--surface-2); }
.mo-gap a { font-weight: 600; }
.mo-wait { display: inline-block; width: 46px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: mo-shimmer 1.2s linear infinite; }
@keyframes mo-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mo-wait { animation: none; } }
.mo-share { display: block; margin: 6px 0 0 auto; width: 54px; height: 4px; border-radius: 3px; background: var(--teal-soft); overflow: hidden; }
.mo-share i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.mo-trend { min-width: 132px; }
.mo-bars { width: 120px; height: 30px; display: block; }
.mo-bars rect { fill: var(--line-strong); transition: fill .12s; }
.mo-bars rect.zero { opacity: .5; }
.mo-bars rect.on { fill: var(--accent); }
.mo-bars rect:hover { fill: var(--teal); }

.mo-bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mo-band { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; }
.mo-band > span:first-child { font-size: 12px; line-height: 1.25; color: var(--muted); font-weight: 550; }
.mo-band b { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mo-band:first-child b { color: var(--accent-fg); }
.mo-d.neutral { color: var(--muted); }
.mo-basis { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.mo-table td.mo-ai > b { color: var(--accent-fg); }
@media (max-width: 560px) { .mo-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Client reports -------------------------------------------------------- */
.tone-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tone-seg .seg-opt small { line-height: 1.4; margin-top: 2px; }
.tone-chip { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; background: var(--surface-3); color: var(--text-2); }
.tone-chip.positive { background: var(--up-soft); color: var(--up); }
.rb { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.rb-side { display: flex; flex-direction: column; gap: 14px; }
.rb-side .card h3 { margin-top: 0; }
.rb-side .tone-seg { grid-template-columns: 1fr; }
.rb-switch { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.rb-switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.rb-link { display: flex; gap: 6px; margin-top: 12px; }
.rb-link input { flex: 1; min-width: 0; font-size: 12.5px; }
.rb-secs { display: flex; flex-direction: column; gap: 8px; }
.rb-secs .check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin: 0; }
.rb-secs .check.off { color: var(--muted); }
.rb-preview { position: sticky; top: 76px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.rb-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.rb-preview iframe { display: block; width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 0; background: #eef0f4; }
@media (max-width: 1100px) { .rb { grid-template-columns: 1fr; } .rb-preview { position: static; } }
/* Ranking-win screenshots in the report editor */
.shot-drop { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; padding: 18px 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.shot-drop b { font-size: 13.5px; }
.shot-drop span { font-size: 12px; color: var(--muted); }
.shot-drop:hover, .shot-drop:focus-visible, .shot-drop.over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.shot-drop.busy { pointer-events: none; opacity: .75; }
.shot-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.shot-item { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.shot-thumb { flex: none; width: 92px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--line); }
.shot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.shot-cap { width: 100%; font-size: 12.5px; }
.shot-acts { display: flex; gap: 6px; }


/* Tools section (Bot View, AI Crawler Access) -------------------------------- */
.tool-tagline { font-weight: 600; font-size: 13px; color: var(--text-2); }
.tl-form { margin-bottom: 18px; }
.tl-row { display: flex; gap: 10px; }
.tl-row input { flex: 1; min-width: 0; }
.tl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tl-sec-head h3 { margin: 0; }
.mono { font-family: var(--mono); }

/* Status pills */
.tl-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.tl-pill.ok { background: var(--up-soft); color: var(--up); }
.tl-pill.bad { background: var(--down-soft); color: var(--down); }
.tl-pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.tl-pill.lg { font-size: 15px; padding: 4px 14px; }

/* Progress */
.tl-progress { margin-bottom: 16px; }
.tl-pbar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-bottom: 12px; }
.tl-pbar i { display: block; height: 100%; background: var(--grad); transition: width .3s var(--ease); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 550; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }
.tl-chip.run { color: var(--accent-fg); border-color: var(--accent-ring); background: var(--accent-soft); }
.tl-chip.done { color: var(--up); background: var(--up-soft); border-color: transparent; }
.tl-chip.fail { color: var(--down); background: var(--down-soft); border-color: transparent; }

/* Findings */
.tl-findings { display: flex; flex-direction: column; gap: 10px; }
.tl-finding { --c: var(--muted); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--radius-sm); padding: 11px 14px; background: var(--surface); }
.tl-finding.sev-high { --c: var(--down); background: var(--err-bg); border-color: var(--err-line); border-left-color: var(--down); }
.tl-finding.sev-med { --c: #d98a00; background: var(--warn-bg); border-color: var(--warn-line); border-left-color: #d98a00; }
.tl-finding.sev-info { --c: var(--teal); }
.tl-finding.sev-ok { --c: var(--up); background: var(--up-soft); border-color: transparent; border-left-color: var(--up); }
.tl-fhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-fhead b { font-size: 13.5px; flex: 1; min-width: 180px; }
.tl-sev { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.tl-level { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); }
.tl-level.lv-confirmed { background: var(--info-bg); color: var(--info-fg); }
.tl-level.lv-likely { background: var(--warn-bg); color: var(--warn-fg); }
.tl-fbody { margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.tl-fbots { margin-top: 8px; }

/* Tables */
.tl-table th { text-align: left; white-space: nowrap; }
.tl-table td { vertical-align: top; }
.tl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tl-table tr.clickable { cursor: pointer; }
.tl-table tr.clickable:hover td { background: var(--row-hover); }
.tl-table tr.sel td { background: var(--accent-soft); }
.tl-table tr.tl-group td { background: var(--surface-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 7px; padding-bottom: 7px; }
.tl-cmp th { font-weight: 600; color: var(--text-2); width: 190px; }
.tl-cmp td { word-break: break-word; max-width: 360px; font-size: 13px; }
.tl-cmp tr.diff td, .tl-cmp tr.diff th { background: var(--warn-bg); }
.tl-diffline { margin-top: 12px; font-size: 12.5px; line-height: 1.7; }
.tl-textcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tl-text { margin: 0; padding: 12px 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12px/1.6 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-2); }
.tl-text.tl-out { max-height: 340px; color: var(--text); margin-bottom: 12px; }
@media (max-width: 800px) { .tl-textcols { grid-template-columns: 1fr; } .tl-row { flex-direction: column; } }

/* robots.txt viewer */
.rb-view { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); max-height: 420px; overflow: auto; font: 12px/1.65 var(--mono); padding: 6px 0; }
.rb-line { display: flex; gap: 12px; padding: 0 12px; }
.rb-line.hit { background: var(--down-soft); box-shadow: inset 3px 0 0 var(--down); }
.rb-n { flex: none; width: 34px; text-align: right; color: var(--muted); opacity: .7; user-select: none; }
.rb-t { white-space: pre-wrap; word-break: break-all; color: var(--text); }
.tl-warns { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--warn-fg); }

/* Notes, generator */
.tl-limits ul { margin: 12px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.tl-limits li { margin-bottom: 6px; }
.tl-presets { margin-bottom: 6px; }
.tl-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; margin-top: 6px; }
.tl-check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 3px 0; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.tl-table td { white-space: normal; }
.tl-table td:first-child { white-space: nowrap; }
.tl-table th { cursor: default; }
.tl-cmp th { text-transform: none; letter-spacing: 0; font-size: 12.5px; background: var(--surface-2); }
.tl-cmp thead th { background: var(--surface); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; }

/* Tools section ------------------------------------------------------------
 * Hub, Bot View and AI Crawler Access. Prefix: tl-. Uses the theme tokens, so
 * light and dark modes work without extra rules.
 */
.tl-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.tl-card { display: flex; flex-direction: column; gap: 8px; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.tl-card:hover { color: var(--text); transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md), var(--highlight); }
.tl-card h2 { margin: 2px 0 0; font-size: 17px; }
.tl-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.tl-card p.tl-tag { color: var(--text-2); font-weight: 600; font-size: 13.5px; }
.tl-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--grad-soft); color: var(--accent-fg); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.tl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-open { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; color: var(--accent-fg); }
.tl-foot { max-width: 720px; margin-top: 18px; }

.tl-form { margin-bottom: 18px; }
.tl-url { display: flex; gap: 10px; }
.tl-url input { height: 42px; font-size: 14px; flex: 1 1 auto; min-width: 0; }
.tl-url .btn { height: 42px; padding: 0 22px; flex: none; }
.tl-bots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-top: 14px; }
.tl-bots-h { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; margin-bottom: 8px; }
.tl-check { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.tl-check small { color: var(--muted); font-size: 11.5px; }

/* progress */
.tl-prog { margin-bottom: 18px; }
.tl-prog-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-step { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 550; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.tl-step.run { color: var(--text); border-color: var(--accent-ring); background: var(--accent-soft); }
.tl-step.done { color: var(--up); }
.tl-step.err { color: var(--down); }
.tl-spin { width: 12px; height: 12px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: tl-rot .7s linear infinite; }
@keyframes tl-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tl-spin { animation: none; } }

/* status pills */
.tl-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; line-height: 1.5; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.tl-pill.ok { background: var(--up-soft); color: var(--up); }
.tl-pill.bad { background: var(--down-soft); color: var(--down); }
.tl-pill.warn { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.tl-pill.info { background: var(--info-bg); color: var(--info-fg); box-shadow: inset 0 0 0 1px var(--info-line); }
.tl-pill.muted { background: var(--surface-3); color: var(--muted); }
.tl-bad { color: var(--down); }
.kpi .value .tl-pill { font-size: 15px; padding: 3px 12px; }
.kpi .sub .tl-pill { font-size: 11px; }

/* sections + findings */
.tl-section { margin-top: 16px; }
.tl-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tl-sec-h h2 { margin: 0; font-size: 16px; }
.tl-fgroup + .tl-fgroup { margin-top: 20px; }
.tl-fgroup > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tl-conf { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.tl-conf.confirmed { background: var(--grad); color: #fff; }
.tl-conf.likely { background: var(--warn-bg); color: var(--warn-fg); border: 1px dashed var(--warn-line); }
.tl-conf.info { background: var(--surface-3); color: var(--text-2); }
.tl-fnd { list-style: none; margin: 0; padding: 0; }
.tl-fnd li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tl-fnd li:first-child { border-top: 0; }
.tl-fnd b { font-size: 13.5px; }
.tl-fnd p { margin: 3px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.tl-sev { align-self: start; text-align: center; padding: 2px 0; border-radius: 7px; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--muted); }
.tl-sev.high { background: var(--down-soft); color: var(--down); }
.tl-sev.med { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.tl-sev.low { background: var(--info-bg); color: var(--info-fg); }
.tl-sev.ok { background: var(--up-soft); color: var(--up); }
.tl-fbots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* bot table */
.tl-table th { cursor: default; }
.tl-table td { vertical-align: top; }
.tl-table td.res { white-space: normal; min-width: 230px; max-width: 340px; }
.tl-table td.res .muted { margin-top: 3px; line-height: 1.4; }
.tl-ref td { background: var(--surface-2); }
.tl-detail > td { white-space: normal; background: var(--surface-2); padding: 18px 20px; }
.tl-detail:hover { background: transparent; }
.tl-bd { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
.tl-bd h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }
.tl-bd > div > h4:not(:first-child) { margin-top: 18px; }
.tl-text { margin: 0 0 6px; max-height: 230px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; color: var(--text-2); }
.tl-heads, .tl-miss, .tl-warns { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.tl-heads li, .tl-miss li, .tl-warns li { padding: 3px 0; overflow-wrap: anywhere; }
.tl-miss li { color: var(--down); }
.tl-kv { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.tl-kv:last-child { border-bottom: 0; }
.tl-kv span { color: var(--muted); }
.tl-kv b { font-weight: 550; overflow-wrap: anywhere; }
@media (max-width: 980px) { .tl-bd { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* limits + robots viewer + generator */
.tl-limits { margin-top: 16px; }
.tl-limits > summary, .tl-sum { cursor: pointer; font-weight: 650; font-size: 13.5px; list-style: none; }
.tl-limits > summary::-webkit-details-marker, .tl-sum::-webkit-details-marker { display: none; }
.tl-limits-body { margin-top: 12px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.tl-limits-body p { margin: 0 0 8px; }
.tl-robots { margin: 12px 0 6px; max-height: 380px; overflow: auto; font: 12px/1.6 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 0; }
.tl-robots .rl { display: block; padding: 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-robots .rl i { display: inline-block; width: 3.2em; color: var(--muted); font-style: normal; user-select: none; }
.tl-robots .rl.hit { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); }
.tl-warns { margin-top: 12px; }
.tl-snippet { margin: 0 0 12px; padding: 14px; font: 12.5px/1.6 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 760px) {
	.tl-url { flex-direction: column; }
	.tl-url .btn { width: 100%; }
	.tl-fnd li { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
}

/* "Draft with AI" on text boxes (tools.js → aiDraft) */
.ai-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 2px 9px; border: 1px solid var(--accent-ring); border-radius: 99px; background: var(--accent-soft); color: var(--accent-fg); font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.6; vertical-align: 1px; cursor: pointer; transition: background .15s, border-color .15s; }
.ai-btn:hover { border-color: var(--accent-fg); }
.ai-btn:disabled { opacity: .55; cursor: progress; }
.ai-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.ai-row { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; }
.ai-row input { flex: 1; min-width: 0; }
.ai-row[hidden] { display: none; }
textarea.ai-busy { opacity: .6; }
@media (max-width: 560px) { .ai-row { flex-wrap: wrap; } .ai-row input { flex-basis: 100%; } }

/* Content Outline Generator (tool-outline.js) ------------------------------------ */
.ol-new textarea { font-size: 14px; line-height: 1.6; }
.ol-row { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 18px; align-items: start; }
.ol-row #ol-words { max-width: 160px; }
.ol-opts { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface-2); }
.ol-opts summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ol-opts[open] summary { margin-bottom: 12px; }
.ol-opts .form-grid { margin: 0; }
.ol-head { align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ol-head h1 { margin-top: 4px; }
.ol-info dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 24px; }
.ol-info dt { color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.ol-info dd { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ol-table th:nth-child(3) { width: 34%; }
.ol-table td { line-height: 1.5; }
.ol-lvl { display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--muted); font: 700 11px/1.5 var(--mono); text-align: center; }
.ol-table .lv-h1 td { background: var(--accent-soft); }
.ol-table .lv-h1 .ol-lvl, .ol-table .lv-h2 .ol-lvl { background: var(--accent-soft); color: var(--accent-fg); }
.ol-table .lv-h1 .ol-hd { font-weight: 700; font-size: 14.5px; }
.ol-table .lv-h2 .ol-hd { font-weight: 650; }
.ol-table .lv-h3 .ol-hd { padding-left: 26px; }
.ol-table .lv-h4 .ol-hd { padding-left: 44px; color: var(--text-2); }
.ol-table .lv-h5 .ol-hd, .ol-table .lv-h6 .ol-hd { padding-left: 60px; color: var(--muted); }
.ol-ptitle { font-weight: 600; line-height: 1.35; }
.ol-url { display: block; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .ol-row { grid-template-columns: 1fr; } .ol-opts { margin-top: 0; } }

/* Sitemap Status Audit (tool-sitemap.js) ----------------------------------------- */
.sm-start { margin-bottom: 16px; }
.sm-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: 12.5px; }
.sm-settings label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); }
.sm-settings select { width: auto; padding-top: 4px; padding-bottom: 4px; font-size: 12.5px; }
.sm-status { margin-bottom: 16px; }
.sm-status-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-status-top h3 { margin: 0 0 2px; }
.sm-status-top .actions { margin: 0; }
.sm-status .tl-pbar { margin: 14px 0 0; }
.sm-health { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sm-score { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; border: 4px solid currentColor; flex: none; }
.sm-score b { font-size: 21px; line-height: 1; color: var(--text); }
.sm-score span { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.sm-score.good { color: var(--up); } .sm-score.fair { color: var(--warn); } .sm-score.poor { color: var(--down); }
.sm-mixwrap { flex: 1; min-width: 0; }
.sm-mix { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; margin-bottom: 8px; background: var(--surface-3); }
.sm-mix i { min-width: 3px; }
.m-ok { background: var(--up); } .m-redirect { background: var(--warn); } .m-c4 { background: var(--down); } .m-c5 { background: #9b1d2e; } .m-failed { background: var(--muted); }
.sm-results { padding-top: 14px; }
.sm-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; transition: border-color .15s, background .15s; }
.sm-tab b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sm-tab:hover { border-color: var(--line-strong); }
.sm-tab.on { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent-fg); }
.sm-tab.on b { color: var(--accent-fg); }
.sm-tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.sm-tab.t-ok::before { background: var(--up); } .sm-tab.t-redirect::before { background: var(--warn); }
.sm-tab.t-c4::before, .sm-tab.t-c5::before, .sm-tab.t-noindex::before { background: var(--down); }
.sm-tab.t-all::before { display: none; }
.sm-tab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.sm-search { width: 220px; max-width: 100%; }
.sm-notes { margin: 0 0 12px; padding: 9px 13px; border: 1px solid var(--warn-line); border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-fg); font-size: 13px; }
.sm-notes summary { cursor: pointer; font-weight: 600; }
.sm-notes ul { margin: 8px 0 2px; padding-left: 18px; line-height: 1.55; }
.sm-table td { vertical-align: top; }
.sm-table td.sm-u { max-width: 560px; overflow-wrap: anywhere; font-size: 12.5px; }
.sm-table td.sm-u a { color: var(--text); text-decoration: none; }
.sm-table td.sm-u a:hover { color: var(--accent-fg); text-decoration: underline; }
.sm-to { margin-top: 3px; color: var(--muted); font-size: 12px; }
.sm-err { margin-top: 3px; color: var(--down); font-size: 12px; }
.sm-table .nowrap { white-space: nowrap; }
.sm-table tr.pending td { opacity: .55; }
.sm-code { display: inline-block; min-width: 38px; padding: 1px 7px; border-radius: 6px; font: 700 12px/1.6 var(--mono); text-align: center; }
.sm-code.c-ok { background: var(--up-soft); color: var(--up); }
.sm-code.c-warn { background: var(--warn-bg); color: var(--warn-fg); }
.sm-code.c-bad { background: var(--down-soft); color: var(--down); }
.sm-table .tl-pill { margin: 1px 0; font-weight: 600; }
.sm-more { display: flex; justify-content: center; margin-top: 12px; }
.sm-empty { margin: 4px 0 0; }
@media (max-width: 640px) { .sm-health { flex-direction: column; align-items: flex-start; } .sm-search { width: 100%; } }

/* Meta Title & Description Writer (tool-meta.js) --------------------------------- */
.mw-table td { vertical-align: top; }
.mw-table th:nth-child(2) { width: 30%; }
.mw-table th:nth-child(3) { width: 26%; }
.mw-page { font-size: 12.5px; line-height: 1.45; }
.mw-page .tl-pill { margin: 4px 0 2px; }
.mw-url { display: block; font-weight: 600; color: var(--text); overflow-wrap: anywhere; text-decoration: none; }
.mw-url:hover { color: var(--accent-fg); text-decoration: underline; }
.mw-cur { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.mw-cur b { color: var(--text-2); font-weight: 600; }
.mw-in { width: 100%; min-width: 180px; resize: vertical; font-size: 13px; line-height: 1.45; padding: 7px 9px; }
.mw-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.mw-count { font: 600 11.5px/1.4 var(--mono); color: var(--up); }
.mw-count.near { color: var(--warn-fg); }
.mw-count.over { color: var(--down); }
.mw-act { width: 1%; white-space: nowrap; }
.mw-act .btn { gap: 5px; }
.mw-table tr.mw-err td { background: var(--err-bg); }

/* Report editor: your sections */
.rp-manual textarea { min-height: 0; }
.rw-head, .rw-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px 28px; gap: 6px; align-items: center; }
.rw-head { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.rw-row { margin-bottom: 6px; }
.rw-row input { padding: 6px 8px; font-size: 13px; min-width: 0; }
.rw-row .icon-btn { width: 28px; height: 28px; }

/* Refined workspace ------------------------------------------------------- */
body { background: var(--bg); }
h1 { font-size: 28px; font-weight: 650; letter-spacing: -.035em; }
h2 { font-weight: 650; }
h3::before { display: none; }
a, button, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -70px; padding: 12px 18px; border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); }
.skip-link:focus { top: 12px; }
.main:focus { outline: none; }
.app { grid-template-columns: 242px minmax(0, 1fr); }
.sidebar { padding: 26px 16px 18px; background: #171c2c; border-right: 0; color: #eef1f8; backdrop-filter: none; -webkit-backdrop-filter: none; scrollbar-color: #404962 transparent; }
.brandmark { gap: 7px; padding: 2px 12px 26px; margin-bottom: 9px; color: #eef1f8; }
.brandmark:hover { color: #fff; }
.brandmark::after { left: 12px; right: 12px; background: #333b53; }
.brandmark .logo { width: 80px; height: 30px; }
.brandmark .product { color: #eef1f8; background: none; font-size: 14px; line-height: 1.4; font-weight: 550; letter-spacing: -.02em; text-transform: none; }
.brand-caption { font-size: 10.5px; color: #a2acc3; letter-spacing: .015em; }
.sidebar .nav-label { padding: 16px 12px 9px; color: #a2acc3; font-size: 9px; font-weight: 600; letter-spacing: .15em; opacity: 1; }
.sidebar .nav { gap: 3px; }
.sidebar .nav a, .sidebar .brand-list a { gap: 10px; min-height: 38px; padding: 9px 12px; border-radius: 7px; color: #c5cce0; font-size: 12px; font-weight: 450; }
.sidebar .nav a .icon { width: 16px; height: 16px; color: #a2acc3; }
.sidebar .nav a:hover, .sidebar .brand-list a:hover { background: #272e45; color: #fff; }
.sidebar .nav a:hover .icon { color: #edf0f9; }
.sidebar .nav a.active, .sidebar .brand-list a.active { background: #e8defc; color: #401681; font-weight: 650; }
.sidebar .nav a.active .icon { color: #5c05d9; }
.sidebar .nav a.active::before, .sidebar .brand-list a.active::before { display: none; }
.sidebar .brand-list .dot { box-shadow: none; }
.sidebar .count { background: #b6e8f0; color: #143c4b; box-shadow: none; }
.sidebar-foot { display: flex; align-items: center; gap: 10px; padding: 18px 10px 0; margin-top: auto; }
.sidebar-foot > div { display: grid; gap: 2px; }
.sidebar-foot strong { font-size: 11px; font-weight: 550; color: #e4e9f6; }
.sidebar-foot span:not(.sidebar-monogram) { font-size: 9px; color: #a2acc3; }
.sidebar-monogram { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #515c78; border-radius: 7px; font-size: 15px; font-weight: 650; color: #e8defc; }
.topbar { height: 68px; padding: 0 38px; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.crumbs { flex: 1; font-size: 11.5px; }
.topbar-actions { gap: 10px; }
.topbar .icon-btn { color: var(--text-2); }
.user-chip { border: 0; background: transparent; padding-right: 0; box-shadow: none; font-size: 11.5px; }
.avatar { background: #eee8fb; color: #5c3693; box-shadow: none; font-size: 11px; width: 29px; height: 29px; border: 1px solid #dacff1; }
.main { max-width: 1580px; padding: 34px 38px 72px; margin-inline: auto; }
.main > * { animation-duration: .25s; }
.page-head { margin-bottom: 26px; }
.page-head p { font-size: 13px; line-height: 1.7; max-width: 780px; }
.card { border-radius: 13px; padding: 22px; box-shadow: var(--shadow-sm); }
.kpi { padding: 22px; }
.kpi .value { letter-spacing: -.045em; }
.btn, button.btn { min-height: 38px; height: auto; padding-block: 9px; background: #5c05d9; color: #fff; border: 1px solid #5c05d9; border-radius: 7px; box-shadow: 0 2px 2px rgba(40, 20, 80, .05); font-size: 12px; font-weight: 550; }
.btn:hover { background: #4904ae; border-color: #4904ae; filter: none; box-shadow: 0 3px 8px rgba(40, 20, 80, .1); }
.btn.ghost { background: var(--surface); color: var(--text-2); border-color: var(--line-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.btn.danger { background: var(--surface); color: var(--down); border-color: var(--err-line); }
.btn.sm { min-height: 30px; padding-block: 5px; font-size: 11.5px; }
.icon-btn { border-radius: 7px; }
input, select, textarea { min-height: 40px; border-radius: 7px; box-shadow: none; font-size: 12.5px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; }
label { font-size: 12px; font-weight: 550; }
.hint { line-height: 1.6; font-size: 11.5px; }
.seg-opt span { border-radius: 8px; }
.seg-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.seg.compact { border-radius: 8px; background: var(--surface-3); }
.seg.compact .seg-opt span { border-radius: 5px; }
.table-wrap { border-radius: 9px; }
th { background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .045em; }
td { padding-top: 14px; padding-bottom: 14px; }
.tl-pill { font-size: 10.5px; font-weight: 550; border-radius: 5px; padding: 3px 7px; }
.notice { border-radius: 9px; line-height: 1.7; }
.notice::before { width: 5px; height: 5px; box-shadow: none; }
.tl-ic { background: var(--accent-soft); border-radius: 9px; box-shadow: none; }
.tl-card { gap: 12px; padding: 24px; }
.tl-card:hover { transform: translateY(-2px); border-color: var(--accent-ring); }
.tl-card h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.tl-card p { font-size: 12px; line-height: 1.75; }
.gate { background: var(--bg); }
.gate::before, .gate::after { display: none; }
.gate-card { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.gate-submit { background: #5c05d9; box-shadow: none; border-radius: 7px; }
.shell-menu, .shell-menu-close, .sidebar-backdrop { display: none; }

/* Topic research: context first, evidence close to the decision. */
.tr-hero { display: flex; align-items: center; justify-content: space-between; gap: 38px; margin: 2px 0 30px; padding: 0 0 25px; border-bottom: 1px solid var(--line); }
.tr-hero-main { min-width: 0; max-width: 720px; }
.tr-eyebrow { display: block; margin-bottom: 12px; color: var(--accent-fg); font-size: 9px; line-height: 1.5; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.tr-hero h1 { font-size: clamp(28px, 2.5vw, 37px); line-height: 1.16; font-weight: 550; letter-spacing: -.045em; margin-bottom: 13px; max-width: 600px; text-wrap: balance; }
.tr-hero-copy { color: var(--muted); font-size: 12.5px; line-height: 1.85; max-width: 590px; margin: 0; }
.tr-hero-aside { flex: 0 0 185px; display: flex; flex-direction: column; align-items: center; color: var(--muted); }
.tr-hero-aside p { font-size: 10px; text-align: center; margin: 2px 0 0; line-height: 1.5; max-width: 170px; }
.tr-orbit { width: 160px; height: 132px; color: var(--accent-fg); }
.tr-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; margin-bottom: 26px; }
.tr-input-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 24px; box-shadow: var(--shadow-sm); }
.tr-input-card .tl-form.card { border: 0; border-radius: 0; padding: 0; margin-bottom: 0; box-shadow: none; background: transparent; }
.tr-mode { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; margin-bottom: 25px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.tr-mode-option { margin: 0; position: relative; min-width: 0; cursor: pointer; }
.tr-mode-option input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.tr-mode-option > span { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; border-radius: 6px; border: 1px solid transparent; color: var(--muted); transition: background .15s, border-color .15s; }
.tr-mode-option b { font-size: 12px; font-weight: 600; }
.tr-mode-option small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.tr-mode-option input:checked + span { border-color: var(--line); color: var(--accent-fg); background: var(--surface); box-shadow: var(--shadow-sm); }
.tr-mode-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-form-pane .field { margin-bottom: 20px; }
.tr-form-pane .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.tr-form-pane .seg:not(.compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tr-form-pane .seg-opt span { padding: 12px 13px; height: 100%; min-height: 70px; }
.tr-form-pane .seg-opt b { font-size: 11.5px; }
.tr-form-pane .seg-opt small { font-size: 10px; line-height: 1.5; }
.tr-form-pane .seg-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.tr-form-pane input:not([type="checkbox"]):not([type="radio"]), .tr-form-pane select { height: 42px; }
.tr-form-pane textarea { min-height: 104px; font-size: 12.5px; }
.tr-form-pane #tp-domain { font-size: 14px; font-weight: 450; }
.tr-form-pane .ol-opts { padding: 12px 14px; margin-top: 4px; border-radius: 7px; background: var(--surface-2); }
.tr-form-pane .ol-opts summary { font-size: 11.5px; }
.tr-form-pane .ol-opts .field:last-child { margin-bottom: 0; }
.tr-form-pane .actions { padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--line); gap: 12px; }
.tr-form-pane .actions .btn { min-height: 42px; padding-inline: 18px; }
.tr-form-pane .actions > span { font-size: 10px; line-height: 1.65; }
.tr-method-card { padding: 23px 21px; background: var(--surface); }
.tr-method-card .tr-eyebrow { margin-bottom: 9px; font-size: 8px; }
.tr-method-card h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.035em; font-weight: 550; margin-bottom: 23px; }
.tr-method-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 23px; }
.tr-method-steps li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; align-items: start; }
.tr-method-steps li > span:first-child { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent-fg); background: var(--surface-2); font: 550 10px var(--font); }
.tr-method-steps li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 32px; bottom: -15px; border-left: 1px solid var(--line); }
.tr-method-steps strong, .tr-method-steps b { display: block; margin: 3px 0 5px; font-size: 11px; font-weight: 600; color: var(--text); }
.tr-method-steps p, .tr-method-steps small { display: block; margin: 0; font-size: 10.5px; line-height: 1.7; color: var(--muted); }
.tr-source-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 25px; padding-top: 19px; border-top: 1px solid var(--line); }
.tr-source-status > span { font-size: 9px; padding: 4px 7px; border-radius: 4px; }
.tr-tip { margin-top: 18px; padding: 13px; background: var(--accent-soft); border: 1px solid var(--info-line); border-radius: 7px; color: var(--text-2); font-size: 10.5px; line-height: 1.8; }
.tr-tip p { margin: 0; }
.tr-tip b, .tr-tip strong { color: var(--accent-fg); font-weight: 600; }
#tr-plans, #tr-saved { margin-top: 17px; }
#tr-plans h3, #tr-saved h3 { font-size: 13px; font-weight: 600; }
.tr-report-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tr-report-hero h1 { overflow-wrap: anywhere; }
.tr-report-hero p { color: var(--muted); font-size: 11px; line-height: 1.8; }
.tr-report-hero .tr-eyebrow { margin-top: 16px; margin-bottom: 9px; }
.tr-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.tr-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 19px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tr-stat small { font-size: 10px; font-weight: 550; color: var(--muted); }
.tr-stat strong { font-size: 28px; line-height: 1.3; font-weight: 550; letter-spacing: -.045em; color: var(--text); }
.tr-stat > span { font-size: 10px; line-height: 1.65; color: var(--muted); }
.tr-strategy { margin-bottom: 20px; }
.tr-strategy p { font-size: 13px; line-height: 1.8; }
.tr-strategy li { margin-top: 7px; color: var(--text-2); font-size: 12px; }
.tr-cluster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tr-cluster { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; }
.tr-cluster h3 { font-size: 15px; line-height: 1.5; font-weight: 600; }
.tr-cluster p { font-size: 12px; line-height: 1.8; }
.tr-cluster li { margin-bottom: 8px; font-size: 12px; }
.tr-cluster .tl-pill { white-space: normal; overflow-wrap: anywhere; }
.tr-brief { padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; }
.tr-brief summary { cursor: pointer; color: var(--accent-fg); font-size: 11px; font-weight: 600; }
.tr-brief[open] summary { margin-bottom: 12px; }
.tr-brief p, .tr-brief li { line-height: 1.75; color: var(--text-2); }
.tr-evidence { font-size: 10px; line-height: 1.7; color: var(--muted); }
.tr-evidence a { text-decoration: underline; text-underline-offset: 3px; }
#tr-tabs { gap: 4px; }
#tr-tabs button { border-radius: 6px; }
#tr-body { padding-top: 15px; }
#tr-body .sm-bar { align-items: center; }
#tr-cl { width: auto; max-width: 240px; }
#tr-body th[data-s] { user-select: none; }
#tr-body .tl-table td:first-child { white-space: normal; }
#tr-run:empty { display: none; }

@media (max-width: 1180px) {
	.main { padding-inline: 28px; }
	.topbar { padding-inline: 28px; }
	.tr-workbench { grid-template-columns: minmax(0, 1fr); }
	.tr-method-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
	.tr-method-card > .tr-eyebrow, .tr-method-card > h2 { grid-column: 1; }
	.tr-method-card > h2 { margin-bottom: 15px; }
	.tr-method-steps { grid-column: 1; grid-row: 3 / span 3; }
	.tr-source-status, .tr-tip { grid-column: 2; margin-top: 0; }
	.tr-source-status { border-top: 0; padding-top: 0; align-content: start; grid-row: 1 / span 2; }
	.tr-tip { align-self: start; grid-row: 3; }
	.tr-hero-aside { flex-basis: 150px; }
	.tr-orbit { width: 145px; }
}
@media (max-width: 900px) {
	.app { grid-template-columns: minmax(0, 1fr); }
	.sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(290px, calc(100vw - 48px)); height: 100dvh; padding: 26px 16px 20px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; overflow: auto; transform: translateX(-100%); transition: transform .2s ease; visibility: hidden; border: 0; }
	.nav-open .sidebar { transform: none; visibility: visible; }
	.nav-open, .nav-open body { overflow: hidden; }
	.sidebar .brandmark { margin: 0 0 9px; padding: 2px 12px 26px; }
	.sidebar .brandmark::after, .sidebar .brandmark .product, .sidebar .nav-label { display: block; }
	.sidebar .brand-list { display: flex; }
	.sidebar .nav { flex-direction: column; }
	.sidebar-foot { margin-top: 24px; }
	.sidebar-backdrop:not([hidden]) { display: block; position: fixed; z-index: 50; inset: 0; border: 0; padding: 0; background: rgba(10, 15, 30, .45); cursor: pointer; }
	.shell-menu { display: inline-flex; flex: 0 0 auto; }
	.shell-menu-close { display: inline-flex; position: absolute; right: 13px; top: 22px; z-index: 1; color: #e8defc; font-size: 23px; }
	.shell-menu-close:hover { background: #272e45; color: #fff; }
	.shell-menu-close:focus-visible { outline-color: #e8defc; }
	.topbar { position: sticky; top: 0; height: 61px; padding: 0 20px; gap: 12px; }
	.topbar-actions { gap: 4px; }
	.user-name { display: none; }
	.main { padding: 26px 22px 55px; }
	.tr-hero h1 { font-size: 33px; }
	.tr-workbench { grid-template-columns: minmax(0, 1fr) 250px; gap: 15px; }
	.tr-method-card { display: block; padding: 21px 18px; }
	.tr-method-card h2 { margin-bottom: 24px; }
	.tr-source-status { padding-top: 20px; margin-top: 22px; border-top: 1px solid var(--line); }
	.tr-tip { margin-top: 17px; }
	.tr-input-card { padding: 20px; }
	.tr-form-pane .form-grid, .tr-form-pane .seg:not(.compact) { gap: 0 10px; }
	.tr-form-pane .seg:not(.compact) { gap: 8px; }
}
@media (max-width: 700px) {
	.tr-workbench { grid-template-columns: minmax(0, 1fr); }
	.tr-hero-aside { display: none; }
	.tr-hero { margin-bottom: 24px; padding-bottom: 22px; }
	.tr-hero h1 { font-size: 30px; max-width: 450px; }
	.tr-hero-copy { font-size: 12px; }
	.tr-cluster-grid { grid-template-columns: minmax(0, 1fr); }
	.tr-method-card { padding: 22px; }
	.tr-method-steps { gap: 18px; }
	.tr-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-stat { padding: 16px; }
	.tr-stat strong { font-size: 25px; }
	.tr-report-hero .actions { width: 100%; }
}
@media (max-width: 480px) {
	.main { padding: 22px 16px 45px; }
	.topbar { padding-inline: 12px; }
	.topbar-actions { gap: 2px; }
	.topbar .user-chip { display: none; }
	.crumbs { font-size: 10px; }
	.tr-hero h1 { font-size: 28px; }
	.tr-input-card { padding: 17px; }
	.tr-mode-option > span { padding: 10px 9px; }
	.tr-mode-option small { font-size: 9px; }
	.tr-form-pane .form-grid { grid-template-columns: 1fr; }
	.tr-form-pane .actions { flex-direction: column; align-items: stretch; }
	.tr-form-pane .actions > span { text-align: center; }
	.tr-form-pane .seg-opt span { padding: 10px; }
	.tr-form-pane .seg-opt b { font-size: 10.5px; }
	.tr-form-pane .seg-opt small { font-size: 9.5px; }
	.tr-stat-grid { gap: 8px; }
	.tr-stat { padding: 13px; }
	.tr-stat small { font-size: 9px; }
	#tr-cl { width: 100%; max-width: none; }
	.tl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; }
	.main > *, .sidebar { animation: none; transition: none; }
}
@media print {
	.sidebar, .sidebar-backdrop, .topbar { display: none !important; }
	.app { display: block; }
	.main { padding: 0; }
}

/* Research controls and evidence detail. */
.tr-hero h1 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.04em; }
.tr-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 17px; }
.tr-hero-tags > span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 10px; line-height: 1.5; }
.tr-hero-tags .icon { color: var(--accent-fg); width: 13px; height: 13px; }
.tr-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tr-form-heading .tr-eyebrow { font-size: 8px; margin-bottom: 8px; }
.tr-form-heading h2 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -.025em; }
.tr-step-label { white-space: nowrap; font-size: 9px; color: var(--muted); padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; }
.tr-mode-option > span { flex-direction: row; align-items: center; gap: 11px; min-height: 65px; }
.tr-mode-option > span > span { display: flex; flex-direction: column; gap: 4px; padding: 0; min-height: 0; height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.tr-mode-option input:checked + span > span { background: transparent; box-shadow: none; }
.tr-mode-option > span > .icon { flex: 0 0 19px; }
.tr-form-pane label > .muted, .tr-form-pane summary > .muted { margin-left: 5px; font-size: 10px; font-weight: 400; }
.tr-form-pane .seg-opt small { font-weight: 400; }
.tr-form-pane .notice { display: block; position: relative; padding-left: 27px; font-size: 11px; line-height: 1.8; }
.tr-form-pane .notice::before { position: absolute; left: 14px; top: 19px; }
.tr-form-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.tr-form-footer .btn { min-height: 41px; padding-inline: 19px; }
.tr-form-footer > span { font-size: 10px; line-height: 1.6; }
.tr-method-card > p { font-size: 11px; line-height: 1.75; margin: -10px 0 22px; }
.tr-source-status { flex-direction: column; gap: 10px; }
.tr-source-status > div { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.tr-source-status > div > b { margin-left: auto; font-weight: 500; font-size: 9px; color: var(--muted); }
.tr-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--up); flex: 0 0 5px; }
.tr-status-dot.pending { background: var(--warn); }
.tr-library-heading { margin-top: 29px; }
.tr-library-heading .tr-eyebrow { margin-bottom: 9px; font-size: 8px; }
.tr-library-heading h2 { font-size: 18px; line-height: 1.4; font-weight: 550; letter-spacing: -.025em; margin-bottom: 7px; }
.tr-library-heading p { font-size: 11px; line-height: 1.7; margin: 0 0 21px; }
.tr-opportunity { display: flex; align-items: flex-start; flex-direction: column; gap: 5px; }
.tr-opportunity > b { font-size: 20px; font-weight: 600; letter-spacing: -.035em; color: var(--accent-fg); white-space: nowrap; }
.tr-opportunity b > small { font-size: 10px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 3px; }
.tr-opportunity > span.small { font-size: 9px; line-height: 1.6; }
.tr-evidence-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 14px 17px; margin-bottom: 15px; border: 1px solid var(--info-line); border-radius: 8px; color: var(--text-2); background: var(--info-bg); font-size: 10px; line-height: 1.7; }
.tr-evidence-bar b { color: var(--accent-fg); font-weight: 600; }
.tr-evidence-bar > span:last-child { color: var(--muted); }
.tr-evidence { margin: 10px 0 15px; }
.tr-evidence summary { cursor: pointer; font-size: 10px; color: var(--accent-fg); font-weight: 550; }
.tr-evidence ul { padding-left: 16px; }
.tr-evidence li { margin-bottom: 5px; }
.tr-brief { margin-top: 13px; padding-top: 13px; }
.tr-brief-content { padding: 14px; margin-top: 12px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; font-size: 11px; }
.tr-brief-content p { margin: 0 0 12px; font-size: 11px; line-height: 1.75; }
.tr-brief-content p:last-child { margin-bottom: 0; }
.tr-brief-content > b, .tr-brief-content p > b { font-size: 10px; color: var(--text); font-weight: 600; }
.tr-brief-content .tr-eyebrow { font-size: 8px; line-height: 1.6; margin-bottom: 15px; }
.tr-brief-content ol, .tr-brief-content ul { padding-left: 18px; }
.tr-brief-content li { font-size: 11px; }
.tr-sort { appearance: none; display: inline-flex; align-items: center; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.tr-sort:hover { color: var(--accent-fg); }
@media (min-width: 901px) and (max-width: 1180px) {
	.tr-method-card { display: block; }
	.tr-method-card h2 br { display: none; }
	.tr-method-card > p { margin-bottom: 20px; }
	.tr-method-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.tr-method-steps li:not(:last-child)::after { display: none; }
	.tr-source-status { flex-direction: row; gap: 25px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
	.tr-source-status > div { gap: 8px; }
	.tr-tip { margin-top: 16px; }
}
@media (max-width: 700px) {
	.tr-mode-option > span { gap: 9px; }
	.tr-hero-tags { gap: 13px; }
}
@media (max-width: 480px) {
	.tr-mode-option > span { flex-direction: column; align-items: flex-start; gap: 9px; }
	.tr-mode-option > span > span { gap: 4px; }
	.tr-step-label { display: none; }
	.tr-form-footer { flex-direction: column; align-items: stretch; }
	.tr-form-footer > span { text-align: center; }
	.tr-hero-tags > span { font-size: 9px; }
	.tr-hero-tags { gap: 10px; }
}

/* A content brief is a reading surface, separate from the comparison table. */
.modal:has(.tr-brief-modal) { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); border-radius: 14px; }
.tr-brief-modal { font-size: 13px; line-height: 1.75; }
.tr-brief-modal .modal-head { gap: 18px; margin-bottom: 20px; padding-bottom: 20px; }
.tr-brief-modal .modal-head > div { min-width: 0; }
.tr-brief-modal .modal-head h2 { font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: -.025em; overflow-wrap: anywhere; margin: 0; }
.tr-brief-modal .modal-head .icon-btn { flex: 0 0 34px; min-height: 34px; }
.tr-brief-modal .tr-eyebrow { margin-bottom: 8px; font-size: 9px; line-height: 1.6; }
.tr-brief-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 23px; }
.tr-brief-metrics > div { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.tr-brief-metrics small, .tr-brief-metrics dt { color: var(--muted); font-size: 10px; font-weight: 500; }
.tr-brief-metrics strong, .tr-brief-metrics > div > b { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; color: var(--text); overflow-wrap: anywhere; }
.tr-brief-metrics span { font-size: 11px; line-height: 1.6; color: var(--text-2); }
.tr-brief-modal .tr-brief-content { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; }
.tr-brief-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 25px; align-items: start; }
.tr-brief-main, .tr-brief-aside { min-width: 0; }
.tr-brief-aside { border-left: 1px solid var(--line); padding-left: 23px; }
.tr-brief-modal .tr-brief-content p { margin: 0 0 20px; font-size: 13px; line-height: 1.8; color: var(--text-2); }
.tr-brief-modal .tr-brief-content p:last-child { margin-bottom: 0; }
.tr-brief-modal .tr-brief-content b { font-size: 11px; line-height: 1.7; color: var(--text); font-weight: 650; }
.tr-brief-modal .tr-brief-content ul, .tr-brief-modal .tr-brief-content ol { padding-left: 20px; margin: 9px 0 20px; }
.tr-brief-modal .tr-brief-content li { padding-left: 3px; margin-bottom: 9px; font-size: 13px; line-height: 1.75; color: var(--text-2); }
.tr-brief-modal .tr-brief-content li::marker { color: var(--accent-fg); }
.tr-brief-section { margin-bottom: 23px; }
.tr-brief-section h3 { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.tr-brief-note { padding: 13px 15px; border: 1px solid var(--info-line); border-radius: 7px; background: var(--info-bg); color: var(--info-fg); font-size: 11px; line-height: 1.8; }
.tr-brief-modal .tr-evidence { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; }
.tr-brief-modal .tr-evidence summary { font-size: 12px; }
.tr-brief-modal .tr-evidence li, .tr-brief-modal .tr-evidence p.small { font-size: 12px; }
.tr-brief-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.tr-brief-footer .btn { min-height: 39px; }
.tr-brief-footer [data-close]:last-child { margin-left: auto; }
@media (max-width: 700px) {
	.modal:has(.tr-brief-modal) { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
	.modal:has(.tr-brief-modal) .modal-body { padding: 21px; }
	.tr-brief-modal .modal-head h2 { font-size: 18px; }
	.tr-brief-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-brief-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.tr-brief-aside { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
	.tr-brief-footer { gap: 8px; }
}
@media (max-width: 420px) {
	.modal:has(.tr-brief-modal) .modal-body { padding: 18px; }
	.tr-brief-metrics > div { padding: 12px; }
	.tr-brief-footer .btn { flex: 1 1 auto; }
	.tr-brief-footer [data-close]:last-child { margin-left: 0; }
}
.tr-brief-action, .tr-outline-action { margin-top: 11px; margin-right: 6px; }
.tr-brief-angle { margin: 0 0 22px; color: var(--text-2); font-size: 13px; line-height: 1.8; }
.tr-brief-modal .tr-opportunity > b { font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--accent-fg); }
.tr-brief-modal .tr-opportunity { margin: 10px 0 14px; }
.tr-brief-modal .tr-brief-note ul { margin-bottom: 0; }