/* Student view layout. Base unit (--u) tuned on the real device list (phones 7-8 cm wide, tablets 13-18 cm, MacBooks ~29 cm):
   body text lands at about 3-3.5 mm on phones, 3.5-4.7 mm on tablets and ~4.3 mm on laptops. */
/* Student view layout. Each page maps --sv-* to its own palette.
   Everything inside .sv is sized in em from one fluid unit (--u), so the same markup scales from a phone to a
   kiosk monitor and flips between a stacked (portrait) and a side-by-side (landscape) composition. */
:root { --u: clamp(15px, min(1.7vw, 2.3vh), 28px); }
@media (orientation: portrait) { :root { --u: clamp(16px, 2.6vw, 26px); } }
@media (orientation: portrait) and (max-width: 599px) { :root { --u: clamp(17px, 4.4vw, 20px); } }

.sv { width: 100%; max-width: calc(var(--u) * 66); margin: 0 auto; padding: .7em 1em 1.6em; display: flex; flex-direction: column; gap: .9em; font-size: var(--u); color: var(--sv-text); }
.sv-greet { padding: .15em .3em 0; }
.sv-greet h1 { white-space: nowrap; text-wrap: balance; color: var(--sv-ext-text, var(--sv-text)); margin: 0; font-size: 1.9em; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.sv-event { display: none; margin-top: .5em; flex-direction: column; gap: .35em; color: var(--sv-ext-muted, var(--sv-muted)); font-size: .95em; line-height: 1.35; }
.sv-event { text-wrap: pretty; }
.sv-event .ev-title { text-wrap: balance; color: var(--sv-ext-text, var(--sv-text)); font-size: 1.15em; font-weight: 800; line-height: 1.25; }
.sv-event .ev-school { color: var(--sv-accent); font-weight: 700; font-size: 1.05em; }
.sv-event span { display: inline-flex; align-items: flex-start; gap: .45em; }
.sv-event span .ic { margin-top: .15em; }

.sv-card { background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); padding: .15em 1.1em; }
.sv-head { display: flex; align-items: baseline; justify-content: space-between; gap: .7em; padding: .8em 0 .65em; border-bottom: 1px solid var(--sv-line); }
.sv-model, .sv-name { margin: 0; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; font-size: 1.35em; }
.sv-name { padding: .55em 0 .4em; border-bottom: 1px solid var(--sv-line); }
.sv-sub { font-size: .85em; color: var(--sv-muted); font-weight: 600; flex-shrink: 0; }
.sv-index { padding-top: .7em; }
.sv-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .65em 0; border-bottom: 1px solid var(--sv-line); min-height: 2.9em; }
.sv-row:last-child { border-bottom: 0; }
.sv-label { font-size: .8em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-muted); flex-shrink: 0; }
.sv-value { font-size: 1.05em; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.sv-value.code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .98em; font-weight: 700; }
.sv-value.accent { color: var(--sv-accent); }
.sv-student + .sv-student { border-top: 1px solid var(--sv-line); margin-top: .4em; }
.sv-link { display: inline-flex; align-items: center; gap: .4em; color: var(--sv-accent); font-weight: 600; font-size: .95em; text-decoration: none; }
.sv-link:hover { text-decoration: underline; }
.sv-row-link { justify-content: flex-start; }

.sv-rules { display: grid; gap: 1em; padding: .3em .3em 0; }
.sv-rules h3 { display: flex; align-items: center; gap: .45em; margin: 0 0 .3em; font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-ext-muted, var(--sv-muted)); }
.sv-rules ul { list-style: none; margin: 0; padding: 0; }
.sv-rules li { display: flex; align-items: flex-start; gap: .7em; padding: .3em 0; font-size: 1em; line-height: 1.4; color: var(--sv-ext-text, var(--sv-text)); }
.sv-rules li .ic { color: var(--sv-accent); margin-top: .15em; }
.sv-report { margin-top: .15em; }

/* Before pickup (standby / screen saver): strictly one screen, never scrolls, nothing to tap.
   Two separate objects: a compact info card and a square QR box (no big empty card around them).
   Portrait: greeting + event on top, info card, then the QR square fills the height that is left.
   Landscape: left 42% = welcome + event spread over the column, right 58% = info card + QR square, centred. */
html[data-sv-mode="standby"], html[data-sv-mode="standby"] body { height: 100dvh; max-height: 100dvh; overflow: hidden; }
.sv.standby { height: 100%; max-height: 100%; overflow: hidden; padding-bottom: .9em; }
.sv.standby .sv-event { display: flex; }
.sv.standby .sv-card.device { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8em; padding: 0; background: none; border: 0; box-shadow: none; overflow: hidden; }
.sv.standby .sv-info { flex: none; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); padding: .15em 1.2em; }
.sv.standby .sv-value.accent { font-size: 1.25em; }
.sv-qrwrap { flex: 1; min-height: 0; display: flex; padding: 0; }
.sv-qr { flex: 1; min-width: 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
/* One square that fits whatever room is left; the caption lives inside it so it can never drift away from the code */
.sv-qr-box { --q: min(100cqw, 100cqh, var(--qr-max, 240px)); width: var(--q); height: var(--q); display: flex; flex-direction: column; background: #fff; padding: .55em .55em .45em; border-radius: .8em; border: 1px solid #E2E8F0; box-shadow: var(--sv-shadow); }
.sv-qr-box svg { flex: 1; min-height: 0; width: 100%; height: 100%; display: block; }
.sv-qr-cap { flex: none; text-align: center; padding-top: .3em; font: 800 .9em/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; color: #111827; }

/* Tablet portrait (600-1000px wide): keep the cards in a centred column instead of stretching edge to edge;
   the QR sits right under the info card (upper part of the screen) */
@media (orientation: portrait) and (min-width: 600px) {
  .sv { max-width: 600px; }
}
.sv.standby .sv-qr { align-items: flex-start; }

/* Landscape tablets / laptops: balanced two-column split, centred and capped so wide screens do not over-stretch */
@media (orientation: landscape) and (min-width: 700px) {
  .sv.standby { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); grid-template-rows: minmax(0, 1fr); column-gap: 2em; align-items: stretch; max-width: min(1100px, 100%); font-size: min(var(--u), 19px); padding: .9em 1.2em; }
  /* greeting + event info: bigger type, spread evenly down the column */
  .sv.standby .sv-greet { display: flex; flex-direction: column; justify-content: space-evenly; gap: .6em; padding: .6em .3em; }
  .sv.standby .sv-greet h1 { font-size: 2.8em; }
  .sv.standby .sv-event { flex: 1; justify-content: space-evenly; gap: .6em; margin-top: 0; font-size: 1.1em; }
  .sv.standby .sv-event .ev-title { font-size: 1.45em; }
  .sv.standby .sv-event .ev-school { font-size: 1.2em; }
  .sv.standby .sv-card.device { height: 100%; }
  .sv.standby .sv-qr { align-items: center; }
  .sv.standby .sv-model { font-size: 1.6em; }
  .sv.standby .sv-row { padding: .7em 0; }
  /* After pickup: device + rules stack on the left, the student card(s) on the right, so both columns end about level */
  .sv.welcome { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "greet greet" "device student" "rules rules"; align-items: start; }
  .sv.welcome .sv-greet { grid-area: greet; }
  .sv.welcome .sv-card.device { grid-area: device; }
  .sv.welcome .sv-card.student { grid-area: student; }
  .sv.welcome .sv-rules { grid-area: rules; }
}

/* Phones in portrait (standby AND after pickup): the whole screen fits one 100dvh page with no bottom overflow.
   Tight 10-12px padding, event info condensed (location max 2 lines), device name larger than the student name,
   long ids on one line, and the rules collapsed into one slim pill. */
.sv-pair { display: contents; }
.sv-rules > div:not(.sv-rules-pill), .sv-rules > .sv-report { display: none; }
.sv-rules { display: block; padding: 0; }
.sv-rules-pill { display: flex; align-items: flex-start; gap: .6em; padding: .55em .9em; border-radius: 1em; font-size: .85em; line-height: 1.4; text-wrap: pretty; color: var(--sv-ext-text, var(--sv-text)); background: var(--sv-card); border: 1px solid var(--sv-line); }
.sv-rules-pill .ic { flex: none; margin-top: .15em; color: var(--sv-accent); }
.sv-rules-pill a { color: var(--sv-accent); font-weight: 700; text-decoration: none; }
@media (orientation: portrait) and (max-width: 599px) {
  .sv .sv-event { font-size: .8em; gap: .15em; margin-top: .3em; }
  .sv .sv-event .ev-title { font-size: 1.1em; }
  .sv .sv-event .t { min-width: 0; font-style: normal; }
  .sv .sv-event .ev-school .t, .sv .sv-event .ev-when .t { white-space: normal; } /* never cut: the fitter shrinks the text instead */
  .sv .sv-event .ev-where .t { display: block; }
  .sv .sv-event span { min-width: 0; }

  .sv.welcome { font-size: 14px; gap: 8px; padding: 8px 12px; height: 100%; max-height: 100%; overflow-y: auto; }
  .sv.welcome .sv-greet { padding: 0 2px; }
  .sv.welcome .sv-greet h1 { font-size: 1.45em; }
  .sv.welcome .sv-card { padding: 2px 12px; border-radius: 14px; }
  .sv.welcome .sv-head { padding: 8px 0 6px; }
  .sv.welcome .sv-model { font-size: 18px; font-weight: 800; white-space: nowrap; min-width: 0; }
  .sv.welcome .sv-sub { font-size: 11px; }
  .sv.welcome .sv-row { padding: 5px 0; min-height: 0; gap: 8px; }
  .sv.welcome .sv-label { font-size: 10.5px; letter-spacing: .05em; }
  .sv.welcome .sv-value { font-size: 14px; }
  .sv.welcome .sv-value.code { font-size: 13px; white-space: nowrap; }
  .sv.welcome .sv-link { font-size: 12px; }
  .sv.welcome .sv-row-link { padding: 4px 0 6px; }
  /* student: name 15-16px semi-bold on ONE line; MSSV + Lớp share a line; Mã ĐK small mono on one line */
  .sv.welcome .sv-index { display: none; }
  .sv.welcome .sv-student { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 12px; }
  .sv.welcome .sv-pair .sv-value { white-space: nowrap; }
  .sv.welcome .sv-student + .sv-student { margin-top: 2px; }
  .sv.welcome .sv-name { grid-column: 1 / -1; font-size: 16px; font-weight: 600; padding: 7px 0 5px; white-space: nowrap; }
  .sv.welcome .sv-pair { display: contents; }
  .sv.welcome .sv-pair .sv-row { border-bottom: 1px solid var(--sv-line); }
  .sv.welcome .sv-pair .sv-row:last-child { border-bottom: 1px solid var(--sv-line); }
  .sv.welcome .sv-student > .sv-row { grid-column: 1 / -1; border-bottom: 0; }
  .sv.welcome .sv-value.code-id { font-size: 12px; max-width: 100%; letter-spacing: -.01em; } /* the fitter shrinks it instead of cutting it */
  .sv.welcome .sv-rules-pill { padding: 7px 12px; font-size: 11.5px; line-height: 1.35; }
  .sv.standby { padding: 8px 12px; }
}

/* Short landscape screens (phones on their side): trim the heading so the card keeps its room */
@media (orientation: landscape) and (max-height: 520px) {
  .sv-greet h1 { font-size: 1.5em; }
  .sv.standby .sv-event { display: none; }
  .sv.standby .sv-model { font-size: 1.3em; }
}

/* A background image sits behind the classic page. Text outside the cards sits on a frosted panel whose tone follows the
   theme (light panel + dark text, or dark panel + light text), so it stays readable on a bright or a dark photo alike. */
.has-bg:not(.pass-layout) { --sv-ext-text: #111827; --sv-ext-muted: #374151; --sv-scrim: rgba(255, 255, 255, .78); --sv-scrim-line: rgba(255, 255, 255, .55); }
.has-bg:not(.pass-layout)[data-theme="dark"] { --sv-ext-text: #fff; --sv-ext-muted: rgba(255, 255, 255, .88); --sv-scrim: rgba(0, 0, 0, .55); --sv-scrim-line: rgba(255, 255, 255, .12); }
.has-bg:not(.pass-layout) .sv-greet,
.has-bg:not(.pass-layout) .sv-rules { background: var(--sv-scrim); border: 1px solid var(--sv-scrim-line); border-radius: 1em; padding: .8em 1em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.has-bg:not(.pass-layout) .sv-event .ev-school { color: var(--sv-accent); }
.has-bg:not(.pass-layout)[data-theme="dark"] .sv-event .ev-school { color: #FFB3BE; }

/* Admin-edited text (bold / italic / colour; Enter = new line) */
.sv-rich b { font-weight: 900; }
.sv-rich.sv-fixed { white-space: nowrap; }
.sv-rich:not(.sv-fixed) { text-wrap: balance; }
/* highlight keeps its rounded box across line breaks; stroke is painted behind the fill so letters stay readable on any photo */
.sv-rich span[style*="background-color"] { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sv-rich span[style*="-webkit-text-stroke"] { paint-order: stroke fill; }

/* ── Type hierarchy, same in every layout ──
   L1 event title (largest) > L2 school > L3 card titles (Sinh viên 1 = Sinh viên 2 = Thông tin máy) > L4 address & student details */
.sv-greet h1 { font-size: 1.45em !important; }
.sv-event .ev-title { font-size: 1.9em !important; font-weight: 800 !important; line-height: 1.2 !important; }
.sv-event .ev-school { font-size: 1.3em !important; font-weight: 600 !important; }
.sv-event .ev-when, .sv-event .ev-where { font-size: .95em !important; }
.sv-model, .sv-name { font-size: 1.2em !important; font-weight: 700 !important; }
.sv-row .sv-value, .sv-row .sv-label { font-size: .95em; }
.sv-rules-pill b { font-weight: 800; }

/* the event block (title, school, time, place) is shown in every state, so the title is always the largest text on screen */
.sv-event { display: flex !important; }
@media (orientation: landscape) and (min-width: 700px) {
  .sv.welcome .sv-event { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .15em 1.4em; }
  .sv.welcome .sv-event .ev-title { flex-basis: 100%; }
}

/* Landscape tablets / laptops: MSSV + Lớp share a line and rows tighten so two students and the rules still fit without scrolling */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 960px) {
  .sv.welcome .sv-student { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2em; }
  .sv.welcome .sv-index, .sv.welcome .sv-name, .sv.welcome .sv-student > .sv-row { grid-column: 1 / -1; }
  .sv.welcome .sv-pair { display: contents; }
  .sv.welcome .sv-student > .sv-row { border-bottom: 0; }
  .sv.welcome .sv-row { padding: .38em 0; min-height: 0; }
}

/* Phones: one consistent ladder, each tier a fixed step below the one above (L1 title > L2 school > L3 device = names > L4 details) */
@media (orientation: portrait) and (max-width: 599px) {
  .sv .sv-event { font-size: 14px; }
  .sv .sv-event .ev-title { font-size: 1.65em !important; }
  .sv .sv-event .ev-school { font-size: 1.2em !important; font-weight: 600 !important; }
  .sv .sv-event .ev-when, .sv .sv-event .ev-where { font-size: .85em !important; }
  .sv.welcome .sv-model, .sv.welcome .sv-name { font-size: 1.1em !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Approved type scale — "Co-chu-man-hinh-sinh-vien.xlsx" (Classic + Pass only; this stylesheet is not used by any other layout).
   Base px are calibrated for a 390 px phone; every size is base × --sf × --k (sv-type.js: --sf phone 1 · tablet 1.15–1.35 ·
   laptop 1.35–1.5; --k ≤ 1 is ONE shrink factor for all text), so sibling ratios never change. The fallbacks below apply before the script runs.
   The selector prefix only lifts these rules above the older !important type rules in this file.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --sf: 1; }
@media (min-width: 600px) and (min-height: 600px) { :root { --sf: 1.25; } }
@media (min-width: 1025px) and (min-height: 600px) { :root { --sf: 1.4; } }
:root {
  --fs-greet: calc(16px * var(--sf) * var(--k, 1));
  --fs-title: calc(24px * var(--sf) * var(--k, 1));
  --fs-school: calc(17px * var(--sf) * var(--k, 1));
  --fs-l3: calc(15px * var(--sf) * var(--k, 1));
  --fs-meta: calc(11px * var(--sf) * var(--k, 1));
  --fs-value: calc(12px * var(--sf) * var(--k, 1));
  --fs-label: calc(12px * var(--sf) * var(--k, 1));
  --fs-code: calc(12px * var(--sf) * var(--k, 1));
  --fs-sub: calc(12px * var(--sf) * var(--k, 1));
  --fs-qr: calc(13px * var(--sf) * var(--k, 1));
  --fs-notes: calc(12px * var(--sf) * var(--k, 1));
}
/* Greeting: a soft lead-in, clearly apart from the programme title */
html:root:root:root .sv .sv-greet h1 { font-size: var(--fs-greet) !important; font-weight: 600 !important; line-height: 1.25 !important;
  color: var(--sv-ext-muted, var(--sv-muted)); letter-spacing: 0; white-space: nowrap; margin: 0 0 .5em; }
/* L1 programme title: dominant, at most 2 lines (sv-type.js breaks it at " - " / ":" when it can) */
html:root:root:root .sv .sv-event .ev-title { font-size: var(--fs-title) !important; font-weight: 800 !important; line-height: 1.18 !important;
  color: var(--sv-ext-text, var(--sv-text)); letter-spacing: -.015em; text-wrap: balance; }
.sv-event .ev-title .ttl-line, .sv-event .ev-school .t .ttl-line { display: block; }   /* meaningful 2-line splits (sv-type.js) */
/* L2 school: exactly one line, brand colour */
html:root:root:root .sv .sv-event .ev-school { font-size: var(--fs-school) !important; font-weight: 600 !important; color: var(--sv-accent); }
html:root:root:root .sv .sv-event .ev-school .t { white-space: nowrap !important; overflow: visible; text-overflow: clip; }
/* L4 time / place */
html:root:root:root .sv .sv-event .ev-when, html:root:root:root .sv .sv-event .ev-where { font-size: var(--fs-meta) !important; font-weight: 400 !important; }
html:root:root:root .sv .sv-event .ev-when .t { white-space: nowrap; }   /* one line unless the admin pressed Enter */
.sv-event .t, .sv-event em { font-style: normal; min-width: 0; }   /* the event lines are <em>: never italic */
/* L3 device name = student name */
html:root:root:root .sv .sv-model, html:root:root:root .sv .sv-name { font-size: var(--fs-l3) !important; font-weight: 700 !important; white-space: nowrap; }
/* values, labels, codes, colour, QR caption, notes */
html:root:root:root .sv .sv-value { font-size: var(--fs-value) !important; font-weight: 700; }
html:root:root:root .sv .sv-label { font-size: var(--fs-label) !important; font-weight: 600; text-transform: uppercase; }
html:root:root:root .sv .sv-value.code { white-space: nowrap; overflow-wrap: normal; }
html:root:root:root .sv .sv-value.code-id { font-size: var(--fs-code) !important; font-weight: 700; }
html:root:root:root .sv .sv-sub { font-size: var(--fs-sub) !important; font-weight: 500; }
html:root:root:root .sv .sv-link { font-size: var(--fs-value) !important; }
html:root:root:root .sv .sv-qr-cap { font-size: var(--fs-qr) !important; font-weight: 800; }
html:root:root:root .sv .sv-rules-pill { font-size: var(--fs-notes) !important; }
.sv-notes { min-width: 0; }
.sv-notes ul { margin: 0; padding: 0 0 0 1.1em; display: flex; flex-direction: column; gap: .3em; list-style: disc; }
.sv-notes li { display: list-item; line-height: 1.4; padding: 0; }
.sv-notes li::marker { color: var(--sv-accent); }
.sv-notes li b { font-weight: 800; }
.sv-notes a { display: inline-block; margin-top: .35em; }

/* ── Phones (portrait ≤ 600 px): fold the event details, notes behind a one-line trigger ── */
.sv-more, .sv-notes-btn { display: none; }
/* phones held sideways get the same fold: their height is the scarce side */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .sv-more { display: inline-flex; align-self: flex-start; align-items: center; gap: .3em; margin: .15em 0 0; padding: .3em .75em;
    border: 1px solid var(--sv-line); border-radius: 99px; background: transparent; color: var(--sv-accent);
    font-family: inherit; font-size: var(--fs-value); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sv-more .sv-more-c { display: none; }
  html.sv-more-open .sv-more .sv-more-o { display: none; }
  html.sv-more-open .sv-more .sv-more-c { display: inline; }
  html:not(.sv-more-open) .sv .sv-event .ev-school,
  html:not(.sv-more-open) .sv .sv-event .ev-when,
  html:not(.sv-more-open) .sv .sv-event .ev-where { display: none !important; }

  html:root:root:root .sv .sv-rules-pill { display: none !important; }
  .sv-notes-btn { display: flex; align-items: center; gap: .55em; width: 100%; padding: .7em .95em; border-radius: 14px;
    border: 1px solid var(--sv-line); background: var(--sv-card); color: var(--sv-ext-text, var(--sv-text));
    font-family: inherit; font-size: var(--fs-notes); font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sv-notes-btn .ic { color: var(--sv-accent); flex: none; }
  .sv-notes-btn span { flex: 1; min-width: 0; white-space: nowrap; } /* one line: sv-type.js shrinks it if the phone is narrow */
  .sv-notes-btn em { font-style: normal; font-weight: 500; color: var(--sv-muted); }
  .sv-notes-btn b { color: var(--sv-accent); font-weight: 800; }
}

/* ── Notes popup (full, unmodified text) ── */
.sv-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.sv-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.sv-modal-card { position: relative; width: min(100%, 460px); max-height: 100%; overflow: auto; background: #fff; color: #111827;
  border-radius: 18px; padding: 18px 18px 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); font-size: 14px; line-height: 1.45; }
.sv-modal-card h3 { display: flex; align-items: center; gap: .5em; margin: 0 0 .7em; font-size: 16px; font-weight: 800; }
.sv-modal-card h3 .ic { color: #D70018; }
.sv-modal-card ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: .5em; }
.sv-modal-card li::marker { color: #D70018; }
.sv-modal-card li b { font-weight: 800; }
.sv-modal-link { display: inline-block; margin-top: .8em; color: #D70018; font-weight: 700; text-decoration: none; }
.sv-modal-ok { display: block; width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 12px; background: #D70018; color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
html[data-theme="dark"] .sv-modal-card { background: #1f2937; color: #f9fafb; }
@media (min-width: 601px) { .sv-modal { align-items: center; } }