/* Institutional Quiet: the sign-in pages' look, over the layout in base.css (account/_iq_chrome.html).
   A file and not an inline <style>: the pages' Content-Security-Policy allows no inline style
   (backend/middleware.py). */

/* Onest and IBM Plex Mono, served from here rather than fonts.googleapis.com (no third-party request on
   the sign-in page). From @fontsource/onest 5.3.1 and @fontsource/ibm-plex-mono 5.3.0, latin and
   latin-ext only; SIL Open Font License 1.1, see fonts/OFL-*.txt. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/onest-latin-ext-400-normal.0ef9cb73fb0e.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/onest-latin-400-normal.22cb2483abda.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/onest-latin-ext-500-normal.05465863659b.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/onest-latin-500-normal.675404318935.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/onest-latin-ext-600-normal.8d5b7e7ea9f1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/onest-latin-600-normal.b50295c22c13.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-400-normal.8450d5944de2.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-500-normal.fa8d8838b94a.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --paper: oklch(0.99 0.003 240);
  --card: oklch(1 0 0);
  --card-sunken: oklch(0.972 0.004 240);
  --ink: oklch(0.14 0.005 250);
  --ink-2: oklch(0.30 0.005 250);
  --ink-3: oklch(0.48 0.005 250);
  --ink-4: oklch(0.64 0.005 250);
  --hairline: oklch(0.90 0.006 240);
  --hairline-strong: oklch(0.82 0.006 240);
  --accent: oklch(0.32 0.11 252);
  --accent-soft: oklch(0.94 0.025 252);
  --ok: oklch(0.52 0.08 150);
  --ok-soft: oklch(0.96 0.02 150);
  --watch: oklch(0.62 0.10 75);
  --watch-soft: oklch(0.97 0.025 80);
  --risk: oklch(0.52 0.13 25);
  --risk-soft: oklch(0.96 0.02 25);
  --focus: oklch(0.55 0.14 240);
  --iq-font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --iq-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper) !important;
  color: var(--ink);
  font-family: var(--iq-font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
em, i, cite, address, dfn, var { font-style: normal; }

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
}
.stage,
.panel-wrap { padding: 0; }
.stage { display: flex; align-items: stretch; }

.stage-card {
  width: 100%;
  min-height: 100%;
  border-radius: 0;
  padding: 56px 64px;
  border: none;
  border-right: 1px solid var(--hairline);
  box-shadow: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M 40 0 L 0 0 0 40' fill='none' stroke='%23d6d6dc' stroke-width='0.5'/></svg>"),
    var(--card-sunken);
  background-repeat: repeat;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
.stage-card::after { content: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
/* IQ brand-mark: hide the base layout's inline 'P' character and
   render the canonical Finoco lockup PNG (white wordmark + blue
   accent dots on transparent background). The image is designed for
   dark surfaces; on the cream auth panel we apply
   `invert(1) hue-rotate(180deg)` — a CSS-filter pair that flips
   white → black (the wordmark stays sharp on cream) while keeping
   the blue dots blue (invert turns blue into orange, the 180° hue
   rotate brings it back to blue). Net effect: same brand asset, now
   readable on a light surface, no chip needed. */
.brand-mark {
  /* Hide the literal 'P' character from base.html without removing
     it (a11y: still in the DOM for screen readers next to brand-copy). */
  font-size: 0;
  line-height: 0;
  color: transparent;
  display: inline-block;
  flex-shrink: 0;
  /* Sized to match the IQ headline scale — large enough to read at
     arm's length, small enough to sit comfortably above the
     headline. */
  width: 180px;
  height: 36px;
  background-image: url("/static/finoco-logo.fb4124babff9.png");
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  filter: invert(1) hue-rotate(180deg);
}
.brand-copy { display: none; }

.headline {
  margin: 80px 0 0;
  font-family: var(--iq-font-sans);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 620px;
  position: relative;
  z-index: 2;
}
.headline .accent { color: var(--accent); }

.lede {
  margin: 18px 0 0;
  font-family: var(--iq-font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  max-width: 560px;
  position: relative;
  z-index: 2;
}
.lede.body {
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  max-width: 460px;
}

.stage-card .eyebrow,
.panel .eyebrow {
  margin: 0;
  display: inline-block;
  font-family: var(--iq-font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The parent wraps stage_signals inside .signal-grid (a 2-col CSS grid in
   the parent layout). Override to a vertical block so our lede + brand-
   foot + tape stack naturally. */
.signal-grid {
  display: block;
  margin-top: 0;
  grid-template-columns: none;
}

.stage-foot {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-4);
  position: relative;
  z-index: 2;
}
.stage-foot-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: none;
}

.panel-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.panel {
  width: 100%;
  max-width: 460px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 56px;
}
.panel-title {
  margin: 12px 0 0;
  font-family: var(--iq-font-sans);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.panel-copy {
  margin: 10px 0 0;
  font-family: var(--iq-font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 360px;
}
.panel-body { margin-top: 28px; }
.panel-body h1,
.panel-body h2 {
  font-family: var(--iq-font-sans);
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.panel-body p,
.panel-body li,
.panel-body label {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.panel-body a {
  color: var(--accent);
  font-weight: 500;
}

.auth-stack { display: grid; gap: 16px; max-width: 380px; }
.auth-form { margin: 0; display: grid; gap: 14px; }

.field { display: grid; gap: 6px; }
.field label {
  font-family: var(--iq-font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.field-input {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border-radius: 5px;
  border: 1px solid var(--hairline-strong);
  background: var(--card);
  color: var(--ink);
  font-family: var(--iq-font-sans);
  font-size: 13px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field-input::placeholder { color: var(--ink-4); }
.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}

.password-wrapper { position: relative; }
.password-wrapper .field-input { padding-right: 42px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.password-toggle:hover {
  background: var(--card-sunken);
  color: var(--ink);
}
.password-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.password-toggle svg { width: 16px; height: 16px; display: block; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-visible .icon-eye { display: none; }
.password-toggle.is-visible .icon-eye-off { display: block; }

.field-error {
  font-size: 11px;
  color: var(--risk);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--iq-font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.auth-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--iq-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.auth-button:hover {
  transform: none;
  background: var(--card-sunken);
  border-color: var(--hairline-strong);
  box-shadow: none;
}
.auth-button.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.auth-button.primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.auth-button.provider { background: var(--card); }
.auth-button.provider:hover { background: var(--card-sunken); border-color: var(--hairline-strong); }

.auth-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}
.auth-icon { display: none; }

.provider-logo {
  width: 18px;
  height: 18px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.provider-logo svg { width: 16px; height: 16px; display: block; }

.auth-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-align: left;
}
.auth-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
}
.auth-hint { display: none; }
.auth-arrow { display: none; }

.auth-button.primary .auth-label { color: var(--paper); }

.messages { display: grid; gap: 8px; margin: 0 0 16px; }
.message {
  padding: 10px 12px;
  border-radius: 4px;
  font-family: var(--iq-font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--hairline);
  background: var(--card-sunken);
  color: var(--ink-2);
}
.message--error,
.message--warning {
  background: var(--risk-soft);
  border-color: color-mix(in oklch, var(--risk) 25%, transparent);
  color: var(--risk);
}
.message--success {
  background: var(--ok-soft);
  border-color: color-mix(in oklch, var(--ok) 22%, transparent);
  color: var(--ok);
}
.message--info {
  background: var(--accent-soft);
  border-color: color-mix(in oklch, var(--accent) 22%, transparent);
  color: var(--accent);
}
.message strong { font-weight: 600; }

.auth-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
}
.auth-chrome-copy {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-4);
}
.auth-chrome-copy a {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  text-decoration: none;
}
.auth-chrome-copy a:hover { color: var(--ink); border-color: var(--hairline-strong); }

.brand-foot {
  position: relative;
  z-index: 2;
  font-family: var(--iq-font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr; min-height: auto; }
  .stage { order: 2; }
  .panel-wrap { order: 1; }
  .stage-card { padding: 32px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .headline { margin-top: 28px; font-size: 36px; }
  .lede { font-size: 16px; }
  .panel { padding: 32px; }
}
@media (max-width: 640px) {
  .stage-card { padding: 24px; }
  .panel { padding: 24px; }
  .headline { font-size: 28px; margin-top: 20px; }
  .lede { font-size: 14px; line-height: 1.6; }
  .panel-title { font-size: 24px; }
  .auth-chrome { flex-direction: column; align-items: flex-start; }
}

/* Typing animation */
.typed-wrap {
  color: var(--accent);
  display: inline-block;
  min-height: 1.12em;
}
.typed {
  font-family: var(--iq-font-sans);
  font-weight: 600;
  letter-spacing: -0.028em;
}
.caret {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 4px;
  background: var(--accent);
  vertical-align: -0.12em;
  animation: iq-caret-blink 1s steps(1) infinite;
}
@keyframes iq-caret-blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; opacity: 0.6; }
}

/* Product pulse — abstract animated representation of the always-on
   monitoring loop. Three procedural sparkline curves (accent / ok /
   watch tones) with a subtle dashed threshold and a scanning beam.
   No labels, no numbers, no real data — just a motion sketch. */
.iq-pulse {
  margin-top: 32px;
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
}
.iq-pulse-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.iq-pulse-line {
  fill: none;
  stroke-linecap: round;
  /* Hard-coded length matched to the longest path. Slightly over-shoots
     so the animation cleanly exposes the full stroke before reset. */
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: iq-pulse-draw 6s ease-in-out infinite;
}
.iq-pulse-line-2 { animation-delay: 0.6s; }
.iq-pulse-line-3 { animation-delay: 1.2s; }
@keyframes iq-pulse-draw {
  0%   { stroke-dashoffset: 900; opacity: 0.0; }
  20%  { stroke-dashoffset: 600; opacity: 1.0; }
  70%  { stroke-dashoffset: 0;   opacity: 1.0; }
  90%  { stroke-dashoffset: 0;   opacity: 0.0; }
  100% { stroke-dashoffset: 900; opacity: 0.0; }
}
.iq-pulse-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--iq-font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  position: relative;
  height: 18px;
}
.iq-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 15%, transparent);
  animation: iq-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes iq-pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1.0; transform: scale(1.0); }
}
/* Four status phrases crossfade through one slot. Each lives at the
   same position; the animation only changes opacity so the visual
   stays anchored. 12s total cycle, 3s per phrase. */
.iq-pulse-text {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  animation: iq-pulse-text 12s linear infinite;
}
.iq-pulse-text-a { animation-delay: 0s; }
.iq-pulse-text-b { animation-delay: 3s; }
.iq-pulse-text-c { animation-delay: 6s; }
.iq-pulse-text-d { animation-delay: 9s; }
@keyframes iq-pulse-text {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  23%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .iq-pulse-line,
  .iq-pulse-dot,
  .iq-pulse-text { animation: none; }
  .iq-pulse-line { stroke-dashoffset: 0; opacity: 1; }
  .iq-pulse-text-a { opacity: 1; }
  .iq-pulse-text-b,
  .iq-pulse-text-c,
  .iq-pulse-text-d { opacity: 0; }
}
@media (max-width: 640px) {
  .iq-pulse { height: 110px; }
}

/* The sign-in code page (account/confirm_login_code.html). */
.otp-input {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.5em;
  padding-left: calc(0.5em + 14px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.otp-input::placeholder {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink-4);
}

/* Were style="" attributes in the templates: a CSP without 'unsafe-inline' drops those too. Scoped under
   .panel-body so they win over its p/li/a rules, as the attributes did. */
.panel-body .auth-fineprint {
  font-size: 11px;
  color: var(--ink-4);
  line-height: 1.5;
  margin: 0;
}
.panel-body .auth-fineprint a {
  color: var(--ink-3);
  border-bottom: 1px dotted var(--hairline-strong);
  text-decoration: none;
}
.panel-body a.auth-button { text-decoration: none; }
.panel-body .reset-tips {
  display: grid;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}
.panel-body .reset-tips strong { color: var(--ink-2); font-weight: 600; }
.panel-body .reset-tips ul { margin: 0; padding-left: 18px; }
.panel-body .reset-tips .mono { color: var(--ink-2); font-family: var(--iq-font-mono); }