/*
  AdHouse Web stylesheet.
  Source of truth: Styles/app.css (Tailwind v4). `dotnet build` regenerates this file when the Tailwind
  standalone CLI is installed (tools/tailwind.ps1 or tools/tailwind.sh); this committed copy is used otherwise.
*/
@layer theme, base, components, utilities;

@layer theme {
  :root {
    --font-sans: "Geist", "Noto Sans Devanagari", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --color-page: #F4F6F9;
    --color-line: #E2E6EE;
    --color-ink: #0F172A;
    --color-muted: #5B6475;
    --color-side: #0B1220;
    --color-side-active: #1B2740;
    --color-side-text: #C9D2E3;
    --color-side-label: #8C97AD;
    --color-accent: #2F5BEA;
    --color-accent-hover: #2249CC;
    --color-accent-bg: #EAF0FD;
    --color-healthy: #12B76A;
    --color-healthy-ink: #067647;
    --color-healthy-bg: #E7F6EE;
    --color-watch: #F79009;
    --color-watch-ink: #B54708;
    --color-watch-bg: #FEF3E2;
    --color-critical: #D92D20;
    --color-critical-ink: #B42318;
    --color-critical-bg: #FDECEC;
    --color-band: #A6EBC6;
    --radius-card: 16px;
    --radius-inner: 14px;
  }
}

@layer base {
  *, ::before, ::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--font-sans); }
  body { background-color: var(--color-page); color: var(--color-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  hr { height: 0; color: inherit; border-top-width: 1px; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; }
  small { font-size: 80%; }
  table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
  button, input, optgroup, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; background-color: transparent; border-radius: 0; opacity: 1; }
  button, [type="button"], [type="reset"], [type="submit"] { appearance: button; cursor: pointer; }
  button:disabled { cursor: default; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  ::placeholder { opacity: 1; color: var(--color-muted); }
  textarea { resize: vertical; }
  summary { display: list-item; }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

@layer components {
  .card { border-radius: var(--radius-card); border: 1px solid var(--color-line); background-color: #fff; }
  .card-pad { padding: 1.25rem; }
  .card-dark { border-radius: var(--radius-card); background-color: var(--color-side); color: var(--color-side-text); }
  .h-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
  .h-section { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
  .eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-muted); }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  .btn {
    display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 0.75rem; padding: 0 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
    transition: color 150ms, background-color 150ms, border-color 150ms;
  }
  .btn:disabled { cursor: not-allowed; opacity: 0.5; }
  .btn-primary { background-color: var(--color-accent); color: #fff; }
  .btn-primary:hover { background-color: var(--color-accent-hover); }
  .btn-secondary { border: 1px solid var(--color-line); background-color: #fff; color: var(--color-ink); }
  .btn-secondary:hover { background-color: var(--color-page); }
  .btn-ghost { color: var(--color-muted); }
  .btn-ghost:hover { background-color: var(--color-page); color: var(--color-ink); }
  .btn-danger { border: 1px solid var(--color-critical-bg); background-color: #fff; color: var(--color-critical-ink); }
  .btn-danger:hover { background-color: var(--color-critical-bg); }

  .link { font-weight: 500; color: var(--color-accent); text-underline-offset: 2px; }
  .link:hover { text-decoration-line: underline; }

  .badge {
    display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; border-radius: 9999px;
    padding: 0.125rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  }
  .dot { display: inline-block; width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 9999px; }

  .field-label { margin-bottom: 0.375rem; display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
  .input {
    display: block; min-height: 2.75rem; width: 100%; border-radius: 0.75rem; border: 1px solid var(--color-line);
    background-color: #fff; padding: 0 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink);
  }
  .input:focus { border-color: var(--color-accent); outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent); }
  .input:disabled { background-color: var(--color-page); cursor: not-allowed; }
  .field-error { margin-top: 0.25rem; display: block; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-critical-ink); }
  .field-error:empty { display: none; }

  .table-wrap { margin-left: -1.25rem; margin-right: -1.25rem; overflow-x: auto; }
  .table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.875rem; line-height: 1.25rem; }
  .table th {
    border-bottom: 1px solid var(--color-line); padding: 0.75rem 1.25rem; text-align: left;
    font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-muted);
  }
  .table td { border-bottom: 1px solid var(--color-line); padding: 1rem 1.25rem; vertical-align: top; }
  .table tr:last-child td { border-bottom-width: 0; }

  .tab {
    display: inline-flex; min-height: 2.75rem; align-items: center; border-radius: 0.75rem; padding: 0 0.75rem;
    font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-muted);
  }
  .tab:hover { color: var(--color-ink); }
  .tab[aria-current="page"], .tab[aria-pressed="true"] {
    background-color: #fff; color: var(--color-ink);
    box-shadow: 0 0 0 1px var(--color-line), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  .nav-item {
    display: flex; min-height: 2.75rem; align-items: center; gap: 0.75rem; border-radius: 0.75rem; padding: 0 0.75rem;
    font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-side-text);
  }
  .nav-item:hover, .nav-item[aria-current="page"] { background-color: var(--color-side-active); color: #fff; }

  @media (min-width: 40rem) {
    .card-pad { padding: 1.5rem; }
    .h-title { font-size: 1.875rem; line-height: 2.25rem; }
    .table-wrap { margin-left: -1.5rem; margin-right: -1.5rem; }
    .table th, .table td { padding-left: 1.5rem; padding-right: 1.5rem; }
  }
}

@layer utilities {
.-left-\[21px\]{left:calc(21px * -1)}
.-m-1{margin:calc(0.25rem * -1)}
.-rotate-90{rotate:-90deg}
.-translate-x-1\/2{--tw-translate-x:calc(50% * -1);translate:var(--tw-translate-x,0) var(--tw-translate-y,0)}
.-translate-y-1\/2{--tw-translate-y:calc(50% * -1);translate:var(--tw-translate-x,0) var(--tw-translate-y,0)}
.absolute{position:absolute}
.accent-accent{accent-color:var(--color-accent)}
.bg-accent{background-color:var(--color-accent)}
.bg-accent-bg{background-color:var(--color-accent-bg)}
.bg-accent\/80{background-color:color-mix(in srgb,var(--color-accent) 80%,transparent)}
.bg-band{background-color:var(--color-band)}
.bg-critical{background-color:var(--color-critical)}
.bg-critical-bg{background-color:var(--color-critical-bg)}
.bg-healthy{background-color:var(--color-healthy)}
.bg-healthy-bg{background-color:var(--color-healthy-bg)}
.bg-line{background-color:var(--color-line)}
.bg-page{background-color:var(--color-page)}
.bg-side{background-color:var(--color-side)}
.bg-side-active\/60{background-color:color-mix(in srgb,var(--color-side-active) 60%,transparent)}
.bg-watch{background-color:var(--color-watch)}
.bg-watch-bg{background-color:var(--color-watch-bg)}
.bg-white{background-color:#fff}
.block{display:block}
.border{border-width:1px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-critical-bg{border-color:var(--color-critical-bg)}
.border-l{border-left-width:1px;border-left-style:solid}
.border-line{border-color:var(--color-line)}
.border-side-active{border-color:var(--color-side-active)}
.border-t{border-top-width:1px;border-top-style:solid}
.bottom-4{bottom:1rem}
.break-words{overflow-wrap:break-word}
.cursor-not-allowed{cursor:not-allowed}
.cursor-pointer{cursor:pointer}
.divide-line>*{border-color:var(--color-line)}
.divide-y>:not(:last-child){border-bottom-width:1px;border-bottom-style:solid}
.fill-accent\/80{fill:color-mix(in srgb,var(--color-accent) 80%,transparent)}
.fill-critical{fill:var(--color-critical)}
.fill-healthy{fill:var(--color-healthy)}
.fill-muted{fill:var(--color-muted)}
.fill-watch{fill:var(--color-watch)}
.fixed{position:fixed}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-col-reverse{flex-direction:column-reverse}
.flex-wrap{flex-wrap:wrap}
.font-medium{font-weight:500}
.font-mono{font-family:var(--font-mono)}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-2{gap:0.5rem}
.gap-2\.5{gap:0.625rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-x-2{column-gap:0.5rem}
.gap-x-4{column-gap:1rem}
.gap-y-1{row-gap:0.25rem}
.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.h-1\.5{height:0.375rem}
.h-2{height:0.5rem}
.h-3{height:0.75rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.h-auto{height:auto}
.h-full{height:100%}
.hidden{display:none}
.inline{display:inline}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.inset-0{inset:0}
.inset-x-0{left:0;right:0}
.inset-x-4{left:1rem;right:1rem}
.italic{font-style:italic}
.items-baseline{align-items:baseline}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.leading-relaxed{line-height:1.625}
.left-0\.5{left:0.125rem}
.line-through{text-decoration-line:line-through}
.list-decimal{list-style-type:decimal}
.list-disc{list-style-type:disc}
.max-h-48{max-height:12rem}
.max-h-60{max-height:15rem}
.max-h-96{max-height:24rem}
.max-h-\[60vh\]{max-height:60vh}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-56{max-width:14rem}
.max-w-72{max-width:18rem}
.max-w-80{max-width:20rem}
.max-w-\[1248px\]{max-width:1248px}
.max-w-\[80\%\]{max-width:80%}
.max-w-md{max-width:28rem}
.max-w-sm{max-width:24rem}
.mb-2{margin-bottom:0.5rem}
.mb-8{margin-bottom:2rem}
.min-h-11{min-height:2.75rem}
.min-h-24{min-height:6rem}
.min-h-48{min-height:12rem}
.min-h-8{min-height:2rem}
.min-h-dvh{min-height:100dvh}
.min-w-0{min-width:0}
.min-w-44{min-width:11rem}
.min-w-64{min-width:16rem}
.min-w-8{min-width:2rem}
.min-w-\[1040px\]{min-width:1040px}
.min-w-\[600px\]{min-width:600px}
.min-w-\[640px\]{min-width:640px}
.min-w-\[880px\]{min-width:880px}
.min-w-\[900px\]{min-width:900px}
.ml-2{margin-left:0.5rem}
.ml-3{margin-left:0.75rem}
.ml-auto{margin-left:auto}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-1\.5{margin-top:0.375rem}
.mt-10{margin-top:2.5rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-auto{margin-top:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.object-contain{object-fit:contain}
.opacity-60{opacity:0.6}
.opacity-80{opacity:0.8}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.p-1{padding:0.25rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.pb-16{padding-bottom:4rem}
.pl-4{padding-left:1rem}
.pl-5{padding-left:1.25rem}
.pointer-events-auto{pointer-events:auto}
.pointer-events-none{pointer-events:none}
.pt-4{padding-top:1rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.relative{position:relative}
.ring-1{--tw-ring-shadow:0 0 0 1px var(--tw-ring-color,currentColor);box-shadow:var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow,0 0 #0000)}
.ring-2{--tw-ring-shadow:0 0 0 2px var(--tw-ring-color,currentColor);box-shadow:var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow,0 0 #0000)}
.ring-4{--tw-ring-shadow:0 0 0 4px var(--tw-ring-color,currentColor);box-shadow:var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow,0 0 #0000)}
.ring-line{--tw-ring-color:var(--color-line)}
.ring-white{--tw-ring-color:#fff}
.rounded{border-radius:0.25rem}
.rounded-2xl{border-radius:1rem}
.rounded-\[10px\]{border-radius:10px}
.rounded-full{border-radius:9999px}
.rounded-inner{border-radius:var(--radius-inner)}
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.scroll-mt-6{scroll-margin-top:1.5rem}
.select-all{user-select:all}
.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);box-shadow:var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow,0 0 #0000)}
.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);box-shadow:var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow,0 0 #0000)}
.shrink-0{flex-shrink:0}
.size-11{width:2.75rem;height:2.75rem}
.size-12{width:3rem;height:3rem}
.size-3{width:0.75rem;height:0.75rem}
.size-36{width:9rem;height:9rem}
.size-4{width:1rem;height:1rem}
.size-5{width:1.25rem;height:1.25rem}
.size-6{width:1.5rem;height:1.5rem}
.size-7{width:1.75rem;height:1.75rem}
.size-9{width:2.25rem;height:2.25rem}
.size-full{width:100%;height:100%}
.space-y-1>:not(:last-child){margin-bottom:0.25rem}
.space-y-2>:not(:last-child){margin-bottom:0.5rem}
.space-y-2\.5>:not(:last-child){margin-bottom:0.625rem}
.space-y-3>:not(:last-child){margin-bottom:0.75rem}
.space-y-4>:not(:last-child){margin-bottom:1rem}
.space-y-5>:not(:last-child){margin-bottom:1.25rem}
.space-y-6>:not(:last-child){margin-bottom:1.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.stroke-accent{stroke:var(--color-accent)}
.stroke-critical{stroke:var(--color-critical)}
.stroke-healthy{stroke:var(--color-healthy)}
.stroke-line{stroke:var(--color-line)}
.stroke-muted{stroke:var(--color-muted)}
.stroke-page{stroke:var(--color-page)}
.stroke-watch{stroke:var(--color-watch)}
.table{display:table}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-\[11px\]{font-size:11px}
.text-accent{color:var(--color-accent)}
.text-band{color:var(--color-band)}
.text-center{text-align:center}
.text-critical-ink{color:var(--color-critical-ink)}
.text-healthy-ink{color:var(--color-healthy-ink)}
.text-ink{color:var(--color-ink)}
.text-left{text-align:left}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-muted{color:var(--color-muted)}
.text-right{text-align:right}
.text-side-label{color:var(--color-side-label)}
.text-side-text{color:var(--color-side-text)}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-watch-ink{color:var(--color-watch-ink)}
.text-white{color:#fff}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.top-1\.5{top:0.375rem}
.top-1\/2{top:50%}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wide{letter-spacing:0.025em}
.transition-colors{transition-property:color,background-color,border-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.underline-offset-2{text-underline-offset:2px}
.uppercase{text-transform:uppercase}
.w-11{width:2.75rem}
.w-28{width:7rem}
.w-32{width:8rem}
.w-36{width:9rem}
.w-4{width:1rem}
.w-48{width:12rem}
.w-5{width:1.25rem}
.w-auto{width:auto}
.w-full{width:100%}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-line{white-space:pre-line}
.z-50{z-index:50}
.first\:border-t-0:first-child{border-top-width:0}
.first\:pt-0:first-child{padding-top:0}
.focus\:bg-white:focus{background-color:#fff}
.focus\:fixed:focus{position:fixed}
.focus\:left-4:focus{left:1rem}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}
.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}
.focus\:py-3:focus{padding-top:0.75rem;padding-bottom:0.75rem}
.focus\:rounded-xl:focus{border-radius:0.75rem}
.focus\:top-4:focus{top:1rem}
.focus\:z-50:focus{z-index:50}
.hover\:bg-page:hover{background-color:var(--color-page)}
.hover\:bg-page\/60:hover{background-color:color-mix(in srgb,var(--color-page) 60%,transparent)}
.hover\:bg-side-active:hover{background-color:var(--color-side-active)}
.hover\:border-accent:hover{border-color:var(--color-accent)}
.hover\:text-accent:hover{color:var(--color-accent)}
.hover\:text-ink:hover{color:var(--color-ink)}
.hover\:text-white:hover{color:#fff}
.hover\:underline:hover{text-decoration-line:underline}
.last\:pb-0:last-child{padding-bottom:0}
.peer:checked~.peer-checked\:bg-accent{background-color:var(--color-accent)}
.peer:checked~.peer-checked\:translate-x-5{--tw-translate-x:1.25rem;translate:var(--tw-translate-x,0) var(--tw-translate-y,0)}
.peer:focus-visible~.peer-focus-visible\:outline-2{outline-style:solid;outline-width:2px}
.peer:focus-visible~.peer-focus-visible\:outline-accent{outline-color:var(--color-accent)}
.peer:focus-visible~.peer-focus-visible\:outline-offset-2{outline-offset:2px}
@media (min-width:40rem){
.sm\:col-span-2{grid-column:span 2/span 2}
.sm\:divide-x>:not(:last-child){border-right-width:1px;border-right-style:solid}
.sm\:divide-y-0>:not(:last-child){border-bottom-width:0}
.sm\:flex-row{flex-direction:row}
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm\:inset-x-auto{left:auto;right:auto}
.sm\:items-center{align-items:center}
.sm\:items-end{align-items:flex-end}
.sm\:items-start{align-items:flex-start}
.sm\:justify-between{justify-content:space-between}
.sm\:p-5{padding:1.25rem}
.sm\:p-6{padding:1.5rem}
.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
.sm\:right-6{right:1.5rem}
.sm\:w-fit{width:fit-content}
}
@media (min-width:48rem){
.md\:flex-row{flex-direction:row}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:items-center{align-items:center}
.md\:justify-between{justify-content:space-between}
}
@media (min-width:64rem){
.lg\:block{display:block}
.lg\:col-span-2{grid-column:span 2/span 2}
.lg\:col-span-3{grid-column:span 3/span 3}
.lg\:col-span-5{grid-column:span 5/span 5}
.lg\:divide-x>:not(:last-child){border-right-width:1px;border-right-style:solid}
.lg\:fixed{position:fixed}
.lg\:flex{display:flex}
.lg\:flex-row{flex-direction:row}
.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg\:grid-cols-\[22rem_1fr\]{grid-template-columns:22rem 1fr}
.lg\:grid-cols-\[minmax\(0\,2fr\)_repeat\(4\,minmax\(0\,1fr\)\)\]{grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr))}
.lg\:hidden{display:none}
.lg\:inset-y-0{top:0;bottom:0}
.lg\:items-center{align-items:center}
.lg\:items-end{align-items:flex-end}
.lg\:items-start{align-items:flex-start}
.lg\:justify-between{justify-content:space-between}
.lg\:overflow-y-auto{overflow-y:auto}
.lg\:pl-64{padding-left:16rem}
.lg\:w-64{width:16rem}
.lg\:w-fit{width:fit-content}
}
}

/* Toasts (site.js): one card per action result. Success and info close by themselves (paused while hovered);
   warnings and errors stay until closed, so long Meta messages can be read. */
.toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  width: min(24rem, 100%);
  align-items: flex-start;
  gap: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-left-width: 4px;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.875rem 0.75rem 0.875rem 0.875rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 12px 28px -8px rgb(15 23 42 / 0.2), 0 4px 8px -4px rgb(15 23 42 / 0.1);
  animation: toast-in 180ms ease-out;
}

.toast-success { border-left-color: var(--color-healthy); }
.toast-info { border-left-color: var(--color-accent); }
.toast-warning { border-left-color: var(--color-watch); }
.toast-error { border-left-color: var(--color-critical); }

.toast-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.toast-success .toast-icon { background: var(--color-healthy-bg); color: var(--color-healthy-ink); }
.toast-info .toast-icon { background: var(--color-accent-bg); color: var(--color-accent); }
.toast-warning .toast-icon { background: var(--color-watch-bg); color: var(--color-watch-ink); }
.toast-error .toast-icon { background: var(--color-critical-bg); color: var(--color-critical-ink); }

.toast-body { min-width: 0; flex: 1; }
.toast-title { font-weight: 600; }
.toast-message { margin-top: 0.125rem; color: var(--color-muted); overflow-wrap: anywhere; }

.toast-close {
  margin: -0.375rem -0.25rem 0 0;
  min-width: 2rem;
  min-height: 2rem;
  flex: none;
  border-radius: 0.5rem;
  color: var(--color-muted);
  font-size: 1.125rem;
  line-height: 1;
}

.toast-close:hover { background: var(--color-page); color: var(--color-ink); }

/* Time left before the toast closes. */
.toast-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  opacity: 0.35;
  animation: toast-timer linear forwards;
}

.toast-success .toast-timer { background: var(--color-healthy); }
.toast-info .toast-timer { background: var(--color-accent); }
.toast:hover .toast-timer,
.toast:focus-within .toast-timer { animation-play-state: paused; }
.toast-leaving { animation: toast-out 160ms ease-in forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(1rem); } }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Busy buttons (site.js): a spinner while the action runs; more clicks do nothing. */
.btn.is-busy { pointer-events: none; cursor: progress; opacity: 0.8; }

.btn.is-busy::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: busy-spin 700ms linear infinite;
}

@keyframes busy-spin { to { transform: rotate(360deg); } }

/* Page tabs (Messages): one tab per Facebook Page; scrolls sideways when there are many. */
.page-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--color-line);
  scrollbar-width: thin;
}

.page-tab {
  display: inline-flex;
  min-height: 2.75rem;
  max-width: 16rem;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  padding: 0 0.875rem;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.page-tab:hover { color: var(--color-ink); border-bottom-color: var(--color-line); }
.page-tab[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.page-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 0.5rem 0.5rem 0 0; }
.page-tab-name { overflow: hidden; text-overflow: ellipsis; }

.page-tab-count {
  min-width: 1.25rem;
  border-radius: 9999px;
  background: var(--color-accent);
  padding: 0 0.375rem;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
}

.page-tab-ig {
  border-radius: 0.375rem;
  background: var(--color-page);
  padding: 0 0.3rem;
  color: var(--color-muted);
  font-size: 0.6875rem;
  line-height: 1.125rem;
}

/* Messages: chats on the left, the open chat on the right. Phones show one pane at a time. */
/* Pages that fill the window (Messages) drop the usual bottom padding. */
main.main-fill { padding-bottom: 1rem; }
.inbox {
  display: grid;
  /* Down to the bottom of the window; site.js measures what sits above it (--inbox-top). */
  height: max(28rem, calc(100dvh - var(--inbox-top, 12rem) - 1rem));
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background: #fff;
}

@media (min-width: 1024px) {
  .inbox { grid-template-columns: 22rem minmax(0, 1fr); }
  .inbox-list { border-right: 1px solid var(--color-line); }
}

@media (max-width: 1023.98px) {
  .inbox-open .inbox-list,
  .inbox:not(.inbox-open) .inbox-thread { display: none; }
}

.inbox-list,
.inbox-thread { display: flex; min-width: 0; min-height: 0; flex-direction: column; }

/* Chat list header: title, search, All / Unread. */
.inbox-list-head { display: grid; gap: 0.75rem; border-bottom: 1px solid var(--color-line); padding: 1rem; }
.inbox-pane-title { font-size: 1rem; font-weight: 600; }
.inbox-search { position: relative; }

.inbox-search-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}

.inbox-search-input {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--color-page);
  padding: 0 0.875rem 0 2.25rem;
  color: var(--color-ink);
  font-size: 0.875rem;
}

.inbox-search-input::placeholder { color: var(--color-muted); }
.inbox-search-input:focus { outline: none; border-color: var(--color-accent); background: #fff; box-shadow: 0 0 0 3px var(--color-accent-bg); }

.inbox-filter {
  display: inline-grid;
  width: max-content;
  grid-auto-flow: column;
  gap: 0.25rem;
  border-radius: 9999px;
  background: var(--color-page);
  padding: 0.25rem;
}

.inbox-filter a {
  border-radius: 9999px;
  padding: 0.3rem 0.9rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.inbox-filter a:hover { color: var(--color-ink); }
.inbox-filter a[aria-current="page"] { background: #fff; color: var(--color-ink); box-shadow: 0 1px 2px rgb(15 23 42 / 0.12); }
.inbox-list-body { min-height: 0; flex: 1; overflow-y: auto; }

/* One chat in the list. */
.chat-list { padding: 0.375rem; }

.chat-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
}

.chat-item:hover { background: var(--color-page); }
.chat-item[aria-current="true"] { background: var(--color-accent-bg); }
.chat-item-main { display: grid; min-width: 0; flex: 1; gap: 0.125rem; }
.chat-item-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 0.5rem; }
.chat-item-name { overflow: hidden; font-size: 0.9375rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-time { flex: none; color: var(--color-muted); font-size: 0.75rem; }
.chat-item-snippet { overflow: hidden; color: var(--color-muted); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-meta { display: flex; flex-wrap: wrap; gap: 0 0.5rem; color: var(--color-muted); font-size: 0.75rem; }
.chat-item-meta span + span::before { content: "·"; margin-right: 0.5rem; }
.chat-item.is-unread .chat-item-name { font-weight: 700; }
.chat-item.is-unread .chat-item-snippet { color: var(--color-ink); font-weight: 500; }
.chat-item.is-unread .chat-item-time { color: var(--color-accent); font-weight: 600; }

.chat-unread {
  min-width: 1.25rem;
  flex: none;
  border-radius: 9999px;
  background: var(--color-accent);
  padding: 0 0.375rem;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
}

.chat-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--color-line);
  padding: 0.75rem 1rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.chat-pager a { color: var(--color-accent); font-weight: 500; }

/* Avatars: initials in one of six tones, with the channel in the corner. */
.avatar {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.avatar-1 { background: #E0E9FF; color: #2747B8; }
.avatar-2 { background: #DDF4E7; color: #0E7146; }
.avatar-3 { background: #FDE8D7; color: #A3480B; }
.avatar-4 { background: #F3E1FB; color: #7A2E99; }
.avatar-5 { background: #FCE1E7; color: #AD1F4A; }
.avatar-6 { background: #DCF2F6; color: #0B6676; }

.avatar-channel {
  position: absolute;
  right: -0.125rem;
  bottom: -0.125rem;
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 9999px;
  color: #fff;
}

.avatar-channel svg { width: 0.625rem; height: 0.625rem; }
.avatar-channel-fb { background: #0A7CFF; }
.avatar-channel-ig { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }

/* Empty states. */
.inbox-empty { padding: 3rem 1.5rem; text-align: center; }
.inbox-empty-title,
.inbox-placeholder-title { font-weight: 600; }
.inbox-empty-text,
.inbox-placeholder-text { margin-top: 0.25rem; color: var(--color-muted); font-size: 0.875rem; }

.inbox-placeholder {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--color-page);
  text-align: center;
}

.inbox-placeholder-icon { width: 3rem; height: 3rem; margin-bottom: 0.75rem; color: var(--color-line); }
.inbox-placeholder-text { max-width: 22rem; }

/* The open chat. */
.chat { display: flex; min-height: 0; flex: 1; flex-direction: column; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-line);
  padding: 0.75rem 1rem;
}

.chat-head .avatar { width: 2.5rem; height: 2.5rem; }
.chat-head-main { min-width: 0; flex: 1; }
.chat-head-name { overflow: hidden; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-meta { overflow: hidden; color: var(--color-muted); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }

.chat-back {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-left: -0.375rem;
  border-radius: 9999px;
  color: var(--color-ink);
}

.chat-back svg { width: 1.25rem; height: 1.25rem; }
.chat-back:hover { background: var(--color-page); }

@media (min-width: 1024px) {
  .chat-back { display: none; }
}

.chat-chip {
  flex: none;
  border-radius: 9999px;
  background: var(--color-page);
  padding: 0.25rem 0.625rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.chat-chip-closed { background: var(--color-watch-bg); color: var(--color-watch-ink); }

@media (max-width: 639.98px) {
  .chat-chip { display: none; }
}

/* Messages: column-reverse keeps the scroll at the newest. */
.chat-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column-reverse;
  overflow-y: auto;
  background: var(--color-page);
  padding: 1rem 1.25rem;
}

.chat-messages { display: flex; flex-direction: column; }

.chat-day {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0.5rem;
}

.chat-day span {
  border-radius: 9999px;
  background: #fff;
  padding: 0.2rem 0.75rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.msg { display: flex; max-width: min(36rem, 80%); flex-direction: column; margin-top: 0.75rem; }
.msg-grouped { margin-top: 0.1875rem; }
.msg-in { align-self: flex-start; align-items: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }

.msg-bubble {
  border-radius: 1.125rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.msg-in .msg-bubble { border-bottom-left-radius: 0.375rem; background: #fff; color: var(--color-ink); box-shadow: 0 1px 1px rgb(15 23 42 / 0.06); }
.msg-out .msg-bubble { border-bottom-right-radius: 0.375rem; background: var(--color-accent); color: #fff; }
.msg-text { white-space: pre-line; }
.msg-attachment { font-style: italic; opacity: 0.85; }
.msg-text + .msg-attachment { margin-top: 0.25rem; }
.msg-meta { margin-top: 0.1875rem; padding: 0 0.375rem; color: var(--color-muted); font-size: 0.6875rem; }

/* Reply box. */
.chat-foot { border-top: 1px solid var(--color-line); background: #fff; padding: 0.75rem 1rem; }
.chat-notice { color: var(--color-muted); font-size: 0.875rem; line-height: 1.5; }

.composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 1.5rem;
  background: var(--color-page);
  padding: 0.375rem 0.375rem 0.375rem 1rem;
}

.composer:focus-within { border-color: var(--color-accent); background: #fff; box-shadow: 0 0 0 3px var(--color-accent-bg); }

.composer-input {
  min-height: 2.25rem;
  max-height: 10rem;
  flex: 1;
  resize: none;
  border: 0;
  background: transparent;
  padding: 0.5rem 0;
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.composer-input:focus { outline: none; }

.composer-send {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-accent);
  color: #fff;
}

.composer-send svg { width: 1.125rem; height: 1.125rem; }
.composer-send:hover { background: var(--color-accent-hover); }
.composer-send:disabled { cursor: progress; opacity: 0.6; }
.composer-hint { margin-top: 0.375rem; padding: 0 0.5rem; color: var(--color-muted); font-size: 0.75rem; }

.composer-hint kbd {
  border: 1px solid var(--color-line);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
}

@media (max-width: 639.98px) {
  .composer-hint { display: none; }
}

/* Manage Pages: last tab, pushed to the right. */
.page-tab-manage { margin-left: auto; }
.page-tab-icon { width: 1rem; height: 1rem; flex: none; }
.page-tab-count-watch { background: var(--color-watch); }

/* The selected Page under the tabs: name, channels, last check and Turn off. */
.page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.25rem 0;
}

.page-bar-info { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; color: var(--color-muted); font-size: 0.8125rem; }
.page-bar-info span + span::before { content: "·"; margin-right: 0.5rem; }
.page-bar-name { color: var(--color-ink); font-weight: 600; }

.page-bar-action {
  min-height: 2rem;
  border: 1px solid var(--color-line);
  border-radius: 9999px;
  background: #fff;
  padding: 0 0.875rem;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

.page-bar-action:hover { border-color: var(--color-critical); color: var(--color-critical-ink); }
.page-bar-error { margin-top: 0.5rem; border-radius: 0.75rem; background: var(--color-critical-bg); padding: 0.5rem 0.75rem; color: var(--color-critical-ink); font-size: 0.8125rem; }

/* Confirmation dialog (site.js, data-confirm): a centred card over a dimmed page. */
.confirm-dialog {
  width: min(28rem, calc(100vw - 2rem));
  margin: auto;
  border: 0;
  border-radius: 1rem;
  background: #fff;
  padding: 0;
  color: var(--color-ink);
  box-shadow: 0 24px 48px -12px rgb(15 23 42 / 0.35);
}

.confirm-dialog::backdrop { background: rgb(15 23 42 / 0.45); backdrop-filter: blur(2px); }
.confirm-dialog[open] { animation: confirm-in 160ms ease-out; }

@keyframes confirm-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } }

.confirm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.5rem; }

.confirm-icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-size: 1.125rem;
  font-weight: 700;
}

.confirm-icon::before { content: "?"; }
.confirm-danger .confirm-icon { background: var(--color-critical-bg); color: var(--color-critical-ink); }
.confirm-danger .confirm-icon::before { content: "!"; }
.confirm-dialog .btn-danger { border-color: transparent; background: var(--color-critical); color: #fff; }
.confirm-dialog .btn-danger:hover { background: var(--color-critical-ink); }
.confirm-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.confirm-text { margin-top: 0.375rem; color: var(--color-muted); font-size: 0.875rem; line-height: 1.5; }

.confirm-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

@media (max-width: 479.98px) {
  .confirm-actions .btn { flex: 1; }
}

/* Meta token permissions (_MetaPermissions): one row per group, permissions as tags. */
.perm-groups { display: grid; gap: 0.5rem; }
.perm-group { border: 1px solid var(--color-line); border-radius: 0.75rem; background: #fff; padding: 0.625rem 0.75rem; }
.perm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.perm-name { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); }
.perm-need { min-width: 0; flex: 1; color: var(--color-muted); font-size: 0.75rem; }

.perm-badge {
  border-radius: 9999px;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.perm-required { background: var(--color-accent-bg); color: var(--color-accent); }
.perm-optional { background: var(--color-page); color: var(--color-muted); }

.perm-copy {
  border-radius: 0.5rem;
  padding: 0.125rem 0.5rem;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 500;
}

.perm-copy:hover { background: var(--color-accent-bg); }
.perm-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }

.perm-chip {
  display: inline-block;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background: var(--color-page);
  padding: 0.125rem 0.5rem;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: help;
}

.perm-note { color: var(--color-muted); font-size: 0.75rem; line-height: 1.5; }
.perm-note code { font-family: var(--font-mono); }
.perm-details { margin-top: 1rem; border-top: 1px solid var(--color-line); padding-top: 0.75rem; }
.perm-details > summary { cursor: pointer; font-size: 0.875rem; font-weight: 500; }

/* Ad health: a Page's posts that run as ads, read from the Page (_PageAdPosts). */
.page-ads-notice { border: 1px solid var(--color-accent-bg); border-radius: 1rem; background: var(--color-accent-bg); padding: 1rem 1.25rem; color: var(--color-ink); }
.page-ads-empty { margin-top: 1rem; border: 1px dashed var(--color-line); border-radius: 1rem; background: #fff; padding: 2rem 1.5rem; color: var(--color-muted); font-size: 0.875rem; text-align: center; }
.page-ads-error { margin-top: 1rem; border-radius: 1rem; background: var(--color-critical-bg); padding: 1rem 1.25rem; color: var(--color-critical-ink); font-size: 0.875rem; line-height: 1.5; }
.page-ads-grid { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

.page-ad {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background: #fff;
}

.page-ad-image { width: 100%; aspect-ratio: 1.91 / 1; background: var(--color-page); object-fit: cover; }
.page-ad-noimage { display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 0.8125rem; }
.page-ad-noimage[hidden] { display: none; }
.page-ad-body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1rem 1rem; }
.page-ad-date { color: var(--color-muted); font-size: 0.75rem; }

.page-ad-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.page-ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: 0.5rem; margin-top: auto; border-top: 1px solid var(--color-line); padding-top: 0.625rem; }
.page-ad-stats dt { color: var(--color-muted); font-size: 0.6875rem; }
.page-ad-stats dd { font-size: 0.9375rem; font-weight: 600; }
.page-ad-link { font-size: 0.8125rem; }

/* Messages → Manage Pages: title on the left, "Find Pages again" on the right. */
.manage-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; }
.manage-hint { margin-top: 0.25rem; color: var(--color-muted); font-size: 0.875rem; }
.btn-icon { width: 1rem; height: 1rem; flex: none; }

/* Settings → Connections: when it was connected, and what it gives access to. */
.connection-meta { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin-top: 0.125rem; color: var(--color-muted); font-size: 0.875rem; }
.connection-meta span + span::before { content: "·"; margin-right: 0.5rem; }
.connection-meta time { color: var(--color-ink); cursor: help; }
.connection-counts { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.connection-counts li { border-radius: 9999px; background: var(--color-page); padding: 0.125rem 0.625rem; color: var(--color-ink); font-size: 0.8125rem; }
.connection-counts .num { font-weight: 600; }
.connection-counts .connection-count-watch { background: var(--color-watch-bg); color: var(--color-watch-ink); }
.connection-count-watch a:hover { text-decoration: underline; }

/* A tab row with "Sync all" (or another action) at its right end. The tabs take the room; the button keeps its size. */
.tab-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tab-row > nav { min-width: 0; }
.tab-row > .page-tabs { flex: 1; }
.tab-row > .btn { flex: none; }

/* Connection rename (Settings) and the chosen connection's summary (Ad accounts). */
.connection-rename { margin-top: 0.5rem; }
.connection-rename > summary { display: inline-block; cursor: pointer; color: var(--color-accent); font-size: 0.8125rem; font-weight: 500; }
.connection-rename > summary:hover { text-decoration: underline; }
.connection-rename-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.connection-rename-form .input { min-width: 0; flex: 1 1 14rem; }
.connection-summary { margin-top: 1rem; border: 1px solid var(--color-line); border-radius: 0.75rem; background: var(--color-page); padding: 0.75rem 1rem; }
.connection-summary-name { font-weight: 600; }
.connection-summary .connection-counts li { background: #fff; }

/* Rich dropdown (site.js, select[data-fancy]): a button showing the choice and a list of detailed options. */
.fancy-select { position: relative; width: min(30rem, 100%); }

.fancy-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.fancy-trigger {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  background: #fff;
  padding: 0.5rem 0.75rem;
  text-align: left;
  transition: border-color 150ms, box-shadow 150ms;
}

.fancy-trigger:hover { border-color: #C9D0DC; }
.fancy-trigger:focus-visible,
.fancy-select.is-open .fancy-trigger { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-bg); }
.fancy-value { min-width: 0; flex: 1; }
.fancy-chevron { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-muted); transition: transform 150ms; }
.fancy-select.is-open .fancy-chevron { transform: rotate(180deg); }

.fancy-list {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 40;
  width: max(100%, 22rem);
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  background: #fff;
  padding: 0.375rem;
  box-shadow: 0 18px 40px -12px rgb(15 23 42 / 0.25), 0 4px 10px -4px rgb(15 23 42 / 0.1);
  animation: fancy-in 120ms ease-out;
}

.fancy-list:focus { outline: none; }

@keyframes fancy-in { from { opacity: 0; transform: translateY(-0.25rem); } }

.fancy-option { position: relative; cursor: pointer; border-radius: 0.625rem; padding: 0.625rem 2.25rem 0.625rem 0.625rem; }
.fancy-option.is-active { background: var(--color-page); }
.fancy-option[aria-selected="true"] { background: var(--color-accent-bg); }

.fancy-option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.875rem;
  width: 0.4rem;
  height: 0.75rem;
  border: solid var(--color-accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}

.fancy-row { display: flex; min-width: 0; align-items: flex-start; gap: 0.75rem; }

.fancy-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: #0A7CFF;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.fancy-text { display: grid; min-width: 0; gap: 0.125rem; }
.fancy-title { overflow: hidden; color: var(--color-ink); font-size: 0.875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fancy-placeholder { color: var(--color-muted); font-weight: 400; }
.fancy-meta { overflow: hidden; color: var(--color-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.fancy-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.fancy-chip { border-radius: 9999px; background: var(--color-page); padding: 0 0.5rem; color: var(--color-ink); font-size: 0.6875rem; line-height: 1.25rem; }
.fancy-option[aria-selected="true"] .fancy-chip { background: #fff; }
.fancy-chip-warn { background: var(--color-watch-bg); color: var(--color-watch-ink); }

/* Guidance card for a refusal (_ProblemHelp): headline, what we found, numbered steps, note. */
.help-card { border: 1px solid #F5D9A8; border-radius: 1rem; background: #FFFBF3; padding: 1rem 1.25rem; color: var(--color-ink); font-size: 0.875rem; line-height: 1.5; }
.help-card-head { display: flex; align-items: center; gap: 0.625rem; }
.help-card-icon { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: none; align-items: center; justify-content: center; border-radius: 9999px; background: var(--color-watch-bg); color: var(--color-watch-ink); font-size: 0.8125rem; font-weight: 700; }
.help-card-title { font-size: 0.9375rem; font-weight: 600; }
.help-card-section { margin-top: 0.75rem; padding-left: 2.125rem; }
.help-card-label { margin-bottom: 0.125rem; color: var(--color-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.help-card-steps { display: grid; gap: 0.375rem; counter-reset: step; }
.help-card-steps li { position: relative; padding-left: 1.75rem; counter-increment: step; }
.help-card-steps li::before { content: counter(step); position: absolute; top: 0.0625rem; left: 0; display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: 9999px; background: #fff; box-shadow: inset 0 0 0 1px #F5D9A8; color: var(--color-watch-ink); font-size: 0.6875rem; font-weight: 600; }
.help-card-note { margin: 0.875rem 0 0 2.125rem; border-top: 1px solid #F5E6CC; padding-top: 0.625rem; color: var(--color-muted); font-size: 0.8125rem; }

/* Settings → Workspace: which Pages the workspace covers. */
.scope-status { margin-top: 0.75rem; border-radius: 0.75rem; background: var(--color-page); padding: 0.5rem 0.75rem; color: var(--color-muted); font-size: 0.8125rem; }
.scope-status-on { background: var(--color-accent-bg); color: var(--color-accent); font-weight: 500; }
.scope-list { display: grid; gap: 0.5rem; }
.scope-option { display: flex; cursor: pointer; align-items: flex-start; gap: 0.75rem; border: 1px solid var(--color-line); border-radius: 0.75rem; background: #fff; padding: 0.75rem; }
.scope-option:hover { border-color: #C9D0DC; }
.scope-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-bg); }
.scope-option input { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; accent-color: var(--color-accent); }
fieldset:disabled .scope-option { cursor: default; }
.scope-option-text { display: grid; min-width: 0; }
.scope-option-name { font-size: 0.875rem; font-weight: 600; }
.scope-option-meta { color: var(--color-muted); font-size: 0.75rem; }

/* Page header: title on the left, page actions (e.g. "Sync all") on the right. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-head-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* List filter bar (Ad health): search, then compact dropdowns; wraps on narrow screens. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; padding: 0.875rem; }
.filter-label { display: block; margin-bottom: 0.375rem; color: var(--color-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.filter-search { min-width: 0; flex: 2 1 16rem; }
.filter-search-box { position: relative; }
.filter-search-icon { position: absolute; top: 50%; left: 0.75rem; width: 1.125rem; height: 1.125rem; color: var(--color-muted); transform: translateY(-50%); pointer-events: none; }
.filter-search-input { padding-left: 2.375rem; }
.filter-field { min-width: 0; flex: 1 1 10rem; }
.filter-field-wide { flex: 1.5 1 13rem; }
.filter-clear { display: inline-flex; min-height: 2.75rem; flex: none; align-items: center; border-radius: 0.75rem; padding: 0 0.75rem; color: var(--color-accent); font-size: 0.875rem; font-weight: 500; }
.filter-clear:hover { background: var(--color-accent-bg); }
.filter-clear[hidden] { display: none; }

/* data-fancy="filter": the dropdown at input height, with small icons and status dots. */
.fancy-filter { width: 100%; }
.fancy-filter .fancy-trigger { min-height: 2.75rem; gap: 0.5rem; border-radius: 0.75rem; padding: 0.25rem 0.625rem 0.25rem 0.75rem; }
.fancy-filter .fancy-trigger .fancy-row { align-items: center; gap: 0.5rem; }
.fancy-filter .fancy-trigger .fancy-title { font-weight: 500; }
.fancy-filter .fancy-trigger .fancy-icon { width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; font-size: 0.6875rem; }
.fancy-filter .fancy-list { width: max(100%, 18rem); }
.fancy-filter .fancy-option { padding: 0.5rem 2.25rem 0.5rem 0.625rem; }
.fancy-filter .fancy-option .fancy-row { align-items: center; }
.fancy-filter .fancy-option .fancy-icon { width: 1.875rem; height: 1.875rem; font-size: 0.75rem; }
.fancy-dot { width: 0.625rem; height: 0.625rem; flex: none; margin: 0 0.25rem; border-radius: 9999px; background: var(--color-line); }
.fancy-dot-critical { background: var(--color-critical); box-shadow: 0 0 0 3px var(--color-critical-bg); }
.fancy-dot-watch { background: var(--color-watch); box-shadow: 0 0 0 3px var(--color-watch-bg); }
.fancy-dot-healthy { background: var(--color-healthy); box-shadow: 0 0 0 3px var(--color-healthy-bg); }
.fancy-dot-unknown { background: #A3ACBB; box-shadow: 0 0 0 3px var(--color-page); }
.fancy-dot-all { background: conic-gradient(var(--color-critical) 0 33%, var(--color-watch) 0 66%, var(--color-healthy) 0); }

/* Ad review, "Where your money was wasted": total, one bar of the spend, saved vs hard to avoid, a card per kind. */
.waste-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.waste-total { display: grid; justify-items: end; text-align: right; }
.waste-total-amount { color: var(--color-critical-ink); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.waste-total-label { margin-top: 0.25rem; color: var(--color-muted); font-size: 0.8125rem; }
.waste-bar { display: flex; height: 0.875rem; overflow: hidden; gap: 2px; border-radius: 9999px; background: var(--color-page); }
.waste-seg { display: block; height: 100%; min-width: 0; }
.waste-seg:first-child { border-radius: 9999px 0 0 9999px; }
.waste-seg:last-child { border-radius: 0 9999px 9999px 0; }
.waste-seg-healthy { background: var(--color-healthy); }
.waste-seg-critical { background: var(--color-critical); }
.waste-seg-watch { background: var(--color-watch); }
.waste-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--color-muted); font-size: 0.8125rem; }
.waste-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.waste-key { display: inline-block; width: 0.75rem; height: 0.75rem; flex: none; border-radius: 0.25rem; }
.waste-split { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.waste-split-item { border: 1px solid var(--color-line); border-radius: 0.875rem; padding: 0.875rem 1rem; }
.waste-split-save { border-color: transparent; background: var(--color-watch-bg); }
.waste-split-label { color: var(--color-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.waste-split-save .waste-split-label { color: var(--color-watch-ink); }
.waste-split-amount { margin-top: 0.25rem; color: var(--color-ink); font-size: 1.375rem; font-weight: 700; }
.waste-split-note { margin-top: 0.125rem; color: var(--color-muted); font-size: 0.8125rem; }
.waste-part { border: 1px solid var(--color-line); border-left-width: 4px; border-radius: 0.875rem; padding: 1rem 1.125rem; }
.waste-part-critical { border-left-color: var(--color-critical); }
.waste-part-watch { border-left-color: var(--color-watch); }
.waste-part-amount { flex: none; font-size: 1.125rem; font-weight: 700; white-space: nowrap; }
.waste-part-critical .waste-part-amount { color: var(--color-critical-ink); }
.waste-part-watch .waste-part-amount { color: var(--color-watch-ink); }
.waste-chip { border-radius: 9999px; background: var(--color-page); padding: 0.125rem 0.625rem; color: var(--color-ink); font-size: 0.75rem; }
.waste-example { margin-top: 0.75rem; border-radius: 0.625rem; background: var(--color-page); padding: 0.75rem 0.875rem; }
.waste-example-label { color: var(--color-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.waste-yardstick { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.5; }

/* Ad preview (_CreativeCard): text with "See more", the picture at its own sharpness, headline and button. */
.creative { overflow: hidden; border: 1px solid var(--color-line); border-radius: 0.875rem; background: #fff; }
.creative-text { padding: 1rem 1rem 0.875rem; }
.creative-copy { color: var(--color-ink); font-size: 0.9375rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.creative-copy.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 14; line-clamp: 14; }
.creative-more { margin-top: 0.375rem; color: var(--color-muted); font-size: 0.875rem; font-weight: 600; }
.creative-more:hover { color: var(--color-ink); text-decoration: underline; }
.creative-more:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 0.25rem; }
/* Never stretched past its real size (a small picture stays sharp, centred); a big one fits the card. */
.creative-media { display: flex; justify-content: center; border-top: 1px solid var(--color-line); background: var(--color-page); }
.creative-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 36rem; object-fit: contain; }
.creative-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-top: 1px solid var(--color-line); background: var(--color-page); padding: 0.75rem 1rem; }
.creative-cta { flex: none; border-radius: 0.5rem; background: #fff; padding: 0.4rem 0.875rem; color: var(--color-ink); font-size: 0.8125rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-line); white-space: nowrap; }

/* Price against normal (_PriceFlag: CPM, cost per result): a chip per level, colour deepening Better → Extreme, and the level meter. */
.price-better { --price-bg: var(--color-accent-bg); --price-ink: var(--color-accent); --price-bar: var(--color-accent); }
.price-normal { --price-bg: var(--color-healthy-bg); --price-ink: var(--color-healthy-ink); --price-bar: var(--color-healthy); }
.price-elevated { --price-bg: #FEF7C3; --price-ink: #854A0E; --price-bar: #EAAA08; }
.price-high { --price-bg: var(--color-watch-bg); --price-ink: var(--color-watch-ink); --price-bar: var(--color-watch); }
.price-veryhigh { --price-bg: var(--color-critical-bg); --price-ink: var(--color-critical-ink); --price-bar: var(--color-critical); }
.price-extreme { --price-bg: #7A271A; --price-ink: #fff; --price-bar: #7A271A; }
.price-flag { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 9999px; background: var(--price-bg); padding: 0.125rem 0.625rem; color: var(--price-ink); font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; }
.price-flag-icon { width: 0.75rem; height: 0.75rem; flex: none; }
.price-flag-rise { font-weight: 500; opacity: 0.9; }
.price-meter { display: grid; gap: 0.375rem; }
.price-step { display: grid; min-width: 0; gap: 0.125rem; }
.price-step-bar { height: 0.5rem; border-radius: 9999px; background: var(--color-page); box-shadow: inset 0 0 0 1px var(--color-line); }
.price-step.is-reached .price-step-bar { background: var(--price-bar); box-shadow: none; }
.price-step-name { margin-top: 0.25rem; overflow: hidden; color: var(--color-muted); font-size: 0.75rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.price-step-range { overflow: hidden; color: var(--color-muted); font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
.price-step[aria-current="true"] .price-step-name { color: var(--price-ink); font-weight: 700; }
.price-extreme[aria-current="true"] .price-step-name { color: var(--price-bar); }
.price-step[aria-current="true"] .price-step-bar { height: 0.625rem; margin-top: -0.0625rem; }

/* AI rewrite (Ad review): the prompt card, then the diagnosis, ready-to-paste versions and other changes. */
.rewrite-card { border: 1px solid #D6E0FB; border-radius: 1rem; background: linear-gradient(180deg, var(--color-accent-bg), #fff 4.5rem); padding: 1.125rem 1.25rem; }
.rewrite-icon { display: inline-flex; width: 2.25rem; height: 2.25rem; flex: none; align-items: center; justify-content: center; border-radius: 0.75rem; background: var(--color-accent); color: #fff; }
.rewrite-diagnosis { border-left: 3px solid var(--color-accent); border-radius: 0 0.75rem 0.75rem 0; background: #fff; padding: 0.875rem 1rem; box-shadow: inset 0 0 0 1px var(--color-line); }
.rewrite-label { color: var(--color-accent); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.rewrite-variant { display: flex; flex-direction: column; border: 1px solid var(--color-line); border-radius: 0.875rem; background: #fff; padding: 1rem; }
.rewrite-angle { min-width: 0; overflow: hidden; border-radius: 9999px; background: var(--color-accent-bg); padding: 0.125rem 0.625rem; color: var(--color-accent); font-size: 0.75rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rewrite-copy { flex: none; border-radius: 0.5rem; padding: 0.25rem 0.625rem; color: var(--color-accent); font-size: 0.8125rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-line); }
.rewrite-copy:hover { background: var(--color-accent-bg); }
.rewrite-text { flex: 1; color: var(--color-ink); font-size: 0.875rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.rewrite-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.875rem; border-radius: 0.625rem; background: var(--color-page); padding: 0.625rem 0.75rem; }
.rewrite-area { flex: none; border-radius: 0.375rem; background: var(--color-page); padding: 0.125rem 0.5rem; color: var(--color-ink); font-size: 0.75rem; font-weight: 600; }

/* AI text check: the verdict banner (keep / improve / rewrite) and the issues found, each with its quoted words. */
.text-verdict { display: flex; gap: 0.875rem; align-items: flex-start; border-radius: 0.875rem; padding: 1rem 1.125rem; }
.text-verdict-icon { display: inline-flex; width: 2.25rem; height: 2.25rem; flex: none; align-items: center; justify-content: center; border-radius: 9999px; color: #fff; }
.text-verdict-keep { background: var(--color-healthy-bg); color: var(--color-healthy-ink); }
.text-verdict-keep .text-verdict-icon { background: var(--color-healthy); }
.text-verdict-improve { background: var(--color-watch-bg); color: var(--color-watch-ink); }
.text-verdict-improve .text-verdict-icon { background: var(--color-watch); }
.text-verdict-rewrite { background: var(--color-critical-bg); color: var(--color-critical-ink); }
.text-verdict-rewrite .text-verdict-icon { background: var(--color-critical); }
.text-verdict p + p { color: var(--color-ink); }
.text-issue { border-left: 3px solid var(--color-watch); padding-left: 0.875rem; }
.text-issue-quote { margin-top: 0.375rem; border-radius: 0.5rem; background: var(--color-page); padding: 0.5rem 0.75rem; color: var(--color-ink); font-size: 0.8125rem; font-style: italic; white-space: pre-line; overflow-wrap: anywhere; }

/* Range switch on a chart (Overview: 7 / 14 / 30 days): a compact segmented control in the chart's header. */
.range-switch { display: inline-flex; flex: none; gap: 0.125rem; border-radius: 0.75rem; background: var(--color-page); padding: 0.1875rem; box-shadow: inset 0 0 0 1px var(--color-line); }
.range-option { display: inline-flex; min-height: 2rem; align-items: center; border-radius: 0.5625rem; padding: 0 0.75rem; color: var(--color-muted); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.range-option:hover { color: var(--color-ink); }
.range-option[aria-current="page"] { background: #fff; color: var(--color-ink); font-weight: 600; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 0 0 1px var(--color-line); }
.range-option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Language switch in the sidebar (English / नेपाली): two segments on the dark sidebar. */
.lang-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; border-radius: 0.75rem; background: var(--color-side-active); padding: 0.25rem; }
.lang-switch a { display: inline-flex; min-height: 2.25rem; align-items: center; justify-content: center; border-radius: 0.5rem; color: var(--color-side-text); font-size: 0.8125rem; font-weight: 500; }
.lang-switch a:hover { color: #fff; }
.lang-switch a[aria-current="true"] { background: var(--color-side); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.lang-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Ad health: Facebook Pages listed on the left (search when there are many), filters and ads on the right. */
.ads-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .ads-layout { grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1.25rem; } }
.page-rail { border: 1px solid var(--color-line); border-radius: 1rem; background: #fff; padding: 0.625rem; }
@media (min-width: 1024px) { .page-rail { position: sticky; top: 1rem; } }
.page-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.5rem 0.625rem; }
.page-rail-title { color: var(--color-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.page-rail-count { border-radius: 9999px; background: var(--color-page); padding: 0 0.5rem; color: var(--color-muted); font-size: 0.75rem; line-height: 1.25rem; }
.page-rail-search { position: relative; margin-bottom: 0.5rem; }
.page-rail-search .input { min-height: 2.25rem; font-size: 0.8125rem; }
.page-rail-list { display: grid; gap: 0.125rem; max-height: min(28rem, 60vh); overflow-y: auto; }
@media (min-width: 1024px) { .page-rail-list { max-height: calc(100vh - 12rem); } }
.page-rail-item { display: flex; min-height: 2.25rem; align-items: center; gap: 0.5rem; border-radius: 0.5rem; padding: 0.25rem 0.5rem; color: var(--color-ink); font-size: 0.8125rem; font-weight: 500; }
.page-rail-item:hover { background: var(--color-page); }
.page-rail-item[aria-current="page"] { background: var(--color-accent-bg); color: var(--color-accent); font-weight: 600; }
.page-rail-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.page-rail-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-rail-ads { flex: none; border-radius: 9999px; background: var(--color-page); padding: 0 0.4375rem; color: var(--color-muted); font-size: 0.6875rem; font-weight: 500; line-height: 1.125rem; }
.page-rail-item[aria-current="page"] .page-rail-ads { background: #fff; color: var(--color-accent); }
.page-rail-all { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: none; align-items: center; justify-content: center; border-radius: 9999px; background: var(--color-side); color: #fff; }
.avatar-sm { width: 1.75rem; height: 1.75rem; flex: none; font-size: 0.6875rem; }
.page-more-empty { padding: 0.75rem; color: var(--color-muted); font-size: 0.8125rem; text-align: center; }

/* Wider pages (ViewData["Wide"]): Ad health, where the Pages list sits beside a wide table. */
.main-wide { max-width: 1480px; }
.page-rail .avatar-sm { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }

/* Top bar (every page): where you are on the left (workspace › section › page), the page's buttons on the right. */
.topbar { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--color-line); background: rgb(255 255 255 / 0.92); backdrop-filter: saturate(1.4) blur(8px); }
.topbar-inner { display: flex; min-height: 3.75rem; max-width: 1248px; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 auto; padding: 0.5rem 1rem; }
@media (min-width: 640px) { .topbar-inner { padding: 0.5rem 1.5rem; } }
.topbar-crumbs { min-width: 0; flex: 1; }
.topbar-crumbs ol { display: flex; min-width: 0; align-items: center; gap: 0.375rem; font-size: 0.875rem; }
.topbar-crumbs li { display: flex; min-width: 0; align-items: center; gap: 0.375rem; white-space: nowrap; }
.topbar-crumbs li + li::before { content: ""; width: 0.375rem; height: 0.375rem; flex: none; border: solid #A3ACBB; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); margin-right: 0.25rem; }
.topbar-crumbs a { color: var(--color-muted); }
.topbar-crumbs a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.topbar-crumbs li:first-child { flex: none; }
.topbar-crumbs li:first-child a { font-weight: 500; }
.topbar-crumbs [aria-current="page"] { overflow: hidden; color: var(--color-ink); font-size: 1rem; font-weight: 600; text-overflow: ellipsis; }
.topbar-crumbs li:last-child { flex: 0 1 auto; }
.topbar-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.topbar-actions:empty { display: none; }
.main-below-topbar { padding-top: 1.75rem; }
@media (max-width: 639px) { .topbar-crumbs li:first-child { display: none; } .topbar-crumbs li:nth-child(2)::before { display: none; } }

/* Sidebar: roomy menu rows, a profile card at the bottom; a thin dark scrollbar only on very short windows. */
.side-rail { gap: 1.25rem; overflow-x: hidden; padding-top: 1.5rem; padding-bottom: 1.25rem; scrollbar-width: thin; scrollbar-color: var(--color-side-active) transparent; }
.side-rail::-webkit-scrollbar { width: 6px; }
.side-rail::-webkit-scrollbar-thumb { border-radius: 9999px; background: var(--color-side-active); }
.side-rail::-webkit-scrollbar-track { background: transparent; }
.side-rail .nav-item { min-height: 2.625rem; gap: 0.75rem; border-radius: 0.75rem; padding: 0 0.875rem; }
.side-rail .nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 #6E8EF7; }
.side-rail nav > p { margin-bottom: 0.375rem; letter-spacing: 0.06em; }
.side-rail nav > p + ul + p { margin-top: 1.25rem; }
.side-rail nav ul { gap: 0.125rem; }
.side-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: auto; }
.side-alert { display: flex; align-items: center; gap: 0.5rem; border-radius: 0.75rem; background: rgb(247 144 9 / 0.12); padding: 0.625rem 0.75rem; color: #FDD9A8; font-size: 0.8125rem; font-weight: 500; }
.side-alert:hover { background: rgb(247 144 9 / 0.2); color: #fff; }
.side-user { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--color-side-active); border-radius: 0.875rem; background: rgb(27 39 64 / 0.45); padding: 0.625rem 0.5rem 0.625rem 0.625rem; }
.side-user-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
.side-user-name { display: block; overflow: hidden; color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.side-user-role { display: inline-block; margin-top: 0.125rem; border-radius: 9999px; background: var(--color-side-active); padding: 0 0.5rem; color: var(--color-side-text); font-size: 0.6875rem; font-weight: 500; line-height: 1.125rem; }
.side-signout { display: inline-flex; width: 2.25rem; height: 2.25rem; flex: none; align-items: center; justify-content: center; border-radius: 0.625rem; color: var(--color-side-label); }
.side-signout:hover { background: var(--color-side-active); color: #fff; }
.side-signout:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.side-rail .lang-switch a { min-height: 2.125rem; font-size: 0.8125rem; }

/* Your profile: account card, then name, password and two-step sign-in (QR setup, recovery codes). */
.side-user-link { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.75rem; border-radius: 0.625rem; }
.side-user-link:hover .side-user-name { text-decoration: underline; text-underline-offset: 3px; }
.side-user-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.side-user:has(.side-user-link[aria-current="page"]) { border-color: #6E8EF7; }
.profile-layout { display: grid; max-width: 56rem; gap: 1.25rem; }
.profile-hero { display: flex; align-items: center; gap: 1.25rem; }
.profile-avatar { width: 4rem; height: 4rem; font-size: 1.25rem; }
.code-input { font-family: var(--font-mono); font-size: 1.125rem; letter-spacing: 0.2em; }
.setup-steps { display: grid; gap: 1.25rem; counter-reset: step; }
.setup-steps > li { position: relative; padding-left: 2.5rem; }
.setup-steps > li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--color-accent-bg); color: var(--color-accent); font-size: 0.8125rem; font-weight: 700; }
.setup-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.setup-qr-image { width: 10.5rem; height: 10.5rem; flex: none; overflow: hidden; border: 1px solid var(--color-line); border-radius: 0.75rem; background: #fff; padding: 0.25rem; }
.setup-qr-image svg { display: block; width: 100%; height: 100%; }
.setup-key { display: inline-block; border-radius: 0.5rem; background: var(--color-page); padding: 0.5rem 0.75rem; color: var(--color-ink); font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: 0.06em; word-break: break-all; }
.recovery-box { border: 1px solid #F5D7A6; border-radius: 0.875rem; background: var(--color-watch-bg); padding: 1rem 1.125rem; }
.recovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.recovery-grid li { border-radius: 0.5rem; background: #fff; padding: 0.5rem 0.75rem; color: var(--color-ink); font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.05em; text-align: center; box-shadow: inset 0 0 0 1px var(--color-line); }
.twostep-action { border: 1px solid var(--color-line); border-radius: 0.875rem; padding: 1rem; }

/* Clients (super admin): the hand-over card with sign-in details, the "Add a client" form, row actions. */
.btn-sm { min-height: 2.25rem; border-radius: 0.625rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.handover { border: 1px solid #BFD3FB; border-radius: 1rem; background: var(--color-accent-bg); padding: 1.125rem 1.25rem; }
.handover-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.handover-grid > div { min-width: 0; border-radius: 0.75rem; background: #fff; padding: 0.625rem 0.875rem; box-shadow: inset 0 0 0 1px var(--color-line); }
.handover-grid dt { color: var(--color-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.handover-grid dd { margin-top: 0.125rem; overflow: hidden; color: var(--color-ink); font-size: 0.875rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.handover-password { font-family: var(--font-mono); font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.04em; }
.new-client-summary { display: flex; flex-wrap: wrap; cursor: pointer; align-items: baseline; gap: 0.25rem 0.75rem; padding: 1rem 1.25rem; list-style: none; }
.new-client-summary::-webkit-details-marker { display: none; }
.new-client-summary::before { content: "+"; display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; align-self: center; border-radius: 9999px; background: var(--color-accent-bg); color: var(--color-accent); font-weight: 700; }
details[open] > .new-client-summary::before { content: "–"; }
.client-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }

/* HTMX: indicators are hidden until a request is in flight (built-in indicator styles are off for CSP). */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request.btn, .htmx-request .btn[type="submit"] { pointer-events: none; opacity: 0.7; }

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

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; border-color: #cbd2de; }
  a[href]::after { content: none; }
}