@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* Zilo SEO — dark UI matched to zilodigital.com: near-black ground, neon pink→purple→blue
   gradient reserved for identity and primary actions only. Semantic status colours stay
   separate from that gradient so "this page is broken" never reads as branding. */
:root{
	--bg:#08080D;
	--surface:#101018;
	--surface-2:#171722;
	--surface-3:#1E1E2C;
	--line:#26263A;
	--line-strong:#34344E;

	--ink:#F2F2F7;
	--ink-soft:#A0A0BA;
	--ink-faint:#6E6E8A;

	--pink:#FF3D9A;
	--purple:#A855F7;
	--blue:#3B82F6;
	--cyan:#22D3EE;

	--grad: linear-gradient(100deg, #FF3D9A 0%, #A855F7 50%, #3B82F6 100%);
	--grad-soft: linear-gradient(100deg, rgba(255,61,154,.14) 0%, rgba(168,85,247,.14) 50%, rgba(59,130,246,.14) 100%);

	--critical:#FF4D6A;
	--critical-bg:rgba(255,77,106,.12);
	--warning:#FFB020;
	--warning-bg:rgba(255,176,32,.12);
	--ok:#2DD4A7;
	--ok-bg:rgba(45,212,167,.12);
	--info:#22D3EE;
	--info-bg:rgba(34,211,238,.12);

	--radius:12px;
	--shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.8);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
	margin:0; background:var(--bg); color:var(--ink);
	font-family:"Inter", ui-sans-serif, system-ui, sans-serif;
	font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(168,85,247,.35); color:#fff; }
a{ color:var(--cyan); text-decoration:none; }
a:hover{ color:#67E8F9; }
code,.mono{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:.88em; }
code{ background:var(--surface-3); padding:.12rem .38rem; border-radius:5px; color:#D8B4FE; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
	outline:2px solid var(--purple); outline-offset:2px;
}

h1{ font-size:1.65rem; font-weight:700; margin:0 0 .3rem; letter-spacing:-.02em; }
h2{ font-size:1.05rem; font-weight:650; margin:2rem 0 .7rem; letter-spacing:-.01em; }
h3{ font-size:.95rem; font-weight:600; margin:1.3rem 0 .5rem; }
p{ margin:0 0 .9rem; }
.muted{ color:var(--ink-soft); }
.tiny{ font-size:.82rem; }
.section-sub{ color:var(--ink-soft); max-width:64ch; margin:-.1rem 0 1.1rem; font-size:.9rem; }

/* ---------- chrome ---------- */
.topnav{
	display:flex; align-items:center; gap:1.4rem;
	padding:.85rem 1.6rem; background:var(--surface);
	border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.topnav .brand{
	font-weight:800; font-size:1.02rem; letter-spacing:-.02em; color:var(--ink);
	background:var(--grad); -webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent;
}
.topnav .brand:hover{ opacity:.85; }
.topnav nav{ display:flex; gap:.3rem; }
.topnav nav a{
	color:var(--ink-soft); font-size:.87rem; font-weight:500;
	padding:.35rem .7rem; border-radius:7px;
}
.topnav nav a:hover{ background:var(--surface-2); color:var(--ink); }
.topnav nav a.active{ background:var(--surface-3); color:var(--ink); }
.spacer{ flex:1; }

.wrap{ max-width:1140px; margin:0 auto; padding:1.9rem 1.6rem 5rem; }
.wrap-narrow{ max-width:720px; }
.page-head{ display:flex; align-items:flex-start; gap:1rem; justify-content:space-between; flex-wrap:wrap; }
.crumb{ font-size:.85rem; color:var(--ink-soft); margin-bottom:.5rem; display:block; }

/* ---------- buttons ---------- */
.btn{
	display:inline-flex; align-items:center; gap:.4rem; justify-content:center;
	background:var(--grad); color:#fff; border:none;
	padding:.55rem 1.05rem; border-radius:9px; cursor:pointer;
	font:inherit; font-size:.88rem; font-weight:600; letter-spacing:.01em;
	transition:filter .15s ease, transform .06s ease;
}
.btn:hover{ filter:brightness(1.12); color:#fff; }
.btn:active{ transform:translateY(1px); }
.btn-secondary{
	background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong);
}
.btn-secondary:hover{ background:var(--surface-3); filter:none; }
.btn-sm{ padding:.35rem .7rem; font-size:.8rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- cards / stats ---------- */
.card{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:1.3rem; margin-top:1rem; box-shadow:var(--shadow);
}
.card-flush{ padding:0; overflow:hidden; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:.8rem; margin-top:1.1rem; }
.stat{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:.95rem 1.05rem; position:relative; overflow:hidden;
}
.stat::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--line-strong); }
.stat.is-critical::before{ background:var(--critical); }
.stat.is-warning::before{ background:var(--warning); }
.stat.is-ok::before{ background:var(--ok); }
.stat.is-brand::before{ background:var(--grad); }
.stat .label{
	font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
	color:var(--ink-faint); font-weight:600; margin-bottom:.3rem;
}
.stat .value{ font-size:1.65rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat.is-critical .value{ color:var(--critical); }
.stat.is-warning .value{ color:var(--warning); }
.stat.is-ok .value{ color:var(--ok); }
.stat .sub{ font-size:.78rem; color:var(--ink-faint); margin-top:.2rem; }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); margin-top:1rem; background:var(--surface); }
.table{ width:100%; border-collapse:collapse; min-width:640px; }
.table th,.table td{ text-align:left; padding:.65rem .9rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.table thead th{
	font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
	color:var(--ink-faint); background:var(--surface-2); white-space:nowrap;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background:var(--surface-2); }
.table .num{ font-variant-numeric:tabular-nums; }
.t-title{ font-weight:550; color:var(--ink); }
.t-sub{ display:block; font-size:.78rem; color:var(--ink-faint); margin-top:.1rem; }

/* ---------- pills / badges ---------- */
.pill{
	display:inline-block; padding:.16rem .55rem; border-radius:99px;
	font-size:.71rem; font-weight:650; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.pill-connected,.pill-ok{ background:var(--ok-bg); color:var(--ok); }
.pill-pending{ background:var(--surface-3); color:var(--ink-faint); }
.pill-error,.pill-critical{ background:var(--critical-bg); color:var(--critical); }
.pill-warning{ background:var(--warning-bg); color:var(--warning); }
.pill-info{ background:var(--info-bg); color:var(--info); }
.pill-type{ background:var(--surface-3); color:var(--ink-soft); text-transform:none; letter-spacing:0; font-weight:550; }

.flags{ display:flex; gap:.28rem; flex-wrap:wrap; }
.flag{
	font-size:.68rem; font-weight:650; padding:.12rem .42rem; border-radius:5px;
	background:var(--critical-bg); color:var(--critical); white-space:nowrap;
}
.flag-warn{ background:var(--warning-bg); color:var(--warning); }

.score{ font-weight:700; font-variant-numeric:tabular-nums; }
.score-good{ color:var(--ok); } .score-mid{ color:var(--warning); } .score-bad{ color:var(--critical); }

/* ---------- forms ---------- */
label{ display:block; margin-bottom:1rem; font-size:.85rem; font-weight:550; color:var(--ink); }
.hint{ font-weight:400; color:var(--ink-faint); font-size:.8rem; }
input[type=text],input[type=url],input[type=email],input[type=password],textarea,select{
	width:100%; padding:.58rem .7rem; margin-top:.35rem;
	background:var(--surface-2); color:var(--ink);
	border:1px solid var(--line-strong); border-radius:8px;
	font:inherit; font-size:.9rem;
}
input:focus,textarea:focus,select:focus{ border-color:var(--purple); }
input:disabled,textarea:disabled{ opacity:.55; cursor:not-allowed; }
textarea{ resize:vertical; line-height:1.5; }
textarea.mono{ font-family:"JetBrains Mono",monospace; font-size:.82rem; }
.counter{ float:right; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink-faint); }
.counter.over{ color:var(--critical); }
.counter.good{ color:var(--ok); }

.checks{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.check{
	display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
	background:var(--surface-2); border:1px solid var(--line-strong);
	padding:.35rem .7rem; border-radius:7px; font-size:.83rem; font-weight:500; margin:0;
}
.check input{ width:auto; margin:0; accent-color:var(--purple); }
.check:has(input:checked){ border-color:var(--purple); background:rgba(168,85,247,.12); }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:620px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- filters / tabs ---------- */
.filters{ display:flex; gap:.4rem; flex-wrap:wrap; margin:1.1rem 0 .2rem; }
.filter{
	padding:.4rem .8rem; border-radius:8px; font-size:.84rem; font-weight:550;
	background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft);
}
.filter:hover{ color:var(--ink); border-color:var(--line-strong); }
.filter.active{ background:var(--grad); color:#fff; border-color:transparent; }
.filter .count{ opacity:.65; margin-left:.25rem; font-variant-numeric:tabular-nums; }

.actions{ display:flex; gap:.55rem; flex-wrap:wrap; margin:1.2rem 0; }

/* ---------- issues ---------- */
.issue-list{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.issue{
	display:flex; gap:.7rem; align-items:flex-start;
	padding:.6rem .8rem; border-radius:9px; background:var(--surface-2);
	border-left:3px solid var(--line-strong); font-size:.87rem;
}
.issue.critical{ border-left-color:var(--critical); }
.issue.warning{ border-left-color:var(--warning); }
.issue.notice{ border-left-color:var(--info); }
.issue .sev{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding-top:.13rem; min-width:56px; }
.issue.critical .sev{ color:var(--critical); }
.issue.warning .sev{ color:var(--warning); }
.issue.notice .sev{ color:var(--info); }

/* ---------- notices ---------- */
.notice,.warning,.danger{ padding:.7rem 1rem; border-radius:9px; font-size:.88rem; margin:1rem 0; border:1px solid transparent; }
.notice{ background:var(--ok-bg); color:var(--ok); border-color:rgba(45,212,167,.25); }
.warning{ background:var(--warning-bg); color:var(--warning); border-color:rgba(255,176,32,.25); }
.danger,.error{ background:var(--critical-bg); color:var(--critical); border-color:rgba(255,77,106,.25); }
.error{ padding:.7rem 1rem; border-radius:9px; font-size:.88rem; margin:1rem 0; }
.empty{ color:var(--ink-faint); font-style:italic; padding:1.4rem 0; }

.key-box{
	display:block; background:var(--surface-2); border:1px dashed var(--line-strong);
	padding:.85rem; border-radius:9px; font-family:"JetBrains Mono",monospace;
	font-size:.95rem; margin:.85rem 0; word-break:break-all; color:#D8B4FE;
}

.log{ list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-direction:column; gap:.4rem; }
.log li{ font-size:.85rem; color:var(--ink-soft); padding:.5rem .75rem; background:var(--surface-2); border-radius:7px; }
.log .when{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }

.outline{ list-style:none; padding:0; margin:.5rem 0 0; font-size:.85rem; }
.outline li{ padding:.2rem 0; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.outline .lvl{ display:inline-block; min-width:26px; font-size:.7rem; font-weight:700; color:var(--purple); }

/* ---------- auth ---------- */
.auth-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); position:relative; overflow:hidden; }
.auth-body::before{
	content:""; position:absolute; width:520px; height:520px; border-radius:50%;
	background:var(--grad); filter:blur(140px); opacity:.22; top:-160px; right:-120px;
}
.auth-card{
	position:relative; background:var(--surface); border:1px solid var(--line);
	border-radius:16px; padding:2.3rem; width:350px; box-shadow:var(--shadow);
}
.auth-card h1{
	font-size:1.4rem; text-align:center; margin-bottom:.2rem;
	background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-card .sub{ text-align:center; color:var(--ink-faint); font-size:.85rem; margin-bottom:1.5rem; }
.auth-card label{ margin-bottom:.9rem; }
.auth-card .btn{ width:100%; margin-top:.7rem; }

@media (max-width:700px){
	.wrap{ padding:1.3rem 1rem 3.5rem; }
	.topnav{ padding:.7rem 1rem; gap:.8rem; overflow-x:auto; }
	.page-head{ flex-direction:column; }
}

/* ---------------------------------------------------------------- data sources & review queue */

.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.25rem; }

.inline-form{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.inline-form label{ margin:0; }
.inline-form select{ width:auto; margin:0; }

.subnav{ display:flex; gap:.25rem; flex-wrap:wrap; margin:1.5rem 0 1rem; border-bottom:1px solid var(--line); }
.subnav a{
	padding:.55rem .9rem; color:var(--ink-soft); font-size:.85rem; font-weight:550;
	border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none;
}
.subnav a:hover{ color:var(--ink); }
.subnav a.active{ color:var(--ink); border-bottom-color:var(--pink); }

.btn-danger{ background:var(--critical-bg); color:var(--critical); border:1px solid rgba(255,77,106,.3); }
.btn-danger:hover{ background:rgba(255,77,106,.2); color:var(--critical); filter:none; }

.suggestion-head{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:flex-start; margin-bottom:.75rem; }

/* Before/after are read side by side, so the colour has to carry the direction at a
   glance — muted for what is there now, gradient-tinted for what is proposed. */
.diff-before,.diff-after{
	padding:.6rem .75rem; border-radius:8px; font-size:.85rem; line-height:1.5;
	margin-bottom:.9rem; word-break:break-word;
}
.diff-before{ background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
.diff-after{ background:var(--grad-soft); color:var(--ink); border:1px solid var(--line-strong); }

.reject-form{ margin-top:.6rem; }

/* ---------- AI nav item ---------- */

/* Carries the same gradient as .btn so the one nav entry that spends money and writes to a
   client's site reads as an action, not another section. Sits last in the bar. */
.topnav nav a.nav-ai{
	display:inline-flex; align-items:center; gap:.35rem;
	background:var(--grad); color:#fff; font-weight:600;
	margin-left:.35rem;
}
.topnav nav a.nav-ai:hover{ background:var(--grad); color:#fff; filter:brightness(1.12); }

/* .active would otherwise repaint it flat grey like any other current section. */
.topnav nav a.nav-ai.active{ background:var(--grad); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.22) inset; }

.nav-icon{ flex:none; }

/* The sparkle sits on the baseline of a much larger heading, so it needs its own size and
   a nudge — inheriting 14px next to a 1.65rem h1 reads as a speck. */
h1 .nav-icon{ width:20px; height:20px; vertical-align:-2px; color:var(--pink); }

/* Update sits beside Open in the site list; without this the button's inline-flex and the
   link's baseline disagree and the row jumps a pixel on hover. */
.row-actions{ display:flex; align-items:center; gap:.6rem; white-space:nowrap; }
.row-actions .btn[disabled]{ opacity:.4; }

/* ---------------------------------------------------------------- overview */

.ov-head{
	display:flex; align-items:flex-start; justify-content:space-between;
	gap:1.5rem; flex-wrap:wrap; margin-bottom:1.6rem;
}
.ov-title h1{ margin:0 0 .15rem; }
.ov-title a{ color:var(--ink-faint); }
.ov-title a:hover{ color:var(--cyan); }

.ov-health{ display:flex; align-items:center; gap:.9rem; }
.ov-health-label{
	display:block; font-size:.7rem; text-transform:uppercase;
	letter-spacing:.09em; color:var(--ink-faint); font-weight:650;
}

/* The score as a ring rather than a bare number: a conic gradient reads as a proportion
   at a glance, which "72" alone does not. --pct drives it, so no JS and no images. */
.ring{
	--pct:0;
	width:64px; height:64px; border-radius:50%; flex:none;
	display:grid; place-items:center; position:relative;
	background:conic-gradient(currentColor calc(var(--pct) * 1%), var(--surface-3) 0);
}
.ring::after{
	content:""; position:absolute; inset:5px;
	border-radius:50%; background:var(--surface);
}
.ring span{
	position:relative; z-index:1;
	font-size:1.35rem; font-weight:800; letter-spacing:-.04em;
	font-variant-numeric:tabular-nums; color:var(--ink);
}

/* Health components as bars, not four more stat cards — they are parts of one number and
   should read as a set rather than as separate facts. */
.ov-parts{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:.4rem 1.5rem; padding:1rem 1.2rem; margin-bottom:2.2rem;
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.part{ display:grid; grid-template-columns:9.5rem 1fr auto; align-items:center; gap:.7rem; }
.part-label{ font-size:.8rem; color:var(--ink-soft); }
.part-bar{ height:5px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.part-bar i{ display:block; height:100%; border-radius:99px; }
.part-bar .good{ background:var(--ok); }
.part-bar .mid{ background:var(--warning); }
.part-bar .bad{ background:var(--critical); }
.part-pct{
	font-size:.78rem; color:var(--ink-soft);
	font-variant-numeric:tabular-nums; min-width:2.6rem; text-align:right;
}

.ov-h2{ margin:2.2rem 0 .8rem; }

/* A finding: severity in the stripe, worth in the number, action on the right. Three
   columns so the eye lands on the same place down the list. */
.fnd{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto auto;
	align-items:center; gap:1.4rem;
	background:var(--surface); border:1px solid var(--line);
	border-left:3px solid var(--line-strong);
	border-radius:var(--radius); padding:1.1rem 1.3rem; margin-bottom:.55rem;
}
@media (max-width:760px){
	.fnd{ grid-template-columns:1fr; gap:.8rem; }
	.fnd-value{ justify-self:start; }
}
.fnd-main{ min-width:0; }
.fnd-main h3{
	margin:0 0 .2rem; font-size:1rem; font-weight:650;
	letter-spacing:-.015em; color:var(--ink); text-wrap:balance;
}
.fnd-main p{ margin:0; font-size:.865rem; color:var(--ink-soft); max-width:62ch; }
.fnd .btn{ flex:none; }

.fnd-value{ text-align:right; white-space:nowrap; }
.fnd-value .n{
	display:block; font-size:1.3rem; font-weight:750; letter-spacing:-.03em;
	font-variant-numeric:tabular-nums; line-height:1.1;
}
.fnd-value .u{
	display:block; font-size:.66rem; text-transform:uppercase;
	letter-spacing:.07em; color:var(--ink-faint); line-height:1.3; margin-top:.15rem;
}

.fnd-critical{ border-left-color:var(--critical); }
.fnd-critical .fnd-value .n{ color:var(--critical); }
.fnd-warning{ border-left-color:var(--warning); }
.fnd-warning .fnd-value .n{ color:var(--warning); }
.fnd-notice{ border-left-color:var(--info); }

/* Notices are housekeeping — quieter, denser, one block rather than five cards. */
.ov-notes{
	background:var(--surface); border:1px solid var(--line);
	border-radius:var(--radius); overflow:hidden;
}
.note-row{
	display:flex; align-items:center; gap:.8rem;
	padding:.75rem 1.2rem; border-bottom:1px solid var(--line);
}
.note-row:last-child{ border-bottom:none; }
.note-row > div{ flex:1; min-width:0; }
.note-row strong{ font-size:.88rem; font-weight:600; display:block; }
.note-row .dot{
	width:6px; height:6px; border-radius:50%;
	background:var(--info); flex:none;
}

/* ---------------------------------------------------------------- inline suggest */

.section-head{
	display:flex; align-items:flex-start; justify-content:space-between;
	gap:1rem; flex-wrap:wrap; margin:2rem 0 .7rem;
}
.section-head h2{ margin:0; }
.section-head p{ margin:.2rem 0 0; }

.suggest-form{ margin:0; }

/* Gradient outline rather than a filled button: it sits beside a heading, and a solid
   gradient there would compete with the primary action further down the form. */
.btn-suggest{
	display:inline-flex; align-items:center; gap:.4rem;
	background:var(--surface-2); color:var(--ink);
	border:1px solid transparent; border-radius:9px;
	padding:.45rem .85rem; cursor:pointer;
	font:inherit; font-size:.84rem; font-weight:600;
	background-image:linear-gradient(var(--surface-2),var(--surface-2)),var(--grad);
	background-origin:border-box; background-clip:padding-box,border-box;
	transition:filter .15s ease;
}
.btn-suggest:hover{ filter:brightness(1.35); }
.btn-suggest:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.btn-suggest .nav-icon{ color:var(--pink); }

.suggest-panel{
	background:var(--surface); border:1px solid var(--line-strong);
	border-radius:var(--radius); padding:1.15rem 1.3rem; margin:.6rem 0 1.4rem;
	position:relative; overflow:hidden;
}
/* A gradient hairline along the top marks the panel as machine-written without tinting
   the whole surface, which would make the editable fields harder to read. */
.suggest-panel::before{
	content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--grad);
}

.suggest-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:1rem; flex-wrap:wrap; margin-bottom:.5rem;
}
.suggest-badge{
	display:inline-flex; align-items:center; gap:.35rem;
	font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
	background:var(--grad); -webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent; color:var(--pink);
}
.suggest-badge .nav-icon{ -webkit-text-fill-color:var(--pink); color:var(--pink); }

.suggest-why{ color:var(--ink-soft); font-style:italic; margin:0 0 .9rem; }
.suggest-actions{ display:flex; gap:.6rem; align-items:center; margin-top:.3rem; }

.btn-link{
	background:none; border:none; padding:.3rem 0; margin-top:.5rem;
	color:var(--ink-faint); font:inherit; font-size:.8rem;
	cursor:pointer; text-decoration:underline;
}
.btn-link:hover{ color:var(--ink-soft); }

/* ---------------------------------------------------------------- structural fixes
   Each rule below replaced a pattern that was being written inline, over and over. An
   inline style is a decision made once for one element; the same decision made eight
   times in eight files drifts, and that drift is what "needs better styling" looks like. */

/* A heading first inside a card should not push the card open. Was written as
   style="margin-top:0" in eight places. */
.card > :first-child,
.suggest-panel > :first-child,
.ov-notes > :first-child{ margin-top:0; }

/* Stat tiles hold numbers by default. Where one holds text — a version string, a plugin
   name — it needs to be smaller and to sit on the same baseline. Was five copies of
   style="font-size:1.05rem;padding-top:.4rem". */
.stat .value.is-text{ font-size:1.05rem; padding-top:.4rem; line-height:1.35; }

/* Progress bars: the generation screen drew one entirely inline. */
.progress-track{
	height:6px; background:var(--surface-3); border-radius:99px;
	overflow:hidden; margin:1.5rem 0 .6rem;
}
.progress-fill{
	height:100%; background:var(--grad); border-radius:99px;
	transition:width .3s ease;
}
@media (prefers-reduced-motion:reduce){ .progress-fill{ transition:none; } }

/* The queue card. The class was on the markup and matched nothing, so every suggestion
   rendered as a bare .card with no separation between the pair of columns. */
.suggestion{ padding:1.25rem 1.4rem; }
.suggestion + .suggestion{ margin-top:.7rem; }
.suggestion .grid-2{ gap:1.6rem; margin-top:.9rem; }
.suggestion label{ margin-bottom:.55rem; }

/* Media thumbnails, previously sized inline in the images table. */
.thumb{
	width:52px; height:52px; object-fit:cover;
	border-radius:6px; border:1px solid var(--line); display:block;
}

/* Vertical rhythm utilities, replacing scattered margin patches. */
.stack-sm{ margin-top:.6rem; }
.stack{ margin-top:1rem; }
.stack-lg{ margin-top:2rem; }
.flush{ margin:0; }

/* Forms sitting side by side — approve next to reject, save next to delete — rather than
   each starting its own block and stacking. */
.form-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.form-row form{ margin:0; }

/* Tables carrying a lot of rows read better a little tighter, and numeric columns should
   never wrap mid-figure. */
.table td.num,
.table th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table-dense th,
.table-dense td{ padding:.45rem .8rem; }

/* Anything focusable that is not already covered — the global rule only reaches native
   controls, and several interactive elements here are links styled as buttons. */
.btn:focus-visible,
.btn-sm:focus-visible,
.filter:focus-visible,
.subnav a:focus-visible,
.note-row a:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

/* Small utilities the last of the inline styles were standing in for. */
.wrap-centred{ padding-top:4rem; }
.pre-wrap{ margin:0; white-space:pre-wrap; font-size:.78rem; }
.list-numbered{ list-style:decimal; padding-left:1.3rem; }
.clickable{ cursor:pointer; font-weight:600; }

/* The "first thing inside a box" rule, extended to every container that holds headings.
   Four more elements were patching this individually. */
.card > h2:first-child,
.card > h3:first-child,
.card > p:first-child,
.suggest-panel > h3:first-child,
form.card > h2:first-child,
form.card > h3:first-child{ margin-top:0; }

.section-head-first{ margin-top:0; }
.flush-top{ margin-top:0; }

/* ---------------------------------------------------------------- PageSpeed */

/* Google's own bands, so a number here reads the same as it does in their UI. Using a
   different palette for the same thresholds is how two tools end up disagreeing about a
   page that neither of them changed. */
.psi-scores{ display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 8px; }
.psi-score{
	flex:1 1 120px; min-width:110px; padding:14px 12px; border-radius:10px;
	background:var(--surface-2); border:1px solid var(--line); text-align:center;
}
.psi-score strong{ display:block; font-size:28px; line-height:1.1; font-weight:650; }
.psi-score span{ display:block; margin-top:4px; font-size:11px; color:var(--ink-faint);
	text-transform:uppercase; letter-spacing:.06em; }
.psi-score.is-good strong{ color:var(--ok); }
.psi-score.is-needs-work strong{ color:var(--warning); }
.psi-score.is-poor strong{ color:var(--critical); }
.psi-score.is-none strong{ color:var(--ink-faint); }
.psi-score.is-good{ border-color:color-mix(in srgb, var(--ok) 35%, var(--line)); }
.psi-score.is-poor{ border-color:color-mix(in srgb, var(--critical) 35%, var(--line)); }

.pill.is-good{ background:var(--ok-bg); color:var(--ok); }
.pill.is-needs-work{ background:var(--warning-bg); color:var(--warning); }
.pill.is-poor{ background:var(--critical-bg); color:var(--critical); }

.psi-fixable, .psi-failing{ list-style:none; margin:8px 0 16px; padding:0; }
.psi-fixable li, .psi-failing li{
	display:flex; align-items:baseline; justify-content:space-between; gap:12px;
	padding:9px 0; border-bottom:1px solid var(--line);
}
.psi-fixable li:last-child, .psi-failing li:last-child{ border-bottom:0; }

h3.sub{ margin:20px 0 2px; font-size:13px; font-weight:600; letter-spacing:.02em; }

/* ---------------------------------------------------------------- advice cards */

/* Visually distinct from every other suggestion, because it is the one kind that cannot
   be published. If it looked like the rest, the absent Approve button would read as a
   bug rather than as the point. */
.suggestion.is-advisory{ border-left:3px solid var(--info); }
.pill-advisory{ background:var(--info-bg); color:var(--info); }
.pill-owner{ background:var(--surface-3); color:var(--ink-soft); text-transform:none; letter-spacing:0; }

.advice-summary{
	margin:10px 0 14px; padding:12px 14px; border-radius:8px;
	background:var(--surface-2); border-left:3px solid var(--ink-faint); line-height:1.55;
}
.advice-summary.is-good{ border-left-color:var(--ok); }
.advice-summary.is-needs-work{ border-left-color:var(--warning); }
.advice-summary.is-poor{ border-left-color:var(--critical); }

.advice-list{ margin:0 0 14px; padding-left:22px; }
.advice-list li{ margin-bottom:14px; }
.advice-list li p{ margin:5px 0 0; line-height:1.55; }
.advice-title{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }

.row-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.row-form input[type=url]{ flex:1 1 280px; min-width:0; }

.table.tight td{ padding:7px 10px; }

@media (max-width:640px){
	.psi-score{ flex:1 1 calc(50% - 6px); }
	.psi-fixable li, .psi-failing li{ flex-direction:column; gap:2px; }
}

/* ---------------------------------------------------------------- AI search */

.geo-head{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-top:6px; }
.geo-score{
	flex:none; width:96px; height:96px; border-radius:50%;
	display:grid; place-content:center; text-align:center;
	border:3px solid var(--line); background:var(--surface-2);
}
.geo-score strong{ display:block; font-size:30px; font-weight:650; line-height:1; }
.geo-score span{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }
.geo-score.is-good{ border-color:var(--ok); } .geo-score.is-good strong{ color:var(--ok); }
.geo-score.is-mid{ border-color:var(--warning); } .geo-score.is-mid strong{ color:var(--warning); }
.geo-score.is-bad{ border-color:var(--critical); } .geo-score.is-bad strong{ color:var(--critical); }

.geo-parts{ flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.geo-part{ display:grid; grid-template-columns:130px 1fr 44px; gap:10px; align-items:center; }
.geo-part-label{ font-size:13px; color:var(--ink-soft); }
.geo-part-value{ font-size:12px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-faint); }
.geo-bar{ height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.geo-bar > i{ display:block; height:100%; background:var(--info); border-radius:3px; }

.geo-levers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:12px 0 16px; }
.geo-lever{ background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:16px; }
.geo-lever h3{ margin:0 0 7px; font-size:15px; }
.geo-lever p{ margin:0 0 13px; font-size:14px; color:var(--ink-soft); line-height:1.55; }

.note-inline{
	border-left:3px solid var(--info); background:var(--info-bg);
	padding:12px 14px; border-radius:0 8px 8px 0; margin:12px 0; font-size:14px; line-height:1.55;
}

.faq-pair{
	border:1px solid var(--line); border-radius:8px;
	padding:11px; margin-bottom:9px; background:var(--surface-2);
}
.faq-pair input{ margin-bottom:7px; font-weight:600; }

textarea.copyable{ font-size:14px; line-height:1.6; background:var(--surface-2); }

details.mt{ margin-top:16px; }
details.mt summary{ cursor:pointer; }
.pre-wrap{ white-space:pre-wrap; word-break:break-word; }

@media (max-width:560px){
	.geo-part{ grid-template-columns:1fr; gap:3px; }
	.geo-part-value{ text-align:left; }
}

/* ---------------------------------------------------------------- card headers */
/* Used by the PageSpeed, GEO and WhatsApp panels — added here since it was missed
   when those were first built. */
.card-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; margin-bottom:10px; flex-wrap:wrap;
}
.card-head h2{ margin:0; }

/* ---------------------------------------------------------------- WhatsApp linking */
.wa-code{
	display:flex; flex-direction:column; gap:4px; align-items:flex-start;
	background:var(--ok-bg); border:1px solid var(--ok); border-radius:9px;
	padding:14px 18px; margin:12px 0;
}
.wa-code-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.wa-code-value{
	font-family:"JetBrains Mono", ui-monospace, monospace; font-size:26px; font-weight:650;
	letter-spacing:.08em; color:var(--ok);
}

.row-form input[type=text]{ flex:1 1 200px; min-width:0; }

/* ---------------------------------------------------------------- marketing shell & board */

.sr{
	position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
	clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Two stacked bars, one sticky unit: the sections (General / SEO / Ads) on top, and only
   inside a site that site's own screens beneath. Making the wrapper sticky, not each bar,
   is what stops them overlapping when the lower one is present. */
.chrome{ position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line); }
.chrome .topnav{ position:static; border-bottom:none; }

.topnav .areas{ display:flex; gap:.3rem; }
.topnav .areas a{ font-weight:600; }
.area-soon{
	display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem;
	font-size:.87rem; font-weight:600; color:var(--ink-faint); cursor:default;
}
.area-soon em{
	font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	background:var(--surface-3); color:var(--ink-soft); padding:.1rem .4rem; border-radius:99px;
}

.sectionbar{
	display:flex; gap:.3rem; padding:.4rem 1.6rem .55rem; overflow-x:auto;
	background:var(--bg); border-top:1px solid var(--line);
}
.sectionbar a{
	color:var(--ink-soft); font-size:.85rem; font-weight:500; white-space:nowrap;
	padding:.3rem .65rem; border-radius:7px; text-decoration:none;
}
.sectionbar a:hover{ background:var(--surface-2); color:var(--ink); }
.sectionbar a.active{ background:var(--surface-3); color:var(--ink); }
.sectionbar a.nav-ai{
	display:inline-flex; align-items:center; gap:.35rem; margin-left:.35rem;
	background:var(--grad); color:#fff; font-weight:600;
}
.sectionbar a.nav-ai:hover{ background:var(--grad); color:#fff; filter:brightness(1.12); }
.sectionbar a.nav-ai.active{ background:var(--grad); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.22) inset; }

@media (max-width:700px){
	.sectionbar{ padding-inline:1rem; }
	/* One line, scrolling sideways if it has to, rather than wrapping the brand and the
	   section names over two rows. The signed-in name is the first thing to go. */
	.topnav .brand,.topnav .areas a,.area-soon{ white-space:nowrap; }
	.topnav .muted.tiny{ display:none; }
}

.wrap-wide{ max-width:1520px; }

/* ---------- headline numbers ---------- */

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem; margin:1.2rem 0 .5rem; }
.kpi{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:1rem 1.1rem .9rem; box-shadow:var(--shadow);
}
.kpi-label{ font-size:.74rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
/* Proportional figures, not tabular: at this size tabular digits all take the width of a 0
   and a number like 121 looks loose. Tabular is for columns that have to line up. */
.kpi-value{ font-size:2.15rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:.25rem 0 .35rem; }
.kpi-value.is-empty{ color:var(--ink-faint); }
.kpi-foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; min-height:28px; }
.kpi-note{ font-size:.78rem; color:var(--ink-faint); margin:.2rem 0 1.4rem; }

.delta{ font-size:.8rem; font-weight:600; }
.delta.is-up{ color:var(--ok); }
.delta.is-down{ color:var(--critical); }
.delta.is-flat,.delta.is-none{ color:var(--ink-soft); }
.delta-vs{ font-weight:400; color:var(--ink-faint); }

/* The line stays quiet and only the latest point takes the accent. The surface-coloured
   ring keeps the dot legible where it sits on the line. */
.spark{ flex:none; overflow:visible; }
.spark-line{ stroke:var(--ink-faint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.spark-dot{ fill:var(--cyan); stroke:var(--surface); stroke-width:2; }

/* ---------- layout ---------- */

.home-main{ min-width:0; }
.home-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.25rem; align-items:start; margin-bottom:2rem; }
@media (max-width:1180px){ .home-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- board ---------- */

.bd-bar{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.8rem; }
.chips,.bd-filters{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.chip{
	display:inline-block; padding:.3rem .75rem; border-radius:99px; font-size:.8rem; font-weight:600;
	color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); text-decoration:none;
}
.chip:hover{ color:var(--ink); border-color:var(--line-strong); }
.chip.is-on{ background:var(--grad-soft); color:var(--ink); border-color:var(--purple); }
.bd-site{ margin:0; }
.bd-site select{ width:auto; margin:0; padding:.3rem .6rem; font-size:.8rem; border-radius:99px; }

.board{
	display:grid; grid-template-columns:repeat(4,minmax(236px,1fr)); gap:.8rem;
	overflow-x:auto; padding-bottom:.6rem; align-items:stretch;
}

/* Equal-height lanes with a floor, so an empty or short column is still a generous place to
   drop a card — the whole lane is the target, not just the strip its cards happen to fill. */
.bd-col{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:.7rem; min-width:0; min-height:380px; transition:border-color .12s ease;
}
.bd-col.is-over{ border-color:var(--purple); }
.bd-col-head{ display:flex; align-items:center; justify-content:space-between; padding:.1rem .25rem .6rem; }
.bd-col-head h2{ margin:0; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.bd-count{ font-size:.75rem; font-weight:650; color:var(--ink-faint); background:var(--surface-3); padding:.05rem .5rem; border-radius:99px; font-variant-numeric:tabular-nums; }

.bd-cards{ display:flex; flex-direction:column; gap:.55rem; min-height:44px; }
.bd-empty{ margin:0; padding:.7rem; text-align:center; font-size:.8rem; color:var(--ink-faint); border:1px dashed var(--line); border-radius:9px; }
.bd-cards:has(.bd-card) .bd-empty{ display:none; }

.bd-card{
	position:relative; background:var(--surface-3); border:1px solid var(--line-strong);
	border-radius:10px; padding:.65rem .7rem .6rem; box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.bd-card[draggable="true"]{ cursor:grab; }
.bd-card.is-dragging{ opacity:.45; cursor:grabbing; }
.bd-card.prio-2{ border-left:3px solid var(--pink); }
.bd-card.is-done .bd-title{ color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--ink-faint); }

.bd-title{
	font-size:.9rem; font-weight:600; line-height:1.4; color:var(--ink); cursor:pointer;
	word-break:break-word; border-radius:5px; margin-bottom:.45rem;
}
.bd-title:hover{ color:#fff; }

.bd-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:.3rem .4rem; }
.tag{
	font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
	padding:.1rem .45rem; border-radius:5px;
}
.tag-general{ background:rgba(168,85,247,.16); color:#D8B4FE; }
.tag-seo{ background:rgba(34,211,238,.14); color:var(--cyan); }
.tag-ads{ background:rgba(255,61,154,.15); color:#FF8DC4; }

.bd-site-chip,.bd-note{ font-size:.72rem; color:var(--ink-soft); background:var(--surface-2); padding:.1rem .45rem; border-radius:5px; }
.bd-high{ font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--pink); }
.bd-due{ font-size:.72rem; font-weight:600; color:var(--ink-soft); }
.bd-due.is-late{ color:var(--critical); }
.bd-due.is-soon{ color:var(--warning); }
.bd-avatar{
	margin-left:auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
	font-size:.64rem; font-weight:700; background:var(--grad); color:#fff;
}

/* Hidden until the card is hovered or focused, so a column of cards is not a column of
   arrows. Always there on touch screens, where there is no hover and dragging is awkward. */
.bd-move{ position:absolute; top:.35rem; right:.35rem; display:flex; gap:.2rem; opacity:0; transition:opacity .1s ease; }
.bd-card:hover .bd-move,.bd-card:focus-within .bd-move{ opacity:1; }
@media (hover:none){ .bd-move{ opacity:1; position:static; justify-content:flex-end; margin-top:.4rem; } }
.bd-step{
	width:24px; height:24px; border-radius:6px; border:1px solid var(--line-strong);
	background:var(--surface-2); color:var(--ink); font:inherit; font-size:1rem; line-height:1; cursor:pointer;
}
.bd-step:hover{ background:var(--surface); border-color:var(--purple); }

.bd-add{
	width:100%; margin-top:.55rem; padding:.45rem .5rem; text-align:left; font:inherit; font-size:.82rem; font-weight:550;
	color:var(--ink-soft); background:transparent; border:none; border-radius:8px; cursor:pointer;
}
.bd-add:hover{ background:var(--surface-2); color:var(--ink); }
.bd-quick{ margin-top:.55rem; }
.bd-quick textarea{ margin:0 0 .45rem; }
.bd-quick-actions{ display:flex; gap:.4rem; }
.bd-archived{ margin:.6rem .25rem 0; font-size:.76rem; color:var(--ink-faint); }

/* ---------- side rail ---------- */

.rail{ display:flex; flex-direction:column; gap:1.1rem; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.05rem; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.panel-head h2{ margin:0; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.panel-empty{ margin:0; font-size:.88rem; color:var(--ink-soft); }
.panel-empty.is-good{ color:var(--ok); }

.warns,.dues{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.warn{ padding:.7rem .8rem; background:var(--surface-2); border:1px solid var(--line); border-left-width:3px; border-radius:9px; }
.warn.is-critical{ border-left-color:var(--critical); }
.warn.is-warning{ border-left-color:var(--warning); }
.warn.is-info{ border-left-color:var(--info); }
.warn-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.warn-level{ font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.warn.is-critical .warn-level{ color:var(--critical); }
.warn.is-warning .warn-level{ color:var(--warning); }
.warn.is-info .warn-level{ color:var(--info); }
.warn-site{ font-size:.72rem; color:var(--ink-faint); }
.warn-title{ margin:0 0 .2rem; font-size:.88rem; font-weight:600; line-height:1.4; }
.warn-detail{ margin:0 0 .55rem; font-size:.8rem; color:var(--ink-soft); line-height:1.45; }
.warn-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.warn-actions form{ margin:0; }
.tracked{ font-size:.76rem; color:var(--ink-soft); }
.more{ margin-top:.7rem; }
.more summary{ cursor:pointer; font-size:.82rem; font-weight:600; color:var(--cyan); margin-bottom:.7rem; }

.dues li{ display:grid; gap:.1rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.dues li:last-child{ padding-bottom:0; border-bottom:none; }
.due-title{ font-size:.88rem; font-weight:600; line-height:1.4; }
.due-meta{ font-size:.76rem; color:var(--ink-faint); }

/* ---------- card dialog ---------- */

#task-dialog{
	background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:14px;
	padding:0; width:min(560px,calc(100vw - 2rem)); box-shadow:var(--shadow);
}
#task-dialog::backdrop{ background:rgba(4,4,8,.72); }
.dlg-body{ padding:1.3rem 1.4rem 1.4rem; }
.dlg-title{ margin:0 0 1rem; font-size:1.1rem; }
.dlg-fields{ border:none; margin:0; padding:0; min-width:0; }
.dlg-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:520px){ .dlg-row{ grid-template-columns:1fr; } }
#task-dialog input[type=date]{
	width:100%; padding:.58rem .7rem; margin-top:.35rem; background:var(--surface-2); color:var(--ink);
	border:1px solid var(--line-strong); border-radius:8px; font:inherit; font-size:.9rem; color-scheme:dark;
}
.dlg-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
.dlg-actions .btn-danger{ margin-left:auto; }

.toast{
	position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:60;
	background:var(--surface-3); color:var(--ink); border:1px solid var(--critical);
	padding:.65rem 1rem; border-radius:10px; font-size:.88rem; box-shadow:var(--shadow); max-width:calc(100vw - 2rem);
}

@media (prefers-reduced-motion:reduce){
	.bd-col,.bd-move{ transition:none; }
}


/* ---------------------------------------------------------------- Google Ads */

/* Said plainly and kept visible: the point of this integration is that it can only look. */
.ro-badge{
	display:inline-block; vertical-align:middle; margin-left:.5rem;
	font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	padding:.2rem .55rem; border-radius:99px; background:var(--ok-bg); color:var(--ok);
	border:1px solid rgba(45,212,167,.3);
}

.delta.is-neutral{ color:var(--ink-soft); }

/* A figure that is a link to somewhere (the landing page's Ads tile) keeps the tile look. */
a.kpi-link{ display:block; color:inherit; text-decoration:none; }
a.kpi-link:hover{ border-color:var(--line-strong); color:inherit; }

.panel-note{ margin:0 0 .8rem; font-size:.8rem; color:var(--ink-faint); }

/* Recommendations reuse the warning card; only the accent and its label change. */
.warn.is-opportunity{ border-left-color:var(--ok); }
.warn.is-review{ border-left-color:var(--info); }
.warn.is-google{ border-left-color:var(--purple); }
.warn.is-opportunity .warn-level{ color:var(--ok); }
.warn.is-review .warn-level{ color:var(--info); }
.warn.is-google .warn-level{ color:#D8B4FE; }

.ads-checks td{ vertical-align:top; }
.check-mark{ width:2.2rem; font-size:1.05rem; font-weight:700; text-align:center; }
.check-mark.is-ok{ color:var(--ok); }
.check-mark.is-bad{ color:var(--critical); }

.inline-actions{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:1rem 0; }

/* Recommendations laid out as a grid of cards when they have the full width to themselves. */
.rec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:.8rem; }

/* AI insights: the action is the point, so it reads as the main line; the evidence sits beneath it. */
.warn.is-ai{ border-left-color:var(--pink); }
.warn.is-ai .warn-level{ color:var(--pink); }
.warn-action{ margin:0 0 .5rem; font-size:.84rem; line-height:1.5; }
.warn-evidence{ list-style:none; margin:0 0 .55rem; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.warn-evidence li{ font-size:.76rem; color:var(--ink-faint); padding-left:.9rem; position:relative; }
.warn-evidence li::before{ content:""; position:absolute; left:.1rem; top:.55em; width:.35rem; height:.35rem; border-radius:50%; background:var(--line-strong); }
.warn-saving{ margin:0 0 .55rem; font-size:.78rem; font-weight:600; color:var(--ok); }

.chips-tight{ margin:0 0 .8rem; }
.chips-tight .chip{ padding:.2rem .6rem; font-size:.74rem; }
.warn-top .tag{ font-size:.62rem; padding:.05rem .4rem; }

/* ---------- v1.6 polish: fit, flow and phones ---------- */

/* Six headline tiles sit in one row on a wide screen instead of orphaning the last one. */
.kpis{ grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
.kpi-value{ font-size:clamp(1.6rem,1.2rem + 1.2vw,2.15rem); }

/* Four lanes fit beside the warnings rail without the last one being cut off. */
.board{ grid-template-columns:repeat(4,minmax(190px,1fr)); scroll-snap-type:x proximity; }
.bd-col{ scroll-snap-align:start; }

/* What needs doing comes before the board once the layout is a single column. */
@media (max-width:1180px){
	.home-grid > .rail{ order:-1; }
}

/* Google's own generic suggestions sit behind the platform's insights. */
.more-recs{ margin-top:1rem; }
.more-recs > summary{ cursor:pointer; font-weight:600; font-size:.88rem; color:var(--ink-soft); padding:.35rem 0; }
.more-recs > summary:hover{ color:var(--ink); }
.more-recs[open] > summary{ margin-bottom:.6rem; }

@media (max-width:700px){
	.kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
	.kpi{ padding:.8rem .85rem .7rem; }
	.kpi-foot{ flex-wrap:wrap; gap:.3rem; }
	.kpi-foot .spark{ display:none; }
	.board{ grid-template-columns:repeat(4,minmax(78%,1fr)); scroll-snap-type:x mandatory; margin-inline:-.25rem; padding-inline:.25rem; }
	.bd-col{ min-height:200px; }
	.col-trend{ display:none; }
	.rec-grid{ grid-template-columns:minmax(0,1fr); }
	.topnav .areas{ flex:none; }
	.topnav .brand{ font-size:.82rem; }
}

/* The change line and its sparkline stack, so neither is squeezed by the other in a narrow tile. */
.kpi-foot{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.45rem; }
.kpi-foot .delta{ white-space:nowrap; }