/* ══════════════════════════════════════════════════════════════════════════
   app-theme.css — visual reskin of the instantproof.legal application.

   Loaded AFTER bootstrap.min.css / dataTables.bootstrap.css / app.css and
   overrides their visuals only. It introduces no new markup hooks and must
   never change behaviour: all ids, names, data-testids, class hooks used by
   app.js / the e2e tests and Bootstrap's own JS classes are left untouched.
   Layout mechanics (fixed 230px sidebar, ≤900px slide-in sidebar via
   body.sidebar-open, DataTables horizontal scroll ≤768px) still live in
   app.css; this file only re-colours / re-types them.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0D1B33;
  --ink-2: #34435A;
  --muted: #5B6B7C;
  --primary: #1B3A6B;
  --primary-hover: #2755A8;
  --accent: #00B99E;
  --accent-ink: #00705F;
  --accent-soft: #E3F7F3;
  --gold: #C4960E;
  --gold-soft: #FBF3DC;
  --paper: #FFFFFF;
  --paper-2: #F5F8FC;
  --soft: #EDF4FB;
  --line: #CFDEED;
  --line-2: #E4ECF5;
  --side: #0F2547;
  --side-ink: #D6E2F2;
  --side-muted: #8FA6C4;
  --good: #0E7C5B;
  --good-soft: #E1F5EC;
  --warn: #9A6B00;
  --warn-soft: #FFF4D6;
  --bad: #B4321F;
  --bad-soft: #FBE7E3;
  --info-soft: #E7EEF9;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-card: 12px;
  --radius-ctl: 7px;
}

/* ── Base typography ─────────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
body.nav-md,
body.login,
body.share-body,
body.page-verify { background: var(--paper-2); }

h1, h2, .x_title h2, .login-card h2, .share-card h1, .verify-card h1, .progress-page h1,
.pricing .title h1, .pricing .title h2, .choice-title, .cert-choice h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
h1 { font-size: 30px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.25; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }

a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-hover); }
.text-muted, .help-block { color: var(--muted); }
.lead { font-size: 15px; font-weight: 400; color: var(--ink-2); }
p { margin: 0 0 10px; }
hr { border-top: 1px solid var(--line-2); }

code, kbd, pre, samp, .verify-hash, #balance, #session-countdown,
td[style*="letter-spacing"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
code {
  background: var(--soft); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 4px;
  padding: 1px 5px; font-size: 12.5px;
}
pre {
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px;
  font-size: 12.5px; padding: 10px 12px;
}
pre code { background: transparent; border: 0; padding: 0; font-size: inherit; }

/* Uppercase small labels */
.table > thead > tr > th,
.dt-table thead th,
.verify-table th,
.rec-expand-inner label {
  font-size: 0.7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.left_col { background: var(--side); color: var(--side-ink); }
.nav_title { background: var(--side); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 20px 18px 18px; }
.app-brand-name { color: #fff; font-weight: 600; font-size: 16px; }
.app-brand-tld  { color: var(--accent); }

.side-menu li a { color: var(--side-ink); font-size: 14px; font-weight: 500; }
.side-menu .accordion-heading {
  background: transparent; border-top: 0;
  min-height: 46px; padding: 12px 16px 11px;
  font-size: 0.7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--side-muted); font-weight: 600;
  transition: color .15s ease, background-color .15s ease;
}
.side-menu .accordion-heading:hover,
.side-menu .accordion-group.open > .accordion-heading { color: #fff; background: rgba(255,255,255,0.04); }
.side-menu .accordion-heading > i:first-child { width: 22px; font-size: 14px; color: var(--side-muted); }
.side-menu .accordion-group.open > .accordion-heading > i:first-child { color: var(--accent); }
.side-menu .accordion-heading .fa-chevron-down {
  color: var(--side-muted); font-size: 10px;
  transition: transform .2s ease;
}
.side-menu .accordion-group.open > .accordion-heading .fa-chevron-down { transform: rotate(180deg); }

.child_menu { background: rgba(0,0,0,0.18); padding: 6px 0 8px; }
.child_menu::before,
.child_menu li::before { display: none; }              /* drop the tree-line decoration */
.child_menu li { min-height: 0; border-left: 3px solid transparent; }
.child_menu li a { padding: 8px 16px 8px 35px; font-size: 14px; font-weight: 400; color: var(--side-ink); line-height: 20px; }
.child_menu li a .fa-external-link { font-size: 10px; color: var(--side-muted); margin-left: 4px; }
.child_menu li:hover { background: rgba(255,255,255,0.05); }
.child_menu li.active { background: rgba(255,255,255,0.08); border-left-color: var(--accent); }
.child_menu li.active a { color: #fff; font-weight: 500; }
.side-menu em { color: var(--accent); font-style: normal; font-size: 11px; }
.storage-box {
  color: var(--side-muted); border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px; font-weight: 500; padding: 14px 18px;
  font-variant-numeric: tabular-nums;
}
.storage-box .fa { color: var(--side-muted); }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.top_nav { background: var(--paper); border-bottom: 1px solid var(--line-2); min-height: 0; }
.nav_menu { min-height: 56px; padding: 8px 16px; display: flex; align-items: center; }
.nav_menu nav { width: 100%; display: flex; align-items: center; }
.nav_menu .navbar-right {
  margin-left: auto; float: none; padding-right: 0; max-width: calc(100% - 52px);
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
}
.nav_menu .navbar-right > li { display: block; overflow-wrap: anywhere; }
.nav_menu .navbar-right strong { color: var(--ink); font-weight: 600; }
#balance { color: var(--ink); font-weight: 600; font-size: 14px; }
/* "Prepaid" as a small teal pill */
.nav_menu .navbar-right .text-muted {
  display: inline-block; background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}
.nav_menu .navbar-right .btn-link { color: var(--primary); font-size: 13px; font-weight: 500; }
.nav_menu .navbar-right .btn-link:hover { color: var(--primary-hover); text-decoration: underline; }
.nav.toggle { color: var(--ink); padding: 8px 10px 8px 0; font-size: 20px; }

/* 2FA notice — soft gold band */
#disclaimer {
  background: var(--gold-soft); color: var(--ink-2);
  border-top: 1px solid #F1E3B5; border-bottom: 1px solid #F1E3B5;
  font-size: 13px; padding: 9px 16px; line-height: 1.5;
}
#disclaimer .fa-bullhorn { color: var(--gold); margin-right: 4px; }
#disclaimer a { color: var(--primary); font-weight: 600; }

/* ── Main content + cards ────────────────────────────────────────────────── */
/* The app shell sits in a Bootstrap .container: let it span the viewport so
   the content column starts right after the fixed sidebar. */
.container.body { width: auto; max-width: none; padding: 0; margin: 0; }
.right_col { background: var(--paper-2); padding: 8px 28px 32px; min-height: calc(100vh - 57px); }

.x_title { border-bottom: 0; padding: 0; margin: 22px 0 14px; display: flex; align-items: center; gap: 8px; }
.x_title h2 { font-size: 26px; margin: 0; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.x_title h2 small { font-family: var(--font-sans); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.x_title .refresh_icon { float: none; margin-left: auto; font-size: 16px; color: var(--muted); padding: 6px; border-radius: 6px; order: 2; }
.x_title .refresh_icon:hover { color: var(--primary); background: var(--soft); }
.x_title .clearfix { display: none; }

.x_content, .create-form {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-card);
  padding: 20px 22px; margin-bottom: 28px;
}
.x_content.rounded-border { border: 1px solid var(--line-2); }
.x_content h4 { margin-top: 18px; }
.x_content h4:first-child, .x_content > .alert:first-child + h4 { margin-top: 4px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-ctl); font-weight: 600; font-family: var(--font-sans);
  font-size: 13.5px; padding: 7px 14px; line-height: 1.45;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  text-shadow: none; box-shadow: none;
}
.btn:focus, .btn:active:focus { outline: 0; box-shadow: 0 0 0 3px var(--info-soft); }
.btn-lg { font-size: 15px; padding: 10px 20px; border-radius: 8px; }
.btn-sm { font-size: 12.5px; padding: 5px 11px; border-radius: 6px; }
.btn-xs { font-size: 12px; padding: 3px 9px; border-radius: 6px; font-weight: 500; }

.btn-primary, .btn-primary:focus { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover, .btn-primary:active, .btn-primary:active:hover, .btn-primary:active:focus {
  background: var(--primary-hover); border-color: var(--primary-hover); color: #fff;
}
.btn-primary[disabled], .btn-primary.disabled, .btn-primary[disabled]:hover {
  background: var(--primary); border-color: var(--primary); opacity: .45;
}

.btn-default, .btn-default:focus, .btn-secondary, .btn-secondary:focus {
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.btn-default:hover, .btn-default:active, .btn-default:active:hover, .btn-default:active:focus,
.btn-secondary:hover, .btn-secondary:active {
  background: var(--paper-2); border-color: #B9CCE0; color: var(--ink);
}
.btn-default[disabled], .btn-default.disabled { background: var(--paper); border-color: var(--line-2); color: var(--muted); }

.btn-danger, .btn-danger:focus { background: var(--paper); border: 1px solid #E5A79C; color: var(--bad); }
.btn-danger:hover, .btn-danger:active, .btn-danger:active:hover, .btn-danger:active:focus {
  background: var(--bad-soft); border-color: var(--bad); color: var(--bad);
}

.btn-success, .btn-success:focus { background: var(--good); border-color: var(--good); color: #fff; }
.btn-success:hover, .btn-success:active, .btn-success:active:hover { background: #0A6549; border-color: #0A6549; color: #fff; }
.btn-success[disabled], .btn-success.disabled, .btn-success[disabled]:hover {
  background: var(--good-soft); border-color: var(--good-soft); color: var(--good); opacity: 1;
}

.btn-link { color: var(--primary); font-weight: 500; }
.btn-link:hover { color: var(--primary-hover); }

.btn-expand { color: var(--primary); }
.btn-expand:hover { color: var(--primary-hover); }
.btn-icon-delete { color: var(--bad); }
.cert-icon-btn { color: var(--primary); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
label, .form-label, .control-label { font-weight: 600; color: var(--ink-2); font-size: 13px; margin-bottom: 5px; }
.form-label { display: inline-block; }
.mb-3 { margin-bottom: 16px; }
.mt-3 { margin-top: 16px; }
.w-100 { width: 100%; }
.form-control {
  border: 1px solid var(--line); border-radius: var(--radius-ctl);
  box-shadow: none; color: var(--ink); font-size: 14px; height: 38px; padding: 7px 12px;
  background: var(--paper);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--info-soft); }
.form-control::placeholder { color: #93A3B5; }
.form-control.input-lg, .input-lg { height: 44px; font-size: 15px; border-radius: 8px; }
.form-control.input-sm, .input-sm { height: 32px; font-size: 13px; border-radius: 6px; }
textarea.form-control { height: auto; }
select.form-control { padding-right: 28px; }
.input-group .form-control { border-radius: var(--radius-ctl); }
.input-group-btn:first-child > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .input-group-btn:first-child + .form-control,
.input-group .input-group-btn + span.form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.radio-inline, .checkbox label { font-weight: 400; color: var(--ink); }
.help-block-inline { color: var(--muted); font-weight: 400; }
#terms-box { border-color: var(--line) !important; border-radius: 8px !important; background: var(--paper-2) !important; color: var(--ink-2); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert { border-radius: 10px; border: 1px solid transparent; padding: 12px 16px; font-size: 13.5px; }
.alert h4 { margin: 0 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.alert h5 { margin: 12px 0 6px; }
.alert-info    { background: var(--info-soft); border-color: #D3DEEF; color: var(--ink-2); }
.alert-success { background: var(--good-soft); border-color: #BDE5D2; color: var(--good); }
.alert-warning { background: var(--warn-soft); border-color: #F1DFA6; color: var(--warn); }
.alert-danger  { background: var(--bad-soft);  border-color: #F0C3BA; color: var(--bad); }
.alert a { font-weight: 600; text-decoration: underline; color: inherit; }
.alert .table { color: var(--ink); }
.alert .btn-default { color: var(--ink); }
.label-default { background: var(--soft); color: var(--muted); font-weight: 600; border-radius: 999px; padding: 3px 8px; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { margin-bottom: 12px; }
.table > thead > tr > th {
  border-bottom: 1px solid var(--line) !important; padding: 10px 12px; vertical-align: bottom;
  background: var(--paper);
}
.table > tbody > tr > td { padding: 11px 12px; border-top: 1px solid var(--line-2); vertical-align: middle; color: var(--ink); }
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover { background: var(--paper-2); }
.table-bordered { border: 0; }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td { border-left: 0; border-right: 0; }
.table-bordered > thead > tr > th { border-top: 0; }
.table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: 6px 8px; }
.table td a { font-weight: 500; }
/* ID + date columns in the certificate tables in mono */
.dt-table > tbody > tr > td:nth-child(2),
.dt-table > tbody > tr > td:nth-child(3) { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.dt-table > tbody > tr > td:nth-child(2) { white-space: nowrap; }
.dt-table td a[href^="http"] { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 768px) {
  /* On phones the table scrolls inside its card; keep URL cells readable instead of wrapping per character. */
  .dt-table td:has(a[href^="http"]) { min-width: 22ch; }
  .dt-table th, .dt-table td { white-space: normal; }
}
/* Wide tables scroll inside their card at every breakpoint instead of pushing the page wider */
.x_content .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rec-expand-row > td, table.dataTable tbody tr.child td { background: var(--paper-2) !important; }
.rec-expand-body { background: var(--paper-2); }

/* Status pill for blocked (bot-protection) rows — the span carries an inline style */
[data-testid="blocked-cert"] > span {
  background: var(--warn-soft) !important; color: var(--warn) !important;
  border: 1px solid #EBD7A0; border-radius: 999px !important; padding: 2px 10px !important;
  font-weight: 600; font-size: 12px !important;
}
/* Origin tags (WebTrack / Batch / API / Assisted) */
[data-testid^="origin-"] > a, [data-testid^="origin-"] > span {
  color: var(--muted) !important; border-color: var(--line) !important;
  border-radius: 999px !important; padding: 1px 8px !important; background: var(--paper-2);
}

/* ── DataTables wrapper ──────────────────────────────────────────────────── */
.dataTables_wrapper { padding-top: 4px; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 8px; }
.dataTables_wrapper .dataTables_filter label { font-weight: 500; color: var(--muted); font-size: 13px; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 6px 10px;
  margin-left: 8px; height: 34px; font-size: 13px; color: var(--ink); background: var(--paper);
}
.dataTables_wrapper .dataTables_filter input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--info-soft); }
.dataTables_wrapper .dataTables_info { color: var(--muted); font-size: 12.5px; padding-top: 12px; font-variant-numeric: tabular-nums; }
.dataTables_wrapper .dataTables_paginate { padding-top: 6px; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 4px 0 0; }
.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--paper);
  margin-left: 4px; border-radius: 6px !important; padding: 5px 10px; font-size: 12.5px; font-weight: 500;
}
.dataTables_wrapper .dataTables_paginate .pagination > li > a:hover { background: var(--paper-2); color: var(--primary); }
.dataTables_wrapper .dataTables_paginate .pagination > .active > a,
.dataTables_wrapper .dataTables_paginate .pagination > .active > a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > a:hover { color: #A9B7C6; background: var(--paper); border-color: var(--line-2); }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-image: none; }
table.dataTable { border-collapse: collapse !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--line-2); }
.dataTables_empty { color: var(--muted); text-align: center; padding: 22px !important; }

/* Certificate filter bar */
.cert-filter-select, .cert-filter-input { margin-bottom: 8px; }

/* ── Certificate wizard ──────────────────────────────────────────────────── */
.form_wizard.wizard_horizontal { margin: 6px auto 18px; }
.wizard_steps li::before { height: 2px; background: var(--line); top: 21px; }
.wizard_steps li:first-child::before { background: var(--line); }
.step_no {
  width: 44px; height: 44px; font-size: 16px; font-weight: 600;
  background: var(--paper); color: var(--muted); border: 2px solid var(--line);
  font-family: var(--font-mono);
}
.wizard_steps li:first-child .step_no,
.wizard_steps li.current .step_no { background: var(--paper); color: var(--primary); border-color: var(--primary); }
.wizard_steps li.done .step_no { background: var(--good); color: #fff; border-color: var(--good); }
.wizard_steps li.done::before { background: var(--good); }
.step_descr { color: var(--muted); font-weight: 500; font-size: 12px; }

.choice-title { font-size: 26px; margin: 18px 0 20px; }
.cert-choice-grid { gap: 16px; }
.cert-choice {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  min-height: 220px; padding: 22px 16px; position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cert-choice:hover, .selector-service:hover { border: 1px solid var(--primary); }
.cert-choice.selected {
  border: 1px solid var(--primary); background: var(--paper);
  box-shadow: 0 0 0 3px var(--info-soft);
}
.cert-choice h2 { font-size: 22px; margin: 12px 0 4px; }
.cert-choice .link-title { color: var(--primary); font-size: 13px; font-weight: 500; }
.cert-choice .help-block-inline { font-size: 13px; color: var(--muted); max-width: 300px; margin-top: 4px; }
.choice-icon { width: 96px; height: 96px; font-size: 38px; background: var(--soft); color: var(--primary); }
.website-icon { background: var(--soft); }
.file-icon    { background: var(--accent-soft); }
label[for="certTypeWhatsapp"] .choice-icon,
label[for="captureRecord"] .choice-icon { background: var(--gold-soft); }
.cert-choice.selected .choice-icon { background: var(--primary); color: #fff; }
.certificate-flow { color: var(--ink-2); }
.capture-mode-choice .radio-inline { margin: 4px 12px 4px 0; }
#filename, #waFilename { display: table-cell; text-align: left; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.credit-dialog, .ip-confirm-dialog { border-color: var(--line) !important; border-radius: 12px !important; color: var(--ink); font-family: var(--font-sans); }
.credit-dialog h4 { font-family: var(--font-serif); font-weight: 400; font-size: 20px; }
dialog::backdrop { background: rgba(13,27,51,.45); }

/* ── Top-up ──────────────────────────────────────────────────────────────── */
.amount-grid { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
.amount-option { border-right: 1px solid var(--line-2); font-size: 17px; font-family: var(--font-mono); color: var(--ink); }
.amount-option:hover { background: var(--paper-2); }
.amount-option.selected { background: var(--primary); color: #fff; font-weight: 600; }
.other-amount { color: var(--ink); }

/* ── Pricing / subscription plans ────────────────────────────────────────── */
.subscription-plans { margin-top: 16px; }
.pricing {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-card);
  border-top: 3px solid var(--accent); overflow: hidden; margin-bottom: 20px;
}
.pricing .title { background: var(--paper); color: var(--ink); padding: 22px 18px 6px; min-height: 0; }
.pricing .title h2 { font-size: 20px; font-weight: 400; margin: 0; color: var(--ink-2); }
.pricing .title h1 { font-size: 28px; margin: 10px 0 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.subscription-plans .pricing .title { min-height: 120px; }      /* keeps price clear of the ribbon */
.pricing_features { background: var(--paper); padding: 16px 18px; min-height: 0; border-top: 1px solid var(--line-2); }
.subscription-plans .pricing_features { min-height: 290px; }
.pricing_features ul li { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.pricing_features .fa-check { color: var(--good); }
.pricing_features .fa-times { color: var(--bad); }
.pricing_features .text-success { color: var(--good); }
.pricing_features .text-danger { color: var(--bad); }
.pricing_footer { background: var(--paper-2); border-top: 1px solid var(--line-2); padding: 14px; }
.pricing_footer .btn { font-size: 14px; }
.ui-ribbon-container { border-radius: var(--radius-card); }
.ui-ribbon { background: var(--primary); font-size: 12px; font-weight: 600; }
.ui-ribbon[style*="background"] { background: var(--good) !important; }

/* ── Batch / WebTrack / API keys ─────────────────────────────────────────── */
.batch-area { font-size: 14px; font-family: var(--font-mono); line-height: 1.55; }
.batch-note { font-size: 13px; color: var(--muted); }
.form-inline .form-group { margin-bottom: 8px; }
.form-inline label { margin-right: 6px; }

/* ── Progress page ───────────────────────────────────────────────────────── */
.progress-page { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-card); padding: 32px 36px; margin: 32px auto; }
.progress-page h1 { color: var(--ink); font-size: 28px; }
.progress-page h2 { font-size: 18px; color: var(--ink-2); font-family: var(--font-sans); font-weight: 500; }
.progress-page .progress { height: 10px; border-radius: 999px; background: var(--soft); box-shadow: none; margin: 22px 0; }
.progress-page .progress-bar { background-color: var(--primary); box-shadow: none; border-radius: 999px; }
.progress-bar-striped, .progress-striped .progress-bar {
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent);
}
.progress-checklist { font-size: 15px; }
.progress-checklist li { color: var(--muted); }
.progress-checklist li::before { color: var(--line); }
.progress-checklist li.done { color: var(--ink); }
.progress-checklist li.done::before { color: var(--good); }

/* ── Session toolbar ─────────────────────────────────────────────────────── */
.session-toolbar {
  background: var(--side); color: var(--side-ink); border-radius: 10px 10px 0 0;
  margin-top: 16px; height: auto; min-height: 60px; flex-wrap: wrap; font-size: 13.5px;
}
.session-toolbar div:first-child { font-size: 14px; color: #fff; }
/* Ghost style only for the toolbar's own buttons: the confirm <dialog>s live inside the toolbar
   but are white, so a white-text ghost button there is invisible until hover. */
.session-toolbar .btn-danger:not(dialog .btn-danger) { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; }
.session-toolbar .btn-danger:not(dialog .btn-danger):hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.session-toolbar dialog .btn-danger, .session-toolbar dialog .btn-danger:focus { background: var(--bad); border-color: var(--bad); color: #fff; }
.session-toolbar dialog .btn-danger:hover, .session-toolbar dialog .btn-danger:active { background: #8E2F22; border-color: #8E2F22; color: #fff; }
.recording-dot { color: #FF5A47; }
.novnc-frame { border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 10px 10px; background: #0B1424; }

/* ── Login / auth card ───────────────────────────────────────────────────── */
.login-card { border: 1px solid var(--line-2); border-radius: var(--radius-card); padding: 36px 40px; margin: 56px auto; text-align: left; }
.login-logo-wrap { margin-bottom: 22px; }
.login-brand-name { font-weight: 600; font-size: 18px; }
.login-brand-tld { color: var(--accent); }
.login-card h2 { font-size: 26px; text-align: center; margin: 0 0 18px; }
.login-card p { color: var(--ink-2); }
.login-card input { margin-bottom: 0; }
.login-card .list-group-item { font-family: var(--font-mono); border-color: var(--line-2); color: var(--ink); }
.login-card .list-group-item:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.login-card .list-group-item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.login-card .checkbox label, .login-card .form-group > label { font-weight: 400; color: var(--ink-2); }
.login-card .text-center a { font-weight: 500; }
altcha-widget { display: block; }

/* ── Share + verify pages ────────────────────────────────────────────────── */
.share-brand, .verify-brand { font-weight: 600; color: var(--ink); gap: 0; }
.share-brand svg, .verify-brand svg { margin-right: 10px; }
.brand-tld { color: var(--accent); }
.share-card, .verify-card { border: 1px solid var(--line-2); border-radius: var(--radius-card); box-shadow: none; }
.share-card h1, .verify-card h1 { color: var(--ink); font-size: 30px; margin-bottom: 12px; }
.verify-good { color: var(--good) !important; }
.verify-bad  { color: var(--bad) !important; }
.share-field label, .verify-field label { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.share-field input, .verify-field input[type="text"] {
  border: 1px solid var(--line); border-radius: var(--radius-ctl); font-size: 15px; color: var(--ink);
}
.share-field input:focus, .verify-field input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--info-soft); }
#secret_code { font-family: var(--font-mono); letter-spacing: .08em; }
.share-meta { color: var(--muted); }
.share-meta strong { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.share-video { border-radius: 10px; }
.verify-table th { color: var(--muted); }
.verify-table td { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }

/* ── Small utilities used by the pages ───────────────────────────────────── */
.dark-blue { color: var(--ink); }
.text-success { color: var(--good); }
.text-danger { color: var(--bad); }

/* ── Responsive tweaks (mechanics stay in app.css) ───────────────────────── */
@media (max-width: 900px) {
  .right_col { padding: 8px 16px 28px; }
  .x_content, .create-form { padding: 16px; }
  .progress-page { padding: 22px 18px; margin: 20px auto; }
}
@media (max-width: 768px) {
  /* Plain (non-DataTables) tables scroll inside their card instead of being clipped */
  .x_content > table.table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .x_title h2 { font-size: 22px; }
  .choice-title { font-size: 22px; }
  .cert-choice { min-height: 170px; padding: 18px 12px; }
  .choice-icon { width: 72px; height: 72px; font-size: 28px; }
  .login-card { padding: 24px 18px; }
  .login-card h2 { font-size: 22px; }
  .nav_menu .navbar-right { font-size: 12px; }
  .session-toolbar { padding: 10px 12px; gap: 8px; }
  .step_no { width: 38px; height: 38px; font-size: 14px; }
  .wizard_steps li::before { top: 18px; }
}