/* [graft:EVA-CHAT-CSS] the hand-off form inside the chat */
.msg.eva-handoff { display: flex; flex-direction: column; gap: .45rem; max-width: 92%; padding: .7rem .75rem .75rem; }
.eva-handoff .eh-h { font-weight: 600; font-size: .86rem; color: var(--ink); }
.eva-handoff label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: #4B5049; }
.eva-handoff input, .eva-handoff textarea {
  font: inherit; font-size: .85rem; line-height: 1.4; padding: .45rem .55rem;
  border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); resize: vertical;
}
.eva-handoff input:focus, .eva-handoff textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.eva-handoff .eh-fine { font-size: .68rem; color: #6D7268; }
.eva-handoff .eh-err { font-size: .74rem; color: #A81F1B; }
.eva-handoff .eh-err:empty { display: none; }
.eva-handoff .eh-acts { display: flex; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; }
.eva-handoff button {
  font: inherit; font-size: .8rem; border-radius: 999px; padding: .4rem .85rem; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
}
.eva-handoff .eh-go { background: var(--accent); border-color: var(--accent); color: #fff; }
.eva-handoff button:disabled { opacity: .6; cursor: default; }
/* A phone zooms into any field set smaller than 16px; the chat stays put. */
@media (max-width: 600px) {
  .chat-form input, .eva-handoff input, .eva-handoff textarea { font-size: 16px; }
}

  /* live sign-up: country picker rows (adapter-built) */
  .country-opt{display:flex;align-items:center;gap:.7rem}
  .country-flag{font-size:1.15rem;line-height:1;flex:0 0 auto}
  .country-opt b{font-size:.95rem;font-weight:500}
  .country-soon b{color:var(--ink-3)}

  /* the demo's casing, tightened — less chrome, same screen */
  .stage .layer-card .wrap { max-width: 1080px; }
  .stage .showreal {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.09);
  }
  .stage .showreal figcaption { padding: 0.5rem 0.85rem; font-size: 0.64rem; }

  /* a soft emerald bloom around the zoomed-out card. Pinned stages drive it
     from the scroll (--zoom-glow set by the stage script); phones and
     reduced-motion viewports never pin, so theirs rests at a quiet constant. */
  .stage.pinned .showreal {
    box-shadow:
      0 1px 2px rgba(10,10,10,0.05),
      0 18px 44px rgba(10,10,10,0.09),
      0 0 calc(42px * var(--zoom-glow, 0)) rgba(26,135,84, calc(0.30 * var(--zoom-glow, 0))),
      0 0 calc(110px * var(--zoom-glow, 0)) rgba(26,135,84, calc(0.16 * var(--zoom-glow, 0)));
  }
  .stage:not(.pinned) .showreal {
    box-shadow:
      0 1px 2px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.09),
      0 0 34px rgba(26,135,84,0.16), 0 0 90px rgba(26,135,84,0.09);
  }

  /* the ten-year line flows in, left to right; on phones the same order
     reads top to bottom. Reduced motion sees it settled. */
  @media (prefers-reduced-motion: no-preference) {
    .tl .tl-line {
      transform: scaleX(0); transform-origin: 0 50%;
      transition: transform 1.6s cubic-bezier(0.25, 0.7, 0.3, 1) 0.12s;
    }
    .tl div.tl-stop {
      opacity: 0; transform: translateX(-26px);
      transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .tl div.tl-stop:nth-of-type(1) { transition-delay: 0.05s; }
    .tl div.tl-stop:nth-of-type(2) { transition-delay: 0.19s; }
    .tl div.tl-stop:nth-of-type(3) { transition-delay: 0.33s; }
    .tl div.tl-stop:nth-of-type(4) { transition-delay: 0.47s; }
    .tl div.tl-stop:nth-of-type(5) { transition-delay: 0.61s; }
    .tl.flow .tl-line { transform: scaleX(1); }
    .tl.flow div.tl-stop { opacity: 1; transform: none; }
  }

  /* The Ledger: blocks the console can write, and the server-rendered first
     paint (body[data-ssr] until the router takes over). */
  /* (lists and callouts are the design's own since v1.1_81_1) */
  .lg-prose a{color:#0B5137;text-decoration:underline;text-underline-offset:2px}
  .lg-rss{margin-top:1rem}
  .lg-rss em{display:block;margin-top:.35rem;font-size:.85rem;color:var(--ink-3,#525252)}
  body[data-ssr] #site{display:none}
  .ssr-list{list-style:none;padding:0;margin:1.5rem 0 3rem}
  .ssr-list li{padding:1.1rem 0;border-bottom:1px solid rgba(10,10,10,.08)}
  .ssr-list a{font-weight:600;color:inherit}
  .post .post-art{background:linear-gradient(140deg,#EEF6F1,#CDE9DA)}

  /* Personal web (personal-web.js): the log-in's password-link form, its
     notices, the labelled phone picture, the code in words; the chat's
     extra links, photo controls and camera preview. */
  .plg .lg-links{flex-wrap:wrap;justify-content:flex-start;column-gap:1.4rem;row-gap:.45rem}
  .plg-notice{margin:1rem 0 0;font-size:.86rem}
  .plg .hint a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .plg-pwlink{margin-top:1rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);padding:.9rem 1rem}
  .plg-pwlink b{display:block;font-size:.92rem;font-weight:600}
  .plg-pwlink p{margin:.3rem 0 .8rem;font-size:.82rem;color:var(--ink-2);line-height:1.5}
  .plg-pwlink .field{margin:0}
  .plg-lrow{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.1rem;margin-top:.75rem}
  .plg-lnote{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-2)}
  .plg-lnote.lg-bad{color:#A81F1B}
  .plg-pwlink .plg-lnote{margin:.7rem 0 0}
  .plg-lrow .lg-link{font-size:.86rem}
  /* the design's .field .hint outranks .lg-bad, so its error hints never turned red */
  .plg .field .hint{display:block}
  .plg .field .hint.lg-bad{color:#A81F1B}
  .plg-ill{margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem}
  .plg-ill figcaption{text-align:center}
  .plg-illx{pointer-events:none;user-select:none;-webkit-user-select:none}
  .plg-illx button{cursor:default}
  .plg-code{margin-top:1rem;font-size:.9rem;color:var(--ink-2)}
  .plg-code b{font-family:var(--mono);font-size:1.12rem;letter-spacing:.08em;color:var(--forest);white-space:nowrap}
  .plg-noqr{width:170px;min-height:120px;display:grid;place-items:center;text-align:center;padding:1rem;border:1px dashed var(--line-2);border-radius:14px;font-size:.78rem;color:var(--ink-2)}
  .phm-capt{display:inline-block;padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.72rem}
  .pc-more{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.55rem}
  .pc-link{border:0;background:none;padding:0;font:inherit;font-size:.8rem;font-weight:600;color:var(--forest);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .pc-pbar{flex-wrap:wrap}
  .pc-pick{position:relative;overflow:hidden}
  .pc-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .pc-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
  .pc-cam{border-radius:14px;overflow:hidden;background:#12201A;margin-bottom:.6rem;display:grid;place-items:center}
  .pc-cam video{display:block;width:100%;max-height:44vh;object-fit:contain}
  .pc-shot{display:block;max-width:140px;max-height:140px;border-radius:10px;margin-bottom:.35rem}
  /* buttons inside a chat bubble: the design's .pc-b a outranked .btn and
     drew them dark on green, underlined */
  .pc-b .pc-go .btn{color:var(--accent-ink);text-decoration:none}
  .pc-b .pc-go .btn-ghost{color:var(--ink)}
  /* THE TIME UNDER A CHAT LINE IS A TIME, NOT A PILL (owner, 21 Oct 2026:
     "remove the casing surrounding the time on the chat as its confusing").
     The design uses .pc-t twice: for the personal page's tab pills (padding,
     a 999px radius and an inset ring) and for the stamp inside a bubble.
     The pill rule leaked onto the stamp, so every message carried what
     looked like an empty field under it. */
  .pc-b .pc-t{display:block;width:auto;padding:0;margin:.25rem 0 0;border:0;border-radius:0;background:none;box-shadow:none;cursor:default;font-weight:400;letter-spacing:0}
  @media (max-width: 640px){
    .pc-voices{grid-template-columns:1fr 1fr}
    .pc-voice{padding:.5rem .6rem;gap:.5rem}
    .plg-code b{font-size:1rem}
  }

  /* [graft:ANALYTICS] the analytics question */
  .ga-ask{position:fixed;left:1.35rem;bottom:1.35rem;z-index:61;max-width:23rem;padding:1rem 1.1rem;
    background:var(--paper,#fff);color:var(--ink,#0A0A0A);border:1px solid var(--line-2,#C8DCD1);border-radius:var(--r-sm,10px);
    box-shadow:0 12px 32px rgba(10,10,10,.12);font:400 .9rem/1.5 var(--body,system-ui,sans-serif)}
  .ga-ask p{margin:0 0 .8rem}
  .ga-ask a{color:var(--forest,#0B5137);text-decoration:underline;text-underline-offset:2px}
  .ga-ask-b{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
  .ga-ask .ga-no{background:none;border:1px solid var(--line-2,#C8DCD1);border-radius:999px;padding:.55rem 1.1rem;
    font:600 .87rem/1 var(--body,system-ui,sans-serif);color:var(--ink,#0A0A0A);cursor:pointer}
  .ga-ask button:focus-visible{outline:2px solid var(--forest,#0B5137);outline-offset:2px}
  @media (max-width:600px){.ga-ask{left:.75rem;right:.75rem;bottom:4.6rem;max-width:none}}

  /* [graft:LEDGER-CTA] the next step under an article */
  .lg-cta{margin:2.4rem 0 0;padding:1.15rem 1.3rem 1.25rem;border:1px solid var(--line-2,#C8DCD1);border-radius:12px;background:var(--surface-2,#F4F8F5)}
  .lg-cta>span{display:block;font:400 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin-bottom:.55rem}
  .lg-prose .lg-cta p{margin:0 0 .95rem}
  .lg-prose .lg-cta .lg-cta-b{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;margin:0}
  .lg-prose .lg-cta .btn{color:#fff;text-decoration:none}
  .lg-prose .lg-cta .lg-cta-more{font-weight:600}
  /* [graft:LEDGER-CTA-FLOAT] the same next step, following the reader: a bar they can drag anywhere */
  .lg-cta-float{position:fixed;left:50%;bottom:1.25rem;z-index:60;display:flex;align-items:center;gap:.85rem;
    width:min(48rem,calc(100vw - 2rem));padding:.65rem .7rem .65rem .55rem;border-radius:18px;color:#fff;
    background:linear-gradient(115deg,#0B5137 0%,#11704A 58%,#1A8754 100%);
    box-shadow:0 16px 38px rgba(11,81,55,.38),inset 0 0 0 1px rgba(255,255,255,.10);
    font:400 .92rem/1.35 var(--body,system-ui,sans-serif);touch-action:none;cursor:grab;user-select:none;
    opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
  .lg-cta-float.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .lg-cta-float.moved,.lg-cta-float.moved.on{transform:none}
  .lg-cta-float.dragging{cursor:grabbing;transition:none}
  .lg-cta-float::after{content:"";position:absolute;inset:-2px;border-radius:20px;pointer-events:none;
    background:linear-gradient(115deg,#C8F169,#8FC7AC 45%,#C8F169) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    border:2px solid transparent;opacity:.9}
  .lg-cta-float.on.hello::after{animation:lgCtaGlow 1.6s ease-out 2}
  @keyframes lgCtaGlow{0%{box-shadow:0 0 0 0 rgba(200,241,105,.55)}100%{box-shadow:0 0 0 14px rgba(200,241,105,0)}}
  .lg-cta-float .lcf-grip{flex:none;width:.9rem;height:1.6rem;opacity:.55;
    background:radial-gradient(circle,#fff 1.2px,transparent 1.6px) 0 0/.45rem .45rem}
  .lg-cta-float .lcf-t{flex:1;min-width:0}
  .lg-cta-float .lcf-t span{display:block;font:500 .62rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:#C8F169;margin-bottom:.3rem}
  .lg-cta-float .lcf-t p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.92)}
  .lg-cta-float .lcf-t b{color:#fff}
  .lg-cta-float .lcf-go{flex:none;display:inline-flex;align-items:center;gap:.45rem;padding:.62rem 1.1rem;border-radius:999px;
    background:#C8F169;color:#0B2A1E;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(200,241,105,.35)}
  .lg-cta-float .lcf-go:hover{background:#D6F78A}
  .lg-cta-float .lcf-go svg{width:1.05rem;height:1.05rem;fill:currentColor}
  .lg-cta-float .lcf-more{flex:none;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;font-weight:600}
  .lg-cta-float .lcf-x{flex:none;width:2rem;height:2rem;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:600 1.1rem/1 system-ui;cursor:pointer}
  .lg-cta-float a:focus-visible,.lg-cta-float button:focus-visible{outline:2px solid #C8F169;outline-offset:2px}
  .lg-cta-float.min{width:auto;gap:.5rem;padding:.45rem .5rem .45rem .45rem;border-radius:999px}
  .lg-cta-float.min .lcf-t,.lg-cta-float.min .lcf-more,.lg-cta-float.min .lcf-x{display:none}
  .lg-cta-float .lcf-open{display:none;border:0;background:none;color:#fff;font:600 .85rem/1 var(--body,system-ui);cursor:pointer;padding:.3rem .35rem}
  .lg-cta-float.min .lcf-open{display:inline}
  /* Below ~1,240px the centred bar would cover "Chat with Eva" (bottom right): it sits above it instead. */
  @media (max-width:1240px){.lg-cta-float{bottom:5.4rem}}
  @media (max-width:600px){
    .lg-cta-float{bottom:5.4rem;flex-wrap:wrap;gap:.55rem .6rem;padding:.7rem .7rem .7rem .55rem}
    .lg-cta-float .lcf-t{flex-basis:calc(100% - 3.2rem)}
    .lg-cta-float .lcf-t p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .lg-cta-float .lcf-go{flex:1;justify-content:center}
    .lg-cta-float .lcf-more{display:none}
    .lg-cta-float .lcf-x{order:-1;position:absolute;top:.45rem;right:.45rem;width:1.7rem;height:1.7rem}
    .lg-cta-float.min{bottom:5.4rem}
  }
  @media (prefers-reduced-motion:reduce){.lg-cta-float,.lg-cta-float.on{transition:none}.lg-cta-float.on.hello::after{animation:none}}

  /* ── THE PREVIOUS LOG-IN, WITH THE ORB (owner, 13 Nov 2026) — everything is under #login ── */
  #login .lgx-orb { display: block; position: relative; width: 4.1rem; height: 4.1rem; margin: 0.9rem 0 1.25rem;
    border-radius: 42% 58% 63% 37% / 47% 41% 59% 53%;
    background: radial-gradient(circle at 38% 32%, #CDE9DA, #1A8754 52%, #0B5137 96%);
    box-shadow: 0 1rem 1.9rem -0.8rem rgba(11,81,55,0.55), inset 0 0.25rem 0.85rem rgba(255,255,255,0.45), inset 0 -0.8rem 1.35rem rgba(8,48,31,0.4);
    animation: lgxJelly 6.5s ease-in-out infinite, lgxBeat 1.6s ease-in-out infinite, lgxGlow 3.2s ease-in-out infinite; }
  #login .lgx-orb::before { content: ""; position: absolute; top: 15%; left: 19%; width: 30%; height: 22%; border-radius: 60% 50% 55% 45%;
    background: rgba(255,255,255,0.55); filter: blur(3px); z-index: 2; }
  #login .lgx-orb::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23fff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M39.4%2019.6%20A16%2016%200%201%201%2032.4%2010.6'/%3E%3Cpath%20d='M24%2035%20V17.5'/%3E%3Cpath%20d='M24%2024.2%2016.4%2020.2'/%3E%3Cpath%20d='M24%2024.2%2031.6%2020.2'/%3E%3Ccircle%20cx='24'%20cy='15.4'%20r='2.7'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='15.4'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='32.6'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3C/svg%3E") center / 64% no-repeat; }
  @keyframes lgxJelly { 0%, 100% { border-radius: 42% 58% 63% 37% / 47% 41% 59% 53%; } 25% { border-radius: 58% 42% 40% 60% / 63% 57% 43% 37%; }
    50% { border-radius: 37% 63% 58% 42% / 52% 65% 35% 48%; } 75% { border-radius: 55% 45% 47% 53% / 39% 46% 54% 61%; } }
  @keyframes lgxBeat { 0%, 36%, 100% { transform: scale(1); } 8% { transform: scale(1.14); } 17% { transform: scale(1); } 25% { transform: scale(1.09); } }
  /* it glows: a soft emerald light that breathes around it */
  @keyframes lgxGlow { 0%, 100% { box-shadow: 0 1rem 1.9rem -0.8rem rgba(11,81,55,0.55), inset 0 0.25rem 0.85rem rgba(255,255,255,0.45), inset 0 -0.8rem 1.35rem rgba(8,48,31,0.4), 0 0 1.2rem 0.15rem rgba(47,184,119,0.28); }
    50% { box-shadow: 0 1rem 1.9rem -0.8rem rgba(11,81,55,0.55), inset 0 0.25rem 0.85rem rgba(255,255,255,0.45), inset 0 -0.8rem 1.35rem rgba(8,48,31,0.4), 0 0 2.6rem 0.7rem rgba(47,184,119,0.55); } }
  @media (prefers-reduced-motion: reduce) { #login .lgx-orb { animation: none; box-shadow: 0 1rem 1.9rem -0.8rem rgba(11,81,55,0.55), inset 0 0.25rem 0.85rem rgba(255,255,255,0.45), inset 0 -0.8rem 1.35rem rgba(8,48,31,0.4), 0 0 1.8rem 0.4rem rgba(47,184,119,0.4); } }
  /* EVERYTHING IN THE MIDDLE, THE ORB INCLUDED (owner, 13 Nov 2026: "centralize including the orb"). The orb, the
     tabs, the heading and its line, and what sits under the button are centred on both sides and on every step.
     What is typed into or read as a list stays as it was: field labels and their hints, the numbered steps. */
  #login .lgx-orb { margin-left: auto; margin-right: auto; }
  #login .login-wrap h1, #login .login-wrap .sub { text-align: center; }
  #login .login-wrap .sub { margin-left: auto; margin-right: auto; }
  #login .plg-tabs { display: flex; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; }
  #login .lg-links, #login .plg .lg-links { justify-content: center; text-align: center; }
  #login .lg-status { justify-content: center; }
  #login .lg-legal, #login .plg-note, #login .plg-notice, #login .plg-code { text-align: center; }
  #login .plg-solo .plg-note { margin-left: auto; margin-right: auto; }
  #login .plg-wait { justify-content: center; text-align: center; }
  #login .lg-code { justify-content: center; }
  /* a heading with no line under it keeps the field at the same distance */
  #login .login-wrap h1 + .field { margin-top: 1.6rem; }
  /* the product's name as the brand writes it (LOGIN-BRAND-NAME; the apps' lockup: Pryme 700, the product 400 emerald) */
  /* one size on both sides: the two first screens used to differ (40px Personal, 34px Business) */
  #login .login-wrap h1.lgx-brand { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.35rem); }
  #login .login-wrap h1.lgx-brand em { font-style: normal; font-weight: 400; color: var(--emerald, #1A8754); letter-spacing: -0.02em; }
  #login .login-wrap h1.lgx-brand + .field { margin-top: 1.8rem; }
  /* PERSONAL (owner, 14 Nov 2026). The hint under the email is gone ("delete this"): its slot stays for a mistake
     and takes no room while it is empty, and the next field keeps its distance. The password's hint is ON ONE LINE
     ("this should be a single line"): wider than the column, so it is laid across it, centred on it. A mistake's
     sentence in that slot wraps as before, and so does the hint on a screen too narrow to hold it whole. */
  #login .plg-id .field .hint:empty { display: none; }
  #login .plg-id .field + .field { margin-top: 1.25rem; }
  @media (min-width: 560px) {
    #login .plg-id #plg-wh:not(.lg-bad) { white-space: nowrap; width: -moz-max-content; width: max-content; max-width: none;
      position: relative; left: 50%; transform: translateX(-50%); text-align: center; }
  }
  /* THE TERMS SENTENCE ON ONE LINE (owner, 14 Nov 2026: "this should be a single line"). It is wider than the
     column, so it is laid across it, centred on it. A screen too narrow to hold it whole lets it wrap as before:
     a line that ran off a phone would be worse than three short ones. */
  @media (min-width: 900px) {
    #login .lg-status + .lg-legal { white-space: nowrap; width: -moz-max-content; width: max-content; max-width: none;
      position: relative; left: 50%; transform: translateX(-50%); }
  }
  /* Personal sits in the middle, in a column the width of the Business one */
  #login .plg.plg-solo { margin-left: auto; margin-right: auto; }
  #login .plg.plg-id { max-width: 20.2rem; }
  #login .plg.plg-id .plg-copy { max-width: none; }
  #login .plg-tabs + .lgx-orb { margin-top: 0.1rem; }
  #login .plg.plg-id .plg-note .text-link { padding-left: 0; padding-right: 0; }
  /* the status line is a link now; it reads as the line it replaced */
  #login a.lg-status { text-decoration: none; }
  #login .lgx-status i { display: none; }
  #login .lgx-status[data-state] i { display: inline-block; }
  #login .lgx-status[data-state="degraded"] { color: #7A4E00; } #login .lgx-status[data-state="degraded"] i { background: #A96C00; box-shadow: 0 0 0 3px rgba(169,108,0,0.15); animation: none; }
  #login .lgx-status[data-state="partial"], #login .lgx-status[data-state="major"] { color: #A81F1B; }
  #login .lgx-status[data-state="partial"] i, #login .lgx-status[data-state="major"] i { background: #A81F1B; box-shadow: 0 0 0 3px rgba(168,31,27,0.15); animation: none; }
  #login .lgx-status:hover span { text-decoration: underline; text-underline-offset: 3px; }
  #login .lgx-status:focus-visible { outline: 2px solid #1A8754; outline-offset: 2px; }