/* LoadPulse portal UI system. Needs lp-tokens.css.
   One definition per component. Older class names (.btn, .card, .badge, .a-btn ...) are listed in the same selectors on purpose:
   every equivalent component renders and behaves identically on every page. */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; min-height: 100vh; background: var(--lp-bg); color: var(--lp-ink); font-family: var(--lp-font); font-size: var(--lp-fs-md); line-height: 1.55;
  font-weight: var(--lp-w-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; font-weight: var(--lp-w-bold); }
h1 { font-size: var(--lp-fs-xl); } h2 { font-size: var(--lp-fs-lg); } h3 { font-size: var(--lp-fs-md); }
p { margin: 0 0 var(--lp-s2); }
a { color: var(--lp-ink); text-decoration-color: var(--lp-silver); text-underline-offset: 3px; transition: text-decoration-color var(--lp-dur); }
a:hover { text-decoration-color: var(--lp-ink); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
code, .lp-mono { font-family: var(--lp-mono); font-size: .92em; }
.muted { color: var(--lp-slate); } .small { font-size: var(--lp-fs-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.ic { flex: none; vertical-align: -3px; }
:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; border-radius: 6px; }
main[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--lp-soft); }

/* ---------- buttons ---------- */
.lp-btn, .btn, .a-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--lp-s2); min-height: 40px; padding: 0 var(--lp-s4);
  font-weight: var(--lp-w-medium); font-size: var(--lp-fs-sm); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--lp-ink); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); box-shadow: var(--lp-sh-1);
  transition: background var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease), transform 120ms var(--lp-ease), color var(--lp-dur);
}
.lp-btn:hover, .btn:hover, .a-btn:hover { background: var(--lp-mist); border-color: var(--lp-silver); }
.lp-btn:active, .btn:active, .a-btn:active { transform: translateY(1px); box-shadow: none; }
.lp-btn.primary, .btn.primary, .a-btn:not(.ghost) {
  color: var(--lp-on-acc); border-color: transparent; background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); box-shadow: 0 8px 18px -12px rgba(11,15,26,.7);
}
.lp-btn.primary:hover, .btn.primary:hover, .a-btn:not(.ghost):hover { background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); filter: brightness(1.1); border-color: transparent; }
.lp-btn.danger, .btn.danger { color: var(--lp-neg-text); border-color: color-mix(in srgb, var(--lp-neg) 40%, var(--lp-line)); }
.lp-btn.danger:hover, .btn.danger:hover { background: var(--lp-neg-bg); }
.lp-btn.ghost, .a-btn.ghost { background: transparent; box-shadow: none; }
.lp-btn.sm, .btn.sm, .a-btn.sm { min-height: 32px; padding: 0 var(--lp-s3); font-size: var(--lp-fs-xs); border-radius: var(--lp-r-sm); }
.lp-btn.icon, .btn.icon { width: 40px; padding: 0; } .lp-btn.sm.icon, .btn.sm.icon { width: 32px; }
.lp-btn.block, .block { width: 100%; }
.lp-btn[disabled], .btn[disabled], .a-btn[disabled], .lp-btn[aria-disabled="true"], .btn[aria-disabled="true"], .a-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; box-shadow: none; pointer-events: none; }
.lp-btn[aria-busy="true"], .btn[aria-busy="true"], .a-btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.lp-btn[aria-busy="true"]::after, .btn[aria-busy="true"]::after, .a-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lp-ink); border-right-color: transparent; animation: lp-spin .7s linear infinite; }
.lp-btn.primary[aria-busy="true"]::after, .btn.primary[aria-busy="true"]::after, .a-btn:not(.ghost)[aria-busy="true"]::after { border-color: var(--lp-on-acc); border-right-color: transparent; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* ---------- form controls ---------- */
.lp-field, .field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.lp-field > label, .field > label, .a-field { font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); color: var(--lp-slate); margin: 0; }
.lp-input, .field input, .field select, .field textarea, .a-field input, .lp-select, .toolbar input, .toolbar select, .lp-search input {
  width: 100%; min-height: 42px; padding: 0 var(--lp-s3); color: var(--lp-ink); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md);
  transition: border-color var(--lp-dur), box-shadow var(--lp-dur), background var(--lp-dur);
}
.field textarea, textarea.lp-input { min-height: 96px; padding: var(--lp-s3); resize: vertical; line-height: 1.5; }
.field select, select.lp-input, .toolbar select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--lp-slate) 50%), linear-gradient(135deg, var(--lp-slate) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input::placeholder, .a-field input::placeholder, .lp-input::placeholder { color: var(--lp-slate); opacity: .7; }
.field input:hover, .field select:hover, .a-field input:hover, .lp-input:hover { border-color: var(--lp-silver); }
.field input:focus, .field select:focus, .field textarea:focus, .a-field input:focus, .lp-input:focus, .toolbar input:focus, .toolbar select:focus { outline: none; background: var(--lp-card); border-color: var(--lp-acc2); box-shadow: 0 0 0 3px var(--lp-glow); }
.field input[readonly], .lp-input[readonly] { color: var(--lp-slate); }
.field input:disabled, .lp-input:disabled { opacity: .55; cursor: not-allowed; }
.field input[aria-invalid="true"], .a-field input[aria-invalid="true"] { border-color: var(--lp-neg); box-shadow: 0 0 0 3px var(--lp-neg-bg); }
.hint { margin: 0; color: var(--lp-slate); font-size: var(--lp-fs-xs); }
.field label.check, label.check { display: flex; gap: var(--lp-s2); align-items: center; font-size: var(--lp-fs-sm); font-weight: var(--lp-w-medium); color: var(--lp-ink); }
.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--lp-acc); }
.form-grid { display: grid; gap: var(--lp-s3) var(--lp-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.stack { display: grid; gap: var(--lp-s3); } .row { display: flex; gap: var(--lp-s2); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
fieldset { border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); padding: var(--lp-s3) var(--lp-s4) var(--lp-s4); margin: 0; min-width: 0; }
legend { font-weight: var(--lp-w-bold); padding: 0 var(--lp-s2); font-size: var(--lp-fs-sm); }
.lp-switch { appearance: none; position: relative; width: 38px; height: 22px; border-radius: var(--lp-r-pill); background: var(--lp-silver); cursor: pointer; flex: none; transition: background var(--lp-dur); }
.lp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--lp-card); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform var(--lp-dur) var(--lp-ease); }
.lp-switch:checked { background: var(--lp-acc); } .lp-switch:checked::after { transform: translateX(16px); }

/* ---------- surfaces ---------- */
.lp-card, .card { min-width: 0; padding: var(--lp-s5); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); box-shadow: var(--lp-sh-2); }
.lp-card > header, .card > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-s2) var(--lp-s3); margin-bottom: var(--lp-s4); }
.lp-card > header h2, .card > header h2 { font-size: var(--lp-fs-lg); }
.lp-card > header .lp-ico, .card > header > .ic { color: var(--lp-slate); }
.lp-card.flat { box-shadow: none; }
.lp-card.dashed { border-style: dashed; box-shadow: none; background: transparent; }
.lp-ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--lp-deep); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); }
.lp-ico.solid { color: var(--lp-on-acc); background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); border-color: transparent; }
.grid { display: grid; gap: var(--lp-s4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
@media (max-width: 900px) { .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; } .form-grid { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: var(--lp-s2) var(--lp-s4); margin: 0; font-size: var(--lp-fs-sm); }
.kv dt { color: var(--lp-slate); } .kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .kv { grid-template-columns: 1fr; } .kv dt { margin-top: var(--lp-s2); } }
.lp-divider { height: 1px; margin: var(--lp-s4) 0; background: var(--lp-line); border: 0; }

/* ---------- badges, chips, alerts ---------- */
.lp-badge, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); line-height: 1.4; white-space: nowrap;
  color: var(--lp-deep); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-pill); }
.lp-badge::before, .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-slate); }
.lp-badge.ok::before, .badge.ok::before, .badge.active::before { background: var(--lp-pos); }
.lp-badge.warn::before, .badge.warn::before, .badge.trial::before, .badge.past_due::before { background: var(--lp-warn); }
.lp-badge.bad::before, .badge.bad::before, .badge.expired::before, .badge.suspended::before, .badge.canceled::before { background: var(--lp-neg); }
.lp-badge.plain::before { display: none; }
.lp-alert, .msg, .a-msg { display: flex; gap: var(--lp-s3); align-items: flex-start; padding: var(--lp-s3) var(--lp-s4); font-size: var(--lp-fs-sm); line-height: 1.5; color: var(--lp-ink); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); }
.lp-alert.err, .msg.err, .a-msg.err { color: var(--lp-neg-text); background: var(--lp-neg-bg); border-color: color-mix(in srgb, var(--lp-neg) 40%, var(--lp-line)); }
.lp-alert.ok, .msg.ok, .a-msg.ok { color: var(--lp-pos-text); background: var(--lp-pos-bg); border-color: color-mix(in srgb, var(--lp-pos) 40%, var(--lp-line)); }
.lp-alert.warn, .msg.warn, .a-msg.warn { color: var(--lp-warn-text); background: var(--lp-warn-bg); border-color: color-mix(in srgb, var(--lp-warn) 40%, var(--lp-line)); }
.lp-alert > .ic { margin-top: 2px; }
.lp-alert b { font-weight: var(--lp-w-bold); }

/* ---------- loading ---------- */
.lp-spin, .a-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--lp-line); border-top-color: var(--lp-acc); animation: lp-spin .8s linear infinite; }
.lp-skel { display: block; border-radius: var(--lp-r-sm); background: linear-gradient(90deg, var(--lp-mist) 25%, var(--lp-soft) 50%, var(--lp-mist) 75%); background-size: 200% 100%; animation: lp-shim 1.4s ease-in-out infinite; }
@keyframes lp-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- tabs ---------- */
.lp-tabs, .tabs { display: flex; gap: 2px; padding: 3px; width: fit-content; max-width: 100%; overflow-x: auto; background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); }
.lp-tabs button, .tabs button { min-height: 32px; padding: 0 var(--lp-s4); cursor: pointer; font-size: var(--lp-fs-sm); font-weight: var(--lp-w-medium); white-space: nowrap; color: var(--lp-slate); background: transparent; border: 0; border-radius: var(--lp-r-sm); transition: background var(--lp-dur), color var(--lp-dur); }
.lp-tabs button:hover, .tabs button:hover { color: var(--lp-ink); }
.lp-tabs button[aria-selected="true"], .tabs button[aria-selected="true"] { color: var(--lp-ink); background: var(--lp-card); box-shadow: var(--lp-sh-1), 0 0 0 1px var(--lp-line); }

/* ---------- tables ---------- */
.lp-table-wrap, .table-wrap { max-width: 100%; overflow-x: auto; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); }
.lp-table, .table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--lp-fs-sm); }
.table-wrap table { min-width: 860px; }
.lp-table th, .lp-table td, .table-wrap th, .table-wrap td { padding: 10px var(--lp-s3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--lp-line); }
.lp-table th, .table-wrap th { position: sticky; top: 0; z-index: 1; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--lp-slate); background: var(--lp-mist); }
.lp-table tbody tr:last-child td, .table-wrap tbody tr:last-child td { border-bottom: 0; }
.lp-table tbody tr, .table-wrap tbody tr { transition: background var(--lp-dur); }
.lp-table tbody tr:hover, .table-wrap tbody tr:hover { background: var(--lp-mist); }
.lp-table .num, .table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }
th button { display: inline-flex; gap: 4px; align-items: center; padding: 0; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
th button:hover { color: var(--lp-ink); }
th .arr { opacity: .35; } th[aria-sort="ascending"] .arr, th[aria-sort="descending"] .arr { opacity: 1; color: var(--lp-ink); }
td.actions { white-space: nowrap; text-align: right; } td .cell-ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; gap: var(--lp-s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--lp-s3); }
.toolbar .search, .lp-search { flex: 1 1 240px; min-width: 0; position: relative; }
.toolbar .search .ic, .lp-search .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--lp-slate); pointer-events: none; }
.toolbar .search input, .lp-search input { padding-left: 38px; }
.toolbar select { width: auto; min-width: 140px; }
.pager { display: flex; gap: var(--lp-s2); align-items: center; justify-content: flex-end; margin-top: var(--lp-s3); flex-wrap: wrap; }
.lp-empty, .empty { display: grid; justify-items: center; gap: var(--lp-s2); padding: var(--lp-s6) var(--lp-s4); text-align: center; color: var(--lp-slate); }
.lp-empty h3, .empty h3 { color: var(--lp-ink); }
.lp-empty p { max-width: 46ch; }

/* ---------- KPI / feature lists / steps ---------- */
.kpis { display: grid; gap: var(--lp-s3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--lp-s4); }
.kpi { padding: var(--lp-s4); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); box-shadow: var(--lp-sh-1); }
.kpi .n { font-size: var(--lp-fs-2xl); font-weight: var(--lp-w-bold); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-s2) var(--lp-s4); font-size: var(--lp-fs-sm); }
@media (max-width: 520px) { .features { grid-template-columns: 1fr; } }
.features li { display: flex; align-items: center; gap: var(--lp-s2); }
.features li.off { color: var(--lp-slate); } .features .yes { color: var(--lp-pos); } .features .no { color: var(--lp-slate); }
.lp-progress { height: 6px; overflow: hidden; background: var(--lp-soft); border-radius: var(--lp-r-pill); }
.lp-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lp-acc2), var(--lp-acc)); border-radius: inherit; transition: width .5s var(--lp-ease); }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-steps li { display: flex; align-items: center; gap: var(--lp-s4); padding: var(--lp-s4) 0; border-bottom: 1px solid var(--lp-line); }
.lp-steps li:last-child { border-bottom: 0; padding-bottom: 0; } .lp-steps li:first-child { padding-top: 0; }
.lp-steps .st { display: grid; place-items: center; flex: none; width: 28px; height: 28px; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-bold); color: var(--lp-slate); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: 50%; }
.lp-steps li.done .st { color: var(--lp-on-acc); background: var(--lp-pos); border-color: transparent; }
.lp-steps li.unknown .st { color: var(--lp-warn-text); border-style: dashed; }
.lp-steps .tx { flex: 1; min-width: 0; display: grid; } .lp-steps .tx small { color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.lp-steps li.done .tx b { color: var(--lp-slate); }
.lp-steps .act { display: flex; gap: var(--lp-s2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
@media (max-width: 640px) { .lp-steps li { flex-wrap: wrap; } .lp-steps li > .act { margin-left: 44px; width: calc(100% - 44px); justify-content: flex-start; } }

/* ---------- modal (dialog) : frosted backdrop, ice-white card, graphite action ---------- */
dialog { padding: 0; color: var(--lp-ink); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-xl); box-shadow: var(--lp-sh-3);
  width: calc(100% - 24px); max-width: 640px; max-height: calc(100vh - 24px); overflow: hidden; }
dialog[open] { animation: lp-pop var(--lp-dur) var(--lp-ease); }
dialog::backdrop { background: var(--lp-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lp-fade .2s ease; }
dialog::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--lp-acc), var(--lp-acc2), var(--lp-acc)); opacity: .85; }
dialog form.dlg, dialog .dlg { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.dlg-head { display: flex; align-items: center; gap: var(--lp-s2); padding: var(--lp-s5) var(--lp-s5) var(--lp-s3); }
.dlg-body { display: grid; gap: var(--lp-s3); padding: var(--lp-s2) var(--lp-s5) var(--lp-s4); overflow-y: auto; }
.dlg-foot { display: flex; gap: var(--lp-s2); justify-content: flex-end; flex-wrap: wrap; padding: var(--lp-s3) var(--lp-s5) var(--lp-s5); }
@keyframes lp-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
.plan-choice { display: grid; gap: var(--lp-s2); }
.plan-choice label.opt { display: flex; gap: var(--lp-s3); align-items: flex-start; padding: var(--lp-s3) var(--lp-s4); font-size: var(--lp-fs-sm); cursor: pointer; border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); transition: border-color var(--lp-dur), box-shadow var(--lp-dur); }
.plan-choice label.opt:hover { border-color: var(--lp-silver); }
.plan-choice label.opt:has(input:checked) { border-color: var(--lp-acc); box-shadow: 0 0 0 3px var(--lp-glow); }
.plan-choice input { margin-top: 3px; accent-color: var(--lp-acc); }
.secret { padding: var(--lp-s3) var(--lp-s4); font-family: var(--lp-mono); font-size: var(--lp-fs-md); overflow-wrap: anywhere; background: var(--lp-mist); border: 1px dashed var(--lp-silver); border-radius: var(--lp-r-md); }
.ov-grid { display: grid; gap: var(--lp-s2) var(--lp-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-grid .field { display: grid; grid-template-columns: 1fr 110px; gap: var(--lp-s2); align-items: center; }
.ov-grid label { font-weight: var(--lp-w-regular); color: var(--lp-ink); font-size: var(--lp-fs-sm); }
.ov-grid select { min-height: 34px; }
@media (max-width: 560px) { .ov-grid { grid-template-columns: 1fr; } }
.plan-card { padding: var(--lp-s4); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); } .plan-card + .plan-card { margin-top: var(--lp-s3); }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--lp-s2) var(--lp-s4); }

/* ---------- toast ---------- */
#toasts { position: fixed; z-index: 100; right: var(--lp-s4); bottom: var(--lp-s4); display: grid; gap: var(--lp-s2); max-width: calc(100vw - 32px); }
.toast { padding: 10px var(--lp-s4); font-size: var(--lp-fs-sm); font-weight: var(--lp-w-medium); color: var(--lp-on-acc); background: var(--lp-acc); border-radius: var(--lp-r-md); box-shadow: var(--lp-sh-3); animation: lp-toast .22s var(--lp-ease); }
.toast.err { background: var(--lp-neg-text); color: var(--lp-on-acc); }
@keyframes lp-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- app shell: top bar, main navigation, work area, side panel ---------- */
.lp-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--lp-s3); min-height: 60px; padding: 0 var(--lp-s5);
  background: color-mix(in srgb, var(--lp-card) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--lp-line); }
.lp-brand, .a-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-ink); text-decoration: none; font-size: var(--lp-fs-lg); letter-spacing: -.01em; }
.lp-brand .mk, .a-brand .mk { display: grid; place-items: center; width: 32px; height: 32px; color: var(--lp-on-acc); border-radius: 10px; background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); box-shadow: 0 6px 14px -8px rgba(11,15,26,.7); }
.lp-brand .wm, .a-brand .wm { display: inline-flex; } .lp-brand .wm span, .a-brand .wm span { font-weight: var(--lp-w-medium); color: var(--lp-deep); } .lp-brand .wm b, .a-brand .wm b { font-weight: var(--lp-w-bold); }
.lp-co { display: inline-flex; align-items: center; gap: var(--lp-s2); max-width: 280px; padding: 5px 12px 5px 6px; font-size: var(--lp-fs-sm); color: var(--lp-deep); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-pill); }
.lp-co .av { display: grid; place-items: center; width: 24px; height: 24px; font-size: 11px; font-weight: var(--lp-w-bold); color: var(--lp-on-acc); background: var(--lp-acc2); border-radius: 50%; }
.lp-co span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tools { display: flex; align-items: center; gap: var(--lp-s2); margin-left: auto; }
.lp-iconbtn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer; color: var(--lp-slate); background: transparent; border: 1px solid transparent; border-radius: var(--lp-r-md); transition: background var(--lp-dur), color var(--lp-dur), border-color var(--lp-dur); }
.lp-iconbtn:hover { color: var(--lp-ink); background: var(--lp-mist); border-color: var(--lp-line); }
.lp-iconbtn[aria-expanded="true"] { color: var(--lp-ink); background: var(--lp-soft); }
.lp-me { display: inline-flex; align-items: center; gap: var(--lp-s2); min-height: 38px; padding: 3px 10px 3px 3px; cursor: pointer; color: var(--lp-ink); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-pill); transition: border-color var(--lp-dur), background var(--lp-dur); }
.lp-me:hover, .lp-me[aria-expanded="true"] { background: var(--lp-mist); border-color: var(--lp-silver); }
.lp-me .av { display: grid; place-items: center; width: 30px; height: 30px; font-size: 12px; font-weight: var(--lp-w-bold); color: var(--lp-on-acc); background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); border-radius: 50%; }
.lp-me .nm { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--lp-fs-sm); font-weight: var(--lp-w-medium); }
.lp-menuwrap { position: relative; }
.lp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 288px; padding: var(--lp-s2); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); box-shadow: var(--lp-sh-3); animation: lp-pop var(--lp-dur) var(--lp-ease); }
.lp-menu .who { padding: var(--lp-s3); display: grid; gap: 2px; } .lp-menu .who b { font-weight: var(--lp-w-bold); overflow-wrap: anywhere; } .lp-menu .who small { color: var(--lp-slate); overflow-wrap: anywhere; }
.lp-menu hr { margin: var(--lp-s1) 0; border: 0; height: 1px; background: var(--lp-line); }
.lp-menu a, .lp-menu button { display: flex; align-items: center; gap: var(--lp-s3); width: 100%; min-height: 38px; padding: 0 var(--lp-s3); font-size: var(--lp-fs-sm); font-weight: var(--lp-w-medium); text-align: left; text-decoration: none; cursor: pointer; color: var(--lp-ink); background: none; border: 0; border-radius: var(--lp-r-sm); }
.lp-menu a:hover, .lp-menu button:hover, .lp-menu [aria-selected="true"] { background: var(--lp-mist); }
.lp-menu .ic { color: var(--lp-slate); }
.lp-nav { position: sticky; top: 60px; z-index: 25; display: flex; align-items: stretch; gap: var(--lp-s1); padding: 0 var(--lp-s5); overflow-x: auto; scrollbar-width: none; background: var(--lp-card); border-bottom: 1px solid var(--lp-line); }
.lp-nav::-webkit-scrollbar { display: none; }
.lp-nav a { position: relative; display: inline-flex; align-items: center; gap: var(--lp-s2); min-height: 46px; padding: 0 var(--lp-s4); font-size: var(--lp-fs-sm); font-weight: var(--lp-w-medium); text-decoration: none; white-space: nowrap; color: var(--lp-slate); transition: color var(--lp-dur); }
.lp-nav a:hover { color: var(--lp-ink); }
.lp-nav a::after { content: ""; position: absolute; left: var(--lp-s3); right: var(--lp-s3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--lp-acc); transform: scaleX(0); transition: transform var(--lp-dur) var(--lp-ease); }
.lp-nav a[aria-current="page"] { color: var(--lp-ink); } .lp-nav a[aria-current="page"]::after { transform: scaleX(1); }
.lp-work { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--lp-s6) var(--lp-s5) var(--lp-s7); }
.lp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--lp-s4); margin-bottom: var(--lp-s5); }
.lp-head h1 { font-size: var(--lp-fs-2xl); letter-spacing: -.02em; } .lp-head p { margin: var(--lp-s1) 0 0; color: var(--lp-slate); max-width: 62ch; }
.lp-head .eyebrow { display: block; margin-bottom: var(--lp-s1); font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-slate); }
.lp-actions { display: flex; gap: var(--lp-s2); flex-wrap: wrap; align-items: center; }
.lp-view { animation: lp-view var(--lp-dur) var(--lp-ease); }
@keyframes lp-view { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lp-drawer-scrim { position: fixed; inset: 0; z-index: 50; background: var(--lp-scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: lp-fade .2s ease; }
.lp-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; display: flex; flex-direction: column; width: min(440px, 100vw); background: var(--lp-card); border-left: 1px solid var(--lp-line); box-shadow: var(--lp-sh-3); animation: lp-drawer var(--lp-dur) var(--lp-ease); }
.lp-drawer > header { display: flex; align-items: center; gap: var(--lp-s3); padding: var(--lp-s4) var(--lp-s5); border-bottom: 1px solid var(--lp-line); }
.lp-drawer > header h2 { flex: 1; font-size: var(--lp-fs-lg); }
.lp-drawer .body { flex: 1; overflow-y: auto; padding: var(--lp-s5); display: grid; gap: var(--lp-s4); align-content: start; }
@keyframes lp-drawer { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-faq { display: grid; gap: var(--lp-s2); } .lp-faq details { padding: var(--lp-s3) var(--lp-s4); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); }
.lp-faq summary { cursor: pointer; font-weight: var(--lp-w-medium); font-size: var(--lp-fs-sm); } .lp-faq p { margin: var(--lp-s2) 0 0; color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.lp-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-s5); flex-wrap: wrap; position: relative; overflow: hidden; padding: var(--lp-s5) var(--lp-s6); background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-xl); box-shadow: var(--lp-sh-2); }
.lp-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--lp-acc), var(--lp-acc2), var(--lp-acc)); opacity: .85; }
.lp-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; background: radial-gradient(closest-side, var(--lp-glow), transparent); opacity: .5; pointer-events: none; }
.lp-hero > * { position: relative; z-index: 1; } .lp-hero h2 { font-size: var(--lp-fs-xl); } .lp-hero p { margin: var(--lp-s1) 0 0; color: var(--lp-slate); }
.lp-stat { display: grid; gap: var(--lp-s2); align-content: start; }
.lp-stat small { font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-slate); }
.lp-stat b { font-size: var(--lp-fs-xl); font-weight: var(--lp-w-bold); letter-spacing: -.02em; line-height: 1.15; }
.lp-pill-row { display: flex; flex-wrap: wrap; gap: var(--lp-s2); }
.lp-statusrow { display: flex; align-items: center; gap: var(--lp-s3); padding: var(--lp-s3) 0; border-bottom: 1px solid var(--lp-line); } .lp-statusrow:last-child { border-bottom: 0; padding-bottom: 0; } .lp-statusrow:first-child { padding-top: 0; }
.lp-statusrow .tx { flex: 1; min-width: 0; display: grid; } .lp-statusrow .tx small { color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.lp-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--lp-silver); }
.lp-dot.ok { background: var(--lp-pos); box-shadow: 0 0 0 4px var(--lp-pos-bg); } .lp-dot.warn { background: var(--lp-warn); box-shadow: 0 0 0 4px var(--lp-warn-bg); } .lp-dot.bad { background: var(--lp-neg); box-shadow: 0 0 0 4px var(--lp-neg-bg); }
.lp-sep { margin: var(--lp-s6) 0 var(--lp-s3); font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-slate); }
.lp-tag { display: inline-flex; padding: 1px 8px; font-size: 11px; font-weight: var(--lp-w-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--lp-slate); border: 1px solid var(--lp-line); border-radius: var(--lp-r-pill); }
.lp-var { display: inline-block; padding: 1px 8px; font-family: var(--lp-mono); font-size: 12px; color: var(--lp-deep); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: 6px; }
@media (max-width: 720px) {
  .lp-top { padding: 0 var(--lp-s4); } .lp-co, .lp-me .nm { display: none; } .lp-me { padding-right: 3px; }
  .lp-nav { padding: 0 var(--lp-s2); } .lp-work { padding: var(--lp-s5) var(--lp-s4) var(--lp-s6); } .lp-head h1 { font-size: var(--lp-fs-xl); }
  .lp-hero { padding: var(--lp-s5); }
}

/* ---------- sign-in / connect pages ---------- */
body.auth { display: flex; flex-direction: column; background: radial-gradient(900px 420px at 50% -120px, var(--lp-soft), transparent 70%), var(--lp-bg); }
.a-top { display: flex; align-items: center; gap: var(--lp-s3); padding: var(--lp-s4) var(--lp-s5); }
.a-spacer { flex: 1; }
.a-theme { display: grid; place-items: center; width: 38px; height: 38px; cursor: pointer; color: var(--lp-slate); background: transparent; border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); transition: background var(--lp-dur), color var(--lp-dur); }
.a-theme:hover { color: var(--lp-ink); background: var(--lp-mist); }
.a-main { flex: 1; display: grid; place-items: start center; padding: var(--lp-s5) var(--lp-s4) var(--lp-s6); }
.a-card { position: relative; width: 100%; max-width: 440px; padding: 30px 28px 24px; overflow: hidden; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-xl); box-shadow: var(--lp-sh-3); animation: lp-pop .3s var(--lp-ease); }
.a-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--lp-acc), var(--lp-acc2), var(--lp-acc)); opacity: .85; }
.a-card h1 { margin: 0 0 var(--lp-s1); font-size: var(--lp-fs-xl); }
.a-sub { margin: 0 0 var(--lp-s5); font-size: var(--lp-fs-sm); color: var(--lp-slate); line-height: 1.55; }
.a-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--lp-s4); padding: 6px 12px; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); color: var(--lp-deep); background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-pill); }
.a-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-acc); box-shadow: 0 0 8px 2px var(--lp-glow); }
.a-stack { display: grid; gap: var(--lp-s3); }
.a-field { display: grid; gap: 6px; }
.a-pw { position: relative; display: block; } .a-pw input { padding-right: 64px; }
.a-pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 10px; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); cursor: pointer; color: var(--lp-slate); background: transparent; border: 0; border-radius: var(--lp-r-sm); }
.a-pw button:hover { color: var(--lp-ink); background: var(--lp-soft); }
.a-oauth { display: grid; gap: var(--lp-s2); margin-bottom: var(--lp-s4); }
.a-oauth .a-btn { color: var(--lp-ink); background: var(--lp-card); border-color: var(--lp-line); box-shadow: var(--lp-sh-1); filter: none; min-height: 44px; font-size: var(--lp-fs-sm); }
.a-oauth .a-btn:hover { background: var(--lp-mist); border-color: var(--lp-silver); filter: none; }
.a-oauth svg { width: 18px; height: 18px; flex: none; }
.a-or { display: flex; align-items: center; gap: var(--lp-s3); margin: 0 0 var(--lp-s4); font-size: var(--lp-fs-xs); color: var(--lp-slate); }
.a-or::before, .a-or::after { content: ""; flex: 1; height: 1px; background: var(--lp-line); }
.a-row { display: flex; justify-content: space-between; align-items: center; }
.a-link { padding: 0; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); cursor: pointer; color: var(--lp-ink); background: none; border: 0; text-decoration: underline; text-decoration-color: var(--lp-silver); text-underline-offset: 3px; }
.a-link:hover { text-decoration-color: var(--lp-ink); }
.a-foot { margin: var(--lp-s5) 0 0; text-align: center; font-size: var(--lp-fs-sm); color: var(--lp-slate); }
.a-state { display: grid; justify-items: center; gap: var(--lp-s3); text-align: center; padding: var(--lp-s2) 0; }
.a-state h1 { font-size: var(--lp-fs-xl); } .a-state p { margin: 0; color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.a-ico { display: grid; place-items: center; width: 48px; height: 48px; color: var(--lp-on-acc); background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); border-radius: 14px; }
.a-ico.ok { background: var(--lp-pos); color: #fff; } .a-ico.bad { background: var(--lp-neg); color: #fff; } .a-ico.warn { background: var(--lp-warn); color: #fff; }
.a-who { display: inline-block; max-width: 100%; padding: 8px 14px; font-weight: var(--lp-w-medium); font-size: var(--lp-fs-sm); overflow-wrap: anywhere; background: var(--lp-mist); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); }
.a-hint { font-size: var(--lp-fs-xs) !important; }
.a-actions { display: grid; gap: var(--lp-s2); width: 100%; margin-top: var(--lp-s2); }
.a-actions .a-btn:not(.ghost) { min-height: 44px; }
.a-note { margin: var(--lp-s5) 0 0; padding-top: var(--lp-s4); font-size: var(--lp-fs-xs); line-height: 1.5; text-align: center; color: var(--lp-slate); border-top: 1px solid var(--lp-line); }
.a-msg { margin-bottom: var(--lp-s4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .lp-skel { animation: none; }
}
@media print { .lp-top, .lp-nav, #toasts { display: none; } }

/* ---- v4.1 ---- */
.lp-card.compact { padding-block: var(--lp-s4); }
.lp-card.compact > header { margin-bottom: 0; }
.lp-card.compact > header h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--lp-pos); vertical-align: middle; }

.lp-ver { margin: var(--lp-s5) 0 0; font-size: 12px; color: var(--lp-slate); text-align: center; letter-spacing: .02em; font-variant-numeric: tabular-nums; user-select: all; }

/* v4.5 — ice-silver: selection / hover surfaces and accent marks (same roles as the extension) */
.lp-menu a:hover, .lp-menu button:hover, .lp-menu [aria-selected="true"], .lp-table tbody tr:hover, .table-wrap tbody tr:hover,
.lp-iconbtn:hover, .lp-me:hover, .lp-me[aria-expanded="true"], .a-theme:hover, .lp-btn:not(.primary):not(.danger):hover, .btn:not(.primary):not(.danger):hover { background: var(--lp-sel); }
.lp-nav a[aria-current="page"] { color: var(--lp-ice-ink); }
.lp-tabs button[aria-selected="true"], .tabs button[aria-selected="true"] { color: var(--lp-ice-ink); }
.lp-btn, .btn, .a-btn, .lp-menu a, .lp-menu button, .lp-iconbtn, .lp-me, .lp-table tbody tr { transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease); }
@media (prefers-reduced-motion: reduce) { .lp-btn, .btn, .a-btn, .lp-menu a, .lp-menu button, .lp-iconbtn, .lp-me, .lp-table tbody tr { transition: none; } }

/* v4.7: primary buttons define background AND text colour in every state, so a generic hover/active/focus rule can never make them white-on-white (checked on rendered pixels by extension tests/33) */
.lp-btn.primary, .btn.primary, .a-btn:not(.ghost),
.lp-btn.primary:hover, .btn.primary:hover, .a-btn:not(.ghost):hover,
.lp-btn.primary:focus-visible, .btn.primary:focus-visible, .a-btn:not(.ghost):focus-visible,
.lp-btn.primary:active, .btn.primary:active, .a-btn:not(.ghost):active { color: var(--lp-on-acc); background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); border-color: transparent; }

/* v4.9 ice-silver finish: thin edge + soft ice shadow on main containers (same tokens as the extension); nested containers stay flat, no glow on inputs */
.lp-card, .card, .kpi, .lp-hero, dialog, .lp-menu, .lp-drawer, .a-card { border-color: var(--lp-edge); box-shadow: var(--lp-ice-sh); }
.lp-card .lp-card, .card .card, .lp-card .kpi, .card .kpi, .lp-hero .lp-card, dialog .lp-card, dialog .card, .lp-drawer .lp-card, .lp-drawer .card { box-shadow: none; }
.lp-card.flat, .lp-card.dashed { box-shadow: none; }
.field input:focus, .field select:focus, .field textarea:focus, .a-field input:focus, .lp-input:focus, .toolbar input:focus, .toolbar select:focus { box-shadow: none; border-color: var(--lp-focus); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .a-field input:focus-visible, .lp-input:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 1px; }
.plan-choice label.opt:has(input:checked) { box-shadow: none; }
.lp-btn:hover, .btn:hover, .a-btn:hover, .lp-card:hover, .card:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .lp-btn, .btn, .a-btn, .lp-card, .card { transition: none; } }

/* v4.10 shared motion criteria (same as the extension): state and entrance changes use opacity / colour / border / background in --lp-dur;
   nothing scales, jumps or slides; spinners only while a real request is running. Reduced motion already removes the transitions above. */
@keyframes lp-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-view { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-toast { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-drawer { from { opacity: 0; } to { opacity: 1; } }
.lp-btn:active, .btn:active, .a-btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) { dialog[open], .lp-view, .toast, .lp-drawer, .lp-menu, .a-card { animation: none; } }

/* ===== v4.11 — one left sidebar, simple top bar, independent views (reference layout approved; names, data and states are LoadPulse's own) =====
   Same tokens, Poppins 400/500/700, thin ice edge + soft shadow only on main containers, colour/border/background transitions in --lp-dur, nothing slides or scales. */
html { scroll-padding-top: 80px; }
body.lp-app { display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
body.lp-app #chrome { display: contents; }
.lp-side { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; z-index: 35; align-self: stretch; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--lp-s5);
  padding: var(--lp-s5) var(--lp-s3) var(--lp-s4); background: var(--lp-card); border-right: 1px solid var(--lp-edge); }
.lp-side .lp-brand { gap: 12px; padding: 0 var(--lp-s2); font-size: 24px; line-height: 1; }
.lp-side .lp-brand .mk { width: 44px; height: 44px; border-radius: 13px; }
.lp-side .lp-brand .wm { font-size: 24px; }
.lp-side .lp-nav { position: static; top: auto; display: grid; gap: 4px; padding: 0; overflow: visible; background: none; border: 0; }
.lp-side .lp-nav-sub { margin-top: auto; padding-top: var(--lp-s3); border-top: 1px solid var(--lp-line); }
.lp-side .lp-nav a, .lp-side .lp-nav .lp-navbtn { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: var(--lp-w-medium);
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--lp-slate); background: transparent; border: 1px solid transparent; border-radius: var(--lp-r-md);
  transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease); }
.lp-side .lp-nav a::after { content: none; }
.lp-side .lp-nav a:hover, .lp-side .lp-nav .lp-navbtn:hover { color: var(--lp-ink); background: var(--lp-mist); }
.lp-side .lp-nav a[aria-current="page"] { color: var(--lp-ice-ink); background: var(--lp-sel); border-color: var(--lp-edge); }
.lp-side .lp-nav .ic { color: currentColor; }
.lp-dirty { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-warn); }
.lp-side-scrim { position: fixed; inset: 0; z-index: 59; background: var(--lp-scrim); }
.lp-top { grid-column: 2; grid-row: 1; min-height: 68px; padding: 0 var(--lp-s5); background: var(--lp-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.lp-pagetitle { margin: 0; font-size: var(--lp-fs-2xl); letter-spacing: -.02em; line-height: 1.15; }
.lp-topaction { display: inline-flex; align-items: center; gap: var(--lp-s2); }
.lp-menubtn { display: none; }
body.lp-app .lp-work { grid-column: 2; grid-row: 2; min-width: 0; max-width: 1180px; margin: 0; padding: var(--lp-s2) var(--lp-s5) var(--lp-s7); }
.lp-menu { width: 248px; }
.lp-greet h2 { font-size: var(--lp-fs-2xl); letter-spacing: -.02em; }
.lp-subline { margin: 2px 0 0; color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.lp-lead { margin: 0 0 var(--lp-s5); max-width: 70ch; color: var(--lp-slate); }

/* icon tiles + the three status cards */
.lp-stic { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--lp-ice-ink); background: var(--lp-sel); border: 1px solid var(--lp-line); border-radius: 12px;
  transition: background-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease); }
.lp-stic.big { width: 48px; height: 48px; }
.lp-status3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-s4); margin-top: var(--lp-s4); }
.lp-stc { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 88px; padding: var(--lp-s4) var(--lp-s4); background: var(--lp-card); border: 1px solid var(--lp-edge); border-radius: var(--lp-r-lg); box-shadow: var(--lp-ice-sh); }
.lp-stc .tx, .lp-cc .tx, .lp-tile .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lp-stc .tx b, .lp-cc .tx b, .lp-tile .tx b { font-weight: var(--lp-w-medium); font-size: 14px; overflow-wrap: anywhere; }
.lp-stc .tx small, .lp-cc .tx small, .lp-tile .tx small { color: var(--lp-slate); font-size: var(--lp-fs-xs); line-height: 1.45; overflow-wrap: anywhere; }
.lp-stc[data-tone="ok"] .lp-stic { color: var(--lp-pos-text); background: var(--lp-pos-bg); border-color: color-mix(in srgb, var(--lp-pos) 35%, var(--lp-line)); }
.lp-stc[data-tone="warn"] .lp-stic { color: var(--lp-warn-text); background: var(--lp-warn-bg); border-color: color-mix(in srgb, var(--lp-warn) 35%, var(--lp-line)); }
.lp-stc[data-tone="bad"] .lp-stic { color: var(--lp-neg-text); background: var(--lp-neg-bg); border-color: color-mix(in srgb, var(--lp-neg) 35%, var(--lp-line)); }
.lp-mk { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; font-size: 12px; font-weight: var(--lp-w-bold); border-radius: 50%; }
.lp-mk:empty { display: none; }
.lp-mk.ok { color: var(--lp-on-acc); background: var(--lp-pos); } .lp-mk.warn { color: var(--lp-on-acc); background: var(--lp-warn); } .lp-mk.bad { color: var(--lp-on-acc); background: var(--lp-neg); }

/* dashboard: company card, quick actions */
.lp-coname { display: flex; align-items: center; gap: 14px; }
.lp-coname div { display: grid; min-width: 0; } .lp-coname b { font-weight: var(--lp-w-medium); overflow-wrap: anywhere; } .lp-coname small { color: var(--lp-slate); font-size: var(--lp-fs-xs); }
.lp-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-s4); margin-top: var(--lp-s4); padding-top: var(--lp-s4); border-top: 1px solid var(--lp-line); font-size: var(--lp-fs-sm); }
.lp-cells > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .lp-cells small { color: var(--lp-slate); font-size: var(--lp-fs-xs); }
.lp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-s3); }
.lp-tile { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 10px 12px; color: var(--lp-ink); text-decoration: none; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-md);
  transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease); }
.lp-tile:hover { background: var(--lp-sel); border-color: var(--lp-edge); }
.lp-tile .lp-stic { width: 36px; height: 36px; border-radius: 10px; }
.lp-card.compact > header .lp-ico { display: none; }

/* connections */
.lp-conn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-s4); }
.lp-cc { display: flex; flex-direction: column; gap: var(--lp-s3); min-width: 0; padding: var(--lp-s5); background: var(--lp-card); border: 1px solid var(--lp-edge); border-radius: var(--lp-r-lg); box-shadow: var(--lp-ice-sh); }
.lp-cc .tx { flex: 1; } .lp-cc .st { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lp-s2); }
.lp-brandic { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 7px; box-sizing: border-box; border-radius: var(--lp-r-md, 12px); background: var(--lp-frost-field, var(--lp-card)); border: 1px solid var(--lp-frost-edge-soft, var(--lp-line)); filter: none; }
.lp-brandic svg, .lp-brandic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }

/* account: line tabs and the company form (label left, field right) */
.lp-tabs.lp-tabs-line { width: 100%; padding: 0; gap: var(--lp-s5); background: none; border: 0; border-bottom: 1px solid var(--lp-line); border-radius: 0; }
.lp-tabs-line button { min-height: 44px; padding: 0 2px; border-radius: 0; background: transparent; box-shadow: none; color: var(--lp-slate); }
.lp-tabs-line button:hover { background: transparent; color: var(--lp-ink); }
.lp-tabs-line button[aria-selected="true"] { background: transparent; color: var(--lp-ice-ink); box-shadow: inset 0 -2px 0 var(--lp-ice-ink); }
.form-h { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-s3) var(--lp-s6); }
.form-h .field { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.form-h .field .hint { grid-column: 2; }
.form-h .field.wide { grid-column: 1 / -1; }
.form-h .field.wide { grid-template-columns: 112px minmax(0, 1fr); }
dialog.compact { max-width: 420px; }
dialog.compact .field { margin-bottom: var(--lp-s2); }

@media (max-width: 1100px) { .lp-status3, .lp-conn { grid-template-columns: 1fr; } .lp-cells { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .form-h { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  body.lp-app { grid-template-columns: minmax(0, 1fr); }
  .lp-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: min(288px, 86vw); height: auto; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--lp-dur) var(--lp-ease), visibility 0s linear var(--lp-dur); box-shadow: var(--lp-sh-3); }
  body.lp-side-open .lp-side { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--lp-dur) var(--lp-ease), visibility 0s; }
  .lp-top, body.lp-app .lp-work { grid-column: 1; }
  .lp-menubtn { display: grid; }
  .lp-top { padding: 0 var(--lp-s4); } body.lp-app .lp-work { padding: var(--lp-s2) var(--lp-s4) var(--lp-s6); }
  .lp-pagetitle { font-size: var(--lp-fs-xl); }
}
@media (max-width: 560px) {
  .lp-me .nm, .lp-topaction .lp-btn span:not([data-icon]) { display: none; }
  .lp-topaction .lp-btn { padding: 0 var(--lp-s3); }
  .lp-tiles, .lp-cells { grid-template-columns: 1fr; }
  .form-h .field, .form-h .field.wide { grid-template-columns: 1fr; } .form-h .field .hint { grid-column: 1; }
  .lp-greet h2 { font-size: var(--lp-fs-xl); }
}
@media (prefers-reduced-motion: reduce) { .lp-side, .lp-side .lp-nav a, .lp-side .lp-nav .lp-navbtn, .lp-stic, .lp-tile { transition: none; } }
@media (max-width: 560px) {
  .lp-top { gap: var(--lp-s2); } .lp-top .lp-tools { gap: 4px; }
  .lp-pagetitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lp-me .ic { display: none; } .lp-me { padding-right: 3px; }
}
.lp-pagetitle { min-width: 0; }

/* ===== v4.12 Frosted Silver — luminous ice-white / silver surfaces, graphite ink =====
   New tokens live in lp-tokens.css (--lp-frost-*). Translucent surfaces always have an opaque base and an opaque fallback when backdrop-filter is missing.
   Hover = colour, border and a faint shadow only; nothing moves, scales or resizes. The background is static (no sweeps, no continuous animation). */
html { background: var(--lp-frost-base); }
body { background-color: var(--lp-frost-base); background-image: var(--lp-frost-bg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
body.auth { background-image: var(--lp-frost-bg); }

/* surfaces: opaque by default, translucent + blurred when the browser can */
.lp-card, .card, .kpi, .lp-hero, .lp-stc, .lp-cc, .a-card, dialog, .lp-drawer { background: var(--lp-frost-solid); border-color: var(--lp-frost-edge); box-shadow: var(--lp-frost-hl), var(--lp-frost-sh); }
.lp-side, .lp-top { background: var(--lp-frost-solid-2); }
.lp-menu { background: var(--lp-frost-menu); border-color: var(--lp-frost-edge); box-shadow: var(--lp-frost-hl), var(--lp-frost-sh-lg); }
dialog, .a-card { box-shadow: var(--lp-frost-hl), var(--lp-frost-sh-lg); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-card, .card, .kpi, .lp-hero, .lp-stc, .lp-cc, .a-card, dialog, .lp-drawer { background: var(--lp-frost-surface); -webkit-backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.2); backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.2); }
  .lp-side { background: var(--lp-frost-surface-2); -webkit-backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.2); backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.2); }
  .lp-top { background: transparent; }
}
/* nested containers stay flat: no second shadow, no second blur */
.lp-card .lp-card, .card .card, .lp-card .kpi, .lp-card .lp-stc, .lp-card .lp-cc, dialog .lp-card, .lp-drawer .lp-card, .lp-hero .lp-card { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lp-frost-tint); }
.lp-card.flat, .lp-card.dashed { box-shadow: none; background: var(--lp-frost-tint); }
.lp-card.dashed { border-style: dashed; border-color: var(--lp-frost-edge); }
.lp-side { border-right-color: var(--lp-frost-edge); box-shadow: var(--lp-frost-hl); }
dialog::backdrop { background: var(--lp-frost-scrim); }
.lp-side-scrim { background: var(--lp-frost-scrim); }

/* controls: bright fields with a defined thin edge, graphite primary buttons */
.lp-btn, .btn, .a-btn { background: var(--lp-frost-field); border-color: var(--lp-frost-edge-soft); box-shadow: var(--lp-frost-hl); }
.lp-btn:hover, .btn:hover, .a-btn:hover { border-color: var(--lp-frost-edge); }
.lp-btn.primary, .btn.primary, .a-btn:not(.ghost), .lp-btn.primary:hover, .btn.primary:hover, .a-btn:not(.ghost):hover { box-shadow: 0 8px 18px -12px rgba(11,15,26,.7); }
.lp-btn.ghost, .a-btn.ghost { background: transparent; box-shadow: none; }
.lp-input, .field input, .field select, .field textarea, .a-field input, .lp-select, .toolbar input, .toolbar select, .lp-search input { background: var(--lp-frost-field); border-color: var(--lp-frost-edge-soft); }
.field input:hover, .field select:hover, .a-field input:hover, .lp-input:hover { border-color: var(--lp-frost-edge); }
.field input:focus, .field select:focus, .field textarea:focus, .a-field input:focus, .lp-input:focus, .toolbar input:focus, .toolbar select:focus { background: var(--lp-frost-field); border-color: var(--lp-focus); }
.field input[readonly], .lp-input[readonly] { background: var(--lp-frost-tint); }
.lp-tabs, .tabs { background: var(--lp-frost-tint); border-color: var(--lp-frost-edge-soft); }
.lp-tabs button[aria-selected="true"], .tabs button[aria-selected="true"] { background: var(--lp-frost-field); box-shadow: var(--lp-frost-hl), 0 0 0 1px var(--lp-frost-edge-soft); }
.lp-badge, .badge, .lp-tag { background: var(--lp-frost-tint); border-color: var(--lp-frost-edge-soft); }
.lp-table-wrap, .table-wrap { background: var(--lp-frost-solid); border-color: var(--lp-frost-edge); }
.lp-table th, .table-wrap th { background: var(--lp-frost-solid-2); }
.lp-alert, .msg, .a-msg { background: var(--lp-frost-tint); border-color: var(--lp-frost-edge-soft); }
.lp-alert.err, .msg.err, .a-msg.err { background: var(--lp-neg-bg); } .lp-alert.ok, .msg.ok, .a-msg.ok { background: var(--lp-pos-bg); } .lp-alert.warn, .msg.warn, .a-msg.warn { background: var(--lp-warn-bg); }
.lp-ico, .lp-stic { background: var(--lp-frost-tint); border-color: var(--lp-frost-edge-soft); }
.lp-ico.solid { background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); border-color: transparent; }
.lp-progress { background: var(--lp-frost-edge-soft); }

/* sidebar: silver, graphite selection (light) / ice selection (dark); nothing changes size on hover or selection */
.lp-side .lp-nav a:hover, .lp-side .lp-nav .lp-navbtn:hover { background: var(--lp-frost-nav-hover); color: var(--lp-ink); }
.lp-side .lp-nav a[aria-current="page"] { color: var(--lp-frost-nav-sel-ink); background: var(--lp-frost-nav-sel); border-color: transparent; }
.lp-side .lp-nav-sub { border-top-color: var(--lp-frost-edge-soft); }
.lp-side .lp-brand .mk { width: 48px; height: 48px; border-radius: 14px; }
.lp-side .lp-brand .wm { font-size: 26px; }
.lp-side .lp-brand { gap: 12px; }
.lp-menu a:hover, .lp-menu button:hover, .lp-menu [aria-selected="true"], .lp-iconbtn:hover, .lp-me:hover, .lp-me[aria-expanded="true"], .a-theme:hover { background: var(--lp-frost-nav-hover); }
.lp-iconbtn, .lp-me, .a-theme { background: var(--lp-frost-surface); border-color: var(--lp-frost-edge-soft); }

/* header: translucent over the page, aligned with the content column */
.lp-top { border-bottom: 0; }
.lp-top, body.lp-app .lp-work { padding-inline: max(var(--lp-gut), calc((100% - var(--lp-max)) / 2)); }
body.lp-app .lp-work { max-width: none; margin: 0; padding-top: var(--lp-s2); padding-bottom: var(--lp-s7); }

/* dashboard composition: the width is used, cards share height and alignment */
.lp-status3 { gap: var(--lp-s4); align-items: stretch; }
.lp-stc { min-height: 92px; align-items: center; }
.lp-ovgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--lp-s4); margin-top: var(--lp-s4); align-items: stretch; }
.lp-ovgrid > .lp-card { display: flex; flex-direction: column; }
.lp-ovgrid > .lp-card > header { margin-bottom: var(--lp-s3); }
.lp-tiles { flex: 1; align-content: start; }
.lp-tile { background: var(--lp-frost-tint); border-color: var(--lp-frost-edge-soft); }
.lp-tile:hover { background: var(--lp-sel); border-color: var(--lp-frost-edge); }
.lp-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--lp-s3); padding-top: var(--lp-s3); border-top-color: var(--lp-frost-edge-soft); }
.lp-cell-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--lp-s3); min-width: 0; }
.lp-cell-wide > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.lp-cell-wide .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-setup-row { margin-top: var(--lp-s4); }
.lp-card.compact { padding-block: var(--lp-s3); }

/* the same proportion on every view: one comfortable column of cards that grows with the viewport */
.lp-view > .lp-lead { margin-bottom: var(--lp-s4); }
.lp-view > .grid, .lp-view > .stack { gap: var(--lp-s4); }
.lp-view > .grid > .lp-card, .lp-conn > .lp-cc { height: 100%; }
.form-h { gap: var(--lp-s3) clamp(24px, 4vw, 56px); }
.form-h .field { grid-template-columns: 120px minmax(0, 1fr); }
.lp-conn { gap: var(--lp-s4); }

/* hover / focus: colour, border and a faint shadow only */
.lp-stc, .lp-cc, .lp-tile, .lp-btn, .btn, .a-btn, .lp-iconbtn, .lp-me { transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease); }
.lp-tile:hover, .lp-btn:hover, .btn:hover { box-shadow: var(--lp-frost-sh-hover); }
.lp-btn.primary:hover, .btn.primary:hover { box-shadow: 0 8px 18px -12px rgba(11,15,26,.7); }
.lp-btn.ghost:hover, .a-btn.ghost:hover { box-shadow: none; }
.lp-stc:hover, .lp-cc:hover { border-color: var(--lp-frost-edge); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; }

@media (max-width: 1000px) { .lp-ovgrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .lp-cells { grid-template-columns: 1fr; } .form-h .field { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .lp-top, body.lp-app .lp-work { padding-inline: var(--lp-gut); } }
@media (prefers-reduced-motion: reduce) { .lp-stc, .lp-cc, .lp-tile, .lp-btn, .btn, .a-btn, .lp-iconbtn, .lp-me { transition: none; } }

/* first paint of the signed-in pages: brand in place, one discreet message, no private content until the session is confirmed */
.lp-bootmsg { display: flex; align-items: center; gap: var(--lp-s3); padding: var(--lp-s5) 0; color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.lp-bootmsg .lp-spin { width: 18px; height: 18px; border-width: 2px; }
.lp-side-boot { pointer-events: none; }
.lp-side-boot .lp-brand { gap: 12px; padding: 0 var(--lp-s2); }
.lp-note { display: flex; align-items: center; gap: var(--lp-s2); margin: 0; color: var(--lp-slate); font-size: var(--lp-fs-sm); }
.lp-note .ic { flex: none; }
.features .ft { display: grid; gap: 1px; } .features .ft small { font-size: var(--lp-fs-xs); }
@media (max-width: 860px) { body.lp-boot .lp-side-boot { display: none; } }

/* ---- v4.12 sign-in / connect: Frosted Silver, more presence for the brand, no flash ---- */
.a-top { position: relative; justify-content: center; padding: clamp(20px, 5vh, 44px) var(--lp-gut) 0; }
.a-spacer { display: none; }
.a-theme { position: absolute; top: clamp(16px, 3vh, 28px); right: var(--lp-gut); width: 40px; height: 40px; }
.a-theme:empty { visibility: hidden; }
.a-brand { gap: 14px; font-size: 32px; line-height: 1; }
.a-brand .mk { width: 56px; height: 56px; border-radius: 16px; }
.a-brand .mk .ic { width: 28px; height: 28px; }
.a-brand .wm { font-size: 32px; }
.a-main { padding: clamp(20px, 4vh, 36px) var(--lp-gut) var(--lp-s6); }
.a-card { max-width: 456px; padding: 32px 30px 26px; animation: none; transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease); }
.a-card::before { opacity: .9; }
.a-card h1 { font-size: var(--lp-fs-2xl); }
.a-field input { min-height: 46px; }
.a-oauth .a-btn { min-height: 46px; }
.a-oauth .a-btn, .a-btn { background: var(--lp-frost-field); }
.a-btn:not(.ghost) { background: linear-gradient(135deg, var(--lp-acc), var(--lp-acc2)); }
.a-oauth .a-btn:hover { background: var(--lp-sel); border-color: var(--lp-frost-edge); }
.a-chip, .a-who { background: var(--lp-frost-tint); border-color: var(--lp-frost-edge-soft); }
.a-note, .a-or::before, .a-or::after { border-color: var(--lp-frost-edge-soft); } .a-or::before, .a-or::after { background: var(--lp-frost-edge-soft); }
/* while the session is being read only the brand and a quiet spinner show: the card has no frame yet and no text under it */
body[data-boot] .a-card { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-boot] .a-card::before, body[data-boot] .a-note { visibility: hidden; }
.lp-cells > .lp-cell-wide { display: flex; }
.lp-cell-wide .lp-btn { flex: none; }
.lp-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.form-h .field.wide { grid-template-columns: 120px minmax(0, 1fr); }
@media (min-width: 901px) { .form-h .field.wide .hint { grid-column: 2; } }
/* provider buttons are secondary (light surface, graphite text), never the primary graphite button */
.a-oauth .a-btn:not(.ghost), .a-oauth .a-btn:not(.ghost):focus-visible, .a-oauth .a-btn:not(.ghost):active { color: var(--lp-ink); background: var(--lp-frost-field); border-color: var(--lp-frost-edge-soft); box-shadow: var(--lp-frost-hl); filter: none; }
.a-oauth .a-btn:not(.ghost):hover { color: var(--lp-ink); background: var(--lp-sel); border-color: var(--lp-frost-edge); filter: none; }
@media (max-width: 560px) { .lp-cells > .lp-cell-wide { flex-wrap: wrap; } .lp-cell-wide > div { flex: 1 1 100%; } .lp-cell-wide .lp-btn { align-self: flex-start; } }
body.auth { background-color: var(--lp-frost-base); background-image: var(--lp-frost-bg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; }
@media (min-width: 1001px) { .lp-status3, .lp-conn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1001px) and (max-width: 1200px) { .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-tile .tx small { display: none; } .lp-tile { min-height: 56px; } }
@media (max-width: 430px) { .a-brand { gap: 10px; } .a-brand .mk { width: 48px; height: 48px; border-radius: 14px; } .a-brand .wm { font-size: 28px; } .a-top { padding-top: 24px; } }

/* ===== v4.13 Silver Horizon sign-in, more ice glass, circular theme reveal, soft view fade =====
   Tokens are in lp-tokens.css (--lp-frost-*). Surfaces stay readable on their own: they are opaque twins until backdrop-filter exists. */

/* ---- glass: broad silver lights behind the content make the translucency visible; cards carry a fine white reflection on top ---- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-card, .card, .kpi, .lp-hero, .lp-stc, .lp-cc, .a-card, dialog, .lp-drawer { background-image: var(--lp-frost-sheen); }
  .lp-side { -webkit-backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.25); backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.25); }
}
.lp-card .lp-card, .card .card, .lp-card .kpi, .lp-card .lp-stc, .lp-card .lp-cc, dialog .lp-card, .lp-drawer .lp-card, .lp-hero .lp-card, .lp-card.flat, .lp-card.dashed { background-image: none; }
body.lp-app .lp-work { position: relative; }
.lp-view { animation: none; }
.lp-ovgrid { position: relative; isolation: isolate; }
.lp-ovgrid::before { content: ""; position: absolute; inset: -72px calc(-1 * var(--lp-gut)); z-index: -1; pointer-events: none; background: var(--lp-frost-glow); }
.lp-view > .stack, .lp-view > .grid, .lp-conn { position: relative; isolation: isolate; }
.lp-view > .stack::before, .lp-view > .grid::before, .lp-conn::before { content: ""; position: absolute; inset: -56px calc(-1 * var(--lp-gut)); z-index: -1; pointer-events: none; background: var(--lp-frost-glow); opacity: .8; }

/* ---- sign-in, sign-up, recovery, connect: Silver Horizon ---- */
body.auth { position: relative; }
body.auth::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--lp-frost-horizon); }
body.auth::after { content: ""; position: fixed; z-index: -1; pointer-events: none; left: -12vw; right: -12vw; top: -34vh; height: 62vh; border-radius: 50%; background: var(--lp-frost-arc); }
.a-top { position: static; justify-content: flex-start; gap: var(--lp-s3); padding: clamp(18px, 4vh, 36px) var(--lp-gut) clamp(16px, 3vh, 26px); border-bottom: 1px solid var(--lp-frost-edge-soft); box-shadow: 0 1px 0 var(--lp-frost-hl-line); }
.a-spacer { display: block; flex: 1; }
.a-theme { position: static; width: 42px; height: 42px; flex: none; align-self: flex-start; }
.a-brand { gap: 18px; }
.a-brand .mk { width: 76px; height: 76px; border-radius: 22px; color: var(--lp-ink); background: var(--lp-frost-surface); border: 1px solid var(--lp-frost-edge); box-shadow: var(--lp-frost-hl), var(--lp-frost-sh); }
.a-brand .mk .ic { width: 38px; height: 38px; stroke-width: 1.7; }
.a-brand .wm { font-size: 54px; line-height: 1; letter-spacing: -.02em; }
.a-brand .wm span { font-weight: var(--lp-w-regular); } .a-brand .wm b { font-weight: var(--lp-w-bold); }
.a-main { place-items: start center; padding: clamp(28px, 8vh, 84px) var(--lp-gut) var(--lp-s6); }
.a-card { max-width: 480px; padding: 34px 32px 26px; border-radius: 22px; }
.a-card::before { display: none; }
.a-card h1, .a-card .a-sub { text-align: center; }
.a-card h1 { font-size: 34px; letter-spacing: -.02em; }
.a-sub { margin-bottom: var(--lp-s5); font-size: var(--lp-fs-base); }
.a-state h1 { font-size: 28px; }
.a-in { position: relative; display: block; }
.a-in > .ic { position: absolute; left: 14px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--lp-slate); pointer-events: none; }
.a-in > input { padding-left: 44px; }
.a-pw.a-in > input { padding-right: 52px; }
.a-pw button[data-showpw] { right: 6px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; color: var(--lp-slate); }
.a-pw button[data-showpw] .eye-off, .a-pw button[data-showpw][aria-pressed="true"] .eye { display: none; }
.a-pw button[data-showpw][aria-pressed="true"] .eye-off { display: block; }
.a-lh { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lp-s3); }
.a-lh label { font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); color: var(--lp-slate); }
.a-link { color: var(--lp-frost-link); text-decoration-color: currentColor; }
.a-oauth .a-btn { min-height: 48px; border-radius: 12px; }
.a-btn:not(.ghost) { min-height: 48px; border-radius: 12px; }
.a-field input { border-radius: 12px; }
.a-or { margin-bottom: var(--lp-s4); }
.a-note { border-top: 0; padding-top: 0; margin-top: var(--lp-s4); }
@media (max-width: 560px) {
  .a-brand { gap: 12px; } .a-brand .mk { width: 52px; height: 52px; border-radius: 16px; } .a-brand .mk .ic { width: 28px; height: 28px; } .a-brand .wm { font-size: 34px; }
  .a-top { padding-top: 16px; padding-bottom: 14px; } .a-theme { width: 40px; height: 40px; }
  .a-main { padding-top: 24px; } .a-card { padding: 26px 20px 22px; border-radius: 18px; } .a-card h1 { font-size: 28px; }
}
@media (max-width: 360px) { .a-brand .wm { font-size: 30px; } .a-brand .mk { width: 46px; height: 46px; } .a-brand { gap: 10px; } }

/* ---- circular theme reveal (View Transitions): the browser draws the circle; no overlay of ours can get stuck ---- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
html.lp-theming *, html.lp-theming *::before, html.lp-theming *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ===== v4.14 final touches: Account tabs, Billing feature rows ===== */
/* Account tabs: the selected tab is a soft ice block (rounded corners, discreet ice border); every tab has the same padding and a transparent border so nothing changes size or moves */
.lp-tabs.lp-tabs-line { gap: var(--lp-s2); padding: 0 0 var(--lp-s2); }
.lp-tabs-line button { min-height: 40px; padding: 0 var(--lp-s4); border: 1px solid transparent; border-radius: var(--lp-r-md); transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease); }
.lp-tabs-line button:hover { background: var(--lp-frost-nav-hover); }
.lp-tabs-line button[aria-selected="true"] { color: var(--lp-ink); background: var(--lp-frost-field); border-color: var(--lp-frost-edge); box-shadow: var(--lp-frost-hl); }
.lp-tabs-line button[aria-selected="true"]:hover { background: var(--lp-frost-field); }
@media (prefers-reduced-motion: reduce) { .lp-tabs-line button { transition: none; } }
/* Billing: the check sits on the first line of its feature, the One-click note is its own line under the list */
.features li { align-items: flex-start; }
.features li > span:first-child { display: inline-flex; align-items: center; height: calc(var(--lp-fs-sm) * 1.5); flex: none; }
.features .ft { line-height: 1.5; }
.feat-note { margin-top: var(--lp-s3); align-items: flex-start; font-size: var(--lp-fs-xs); line-height: 1.5; }
.feat-note > span:first-child { display: inline-flex; align-items: center; height: calc(var(--lp-fs-xs) * 1.5); }

/* ===== v4.15 phones / touch screens: fields are at least 16 px (browsers zoom the page when a smaller field is focused). Manual pinch zoom is NOT blocked (no maximum-scale in the viewport meta). ===== */
@media (pointer: coarse), (max-width: 760px) {
  input, select, textarea, .a-field input, .field input, .field select, .field textarea, .lp-input, .lp-select, .toolbar input, .toolbar select, .lp-search input { font-size: 16px; }
}
.a-views { display: block; }

/* v4.17 — phone header. Cause (confirmed in the browser): the @supports block above sets .lp-top { background: transparent }, so the sticky header had
   no surface, border or shadow and the cards scrolling underneath showed through. Desktop keeps the transparent header (approved); on phones/tablets
   (same breakpoint as the drawer) the header gets an opaque ice-silver (light) / graphite (dark) surface, a hairline and a soft shadow. */
@media (max-width: 860px) {
  .lp-top, body.lp-app .lp-top {
    position: sticky; top: 0; z-index: 30; box-sizing: border-box;
    min-height: calc(68px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(var(--lp-gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--lp-gut), env(safe-area-inset-right, 0px));
    background: var(--lp-frost-solid-2); border-bottom: 1px solid var(--lp-frost-edge-soft);
    box-shadow: 0 1px 0 var(--lp-frost-edge-soft), 0 8px 18px -12px rgba(54, 86, 111, .45);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root[data-theme="dark"] .lp-top { box-shadow: 0 1px 0 var(--lp-frost-edge-soft), 0 8px 18px -12px rgba(0, 0, 0, .75); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-top { box-shadow: 0 1px 0 var(--lp-frost-edge-soft), 0 8px 18px -12px rgba(0, 0, 0, .75); } }
}

/* v4.18 — Email Templates: list, editor, example preview, save states, conflict. Built from the approved ice-silver / graphite pieces
   (lp-card, lp-btn, field, lp-var, lp-badge, lp-alert); only layout and the few new parts are defined here. */
.lp-tpls { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lp-s2); }
.lp-tpl { display: flex; align-items: center; gap: var(--lp-s3); padding: var(--lp-s3) var(--lp-s3) var(--lp-s3) var(--lp-s4); border: 1px solid var(--lp-frost-edge-soft, var(--lp-line)); border-radius: var(--lp-r-md); background: var(--lp-frost-field, var(--lp-mist)); transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease); }
.lp-tpl.on { border-color: var(--lp-frost-edge, var(--lp-silver)); background: var(--lp-sel, var(--lp-soft)); }
.lp-tpl .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lp-tpl .tx b { display: flex; align-items: center; gap: var(--lp-s2); flex-wrap: wrap; font-weight: var(--lp-w-bold); overflow-wrap: anywhere; }
.lp-tpl .tx small { color: var(--lp-slate); font-size: var(--lp-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tpl .acts { display: flex; align-items: center; gap: 4px; flex: none; }
.lp-tpl-def { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--lp-silver); background: transparent; cursor: pointer; position: relative; }
.lp-tpl-def::before { content: ""; position: absolute; inset: -12px; }             /* 44 px touch target around the 20 px control */
.lp-tpl-def[aria-checked="true"] { border-color: var(--lp-acc); }
.lp-tpl-def[aria-checked="true"]::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--lp-acc); }
.lp-tpl-def:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; }
.lp-tplempty { display: grid; gap: var(--lp-s3); justify-items: start; padding: var(--lp-s4) 0 var(--lp-s2); }
.lp-tplgrid { align-items: start; }
.lp-tplgrid textarea { font-family: inherit; }
.lp-tplvars { display: grid; gap: 6px; padding: var(--lp-s3) var(--lp-s4); border: 1px solid var(--lp-frost-edge-soft, var(--lp-line)); border-radius: var(--lp-r-md); background: var(--lp-frost-tint, var(--lp-mist)); }
.lp-tplvars .lp-sep { margin: var(--lp-s2) 0 2px; }
button.lp-var { cursor: pointer; min-height: 28px; transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease); }
button.lp-var:hover { border-color: var(--lp-frost-edge, var(--lp-silver)); background: var(--lp-sel, var(--lp-soft)); }
button.lp-var:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 1px; }
.lp-tplfoot { gap: var(--lp-s2); }
.lp-savestate { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); color: var(--lp-slate); border: 1px solid var(--lp-frost-edge-soft, var(--lp-line)); border-radius: var(--lp-r-pill); background: var(--lp-frost-tint, var(--lp-mist)); white-space: nowrap; }
.lp-savestate:empty { display: none; }
.lp-savestate::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-slate); }
.lp-savestate[data-s="saved"]::before { background: var(--lp-pos); }
.lp-savestate[data-s="saving"]::before { background: var(--lp-acc2); animation: lp-fade .8s ease infinite alternate; }
.lp-savestate[data-s="dirty"]::before, .lp-savestate[data-s="pending"]::before { background: var(--lp-warn); }
.lp-savestate[data-s="error"]::before, .lp-savestate[data-s="conflict"]::before { background: var(--lp-neg); }
.lp-savestate[data-s="error"], .lp-savestate[data-s="conflict"] { color: var(--lp-neg-text); }
.lp-savestate[data-s="pending"] { color: var(--lp-warn-text); }
.lp-conflict { display: grid; gap: var(--lp-s2); margin-bottom: var(--lp-s4); padding: var(--lp-s3) var(--lp-s4); border: 1px solid color-mix(in srgb, var(--lp-neg) 40%, var(--lp-line)); border-radius: var(--lp-r-md); background: var(--lp-neg-bg); }
.lp-conflict > b { color: var(--lp-neg-text); }
.lp-conflict p { margin: 0; }
.lp-pv { display: grid; gap: var(--lp-s2); margin-top: var(--lp-s3); padding: var(--lp-s3) var(--lp-s4); border: 1px solid var(--lp-frost-edge-soft, var(--lp-line)); border-radius: var(--lp-r-md); background: var(--lp-frost-field, var(--lp-mist)); }
.lp-pv-s { font-weight: var(--lp-w-bold); overflow-wrap: anywhere; padding-bottom: var(--lp-s2); border-bottom: 1px solid var(--lp-frost-edge-soft, var(--lp-line)); }
.lp-pv-b { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--lp-ink); max-height: 420px; overflow-y: auto; }
.lp-conflict .lp-pv { margin-top: 0; background: var(--lp-frost-solid, var(--lp-card)); } .lp-conflict .lp-pv-b { max-height: 160px; }
.lp-pvnotes { margin: var(--lp-s3) 0 0; padding: 0 0 0 var(--lp-s4); display: grid; gap: 4px; color: var(--lp-slate); font-size: var(--lp-fs-xs); } .lp-pvnotes:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .lp-savestate[data-s="saving"]::before { animation: none; } }
@media (max-width: 1100px) { .lp-tplgrid > .col-7, .lp-tplgrid > .col-5 { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .lp-tpl { flex-wrap: wrap; padding: var(--lp-s3); }
  .lp-tpl .tx { flex-basis: calc(100% - 44px); }
  .lp-tpl .acts { width: 100%; justify-content: flex-end; }
  .lp-tpl .acts .lp-iconbtn { width: 44px; height: 44px; }
  .lp-tplfoot { justify-content: flex-end; } .lp-tplfoot #tp-msg { flex-basis: 100%; }
}

/* v4.19 — desktop header on long pages. At the top of the page the header is exactly as approved (transparent, 68 px, same title and controls).
   Once the page is scrolled (body.lp-scrolled, set by dashboard.js) it gets a surface in the page's own colour so the content passing under it
   cannot be read through the title: opaque by default, 96 % + blur where the browser supports it. Size, position and contents do not change.
   Phones and tablets (<= 860 px) keep their own always-opaque header from v4.17; this block does not apply there. */
@media (min-width: 861px) {
  body.lp-app .lp-top { transition: background-color 140ms ease-out, box-shadow 140ms ease-out; }
  body.lp-app.lp-scrolled .lp-top { background: var(--lp-frost-solid-2); box-shadow: 0 1px 0 var(--lp-frost-edge-soft), 0 10px 22px -16px rgba(54, 86, 111, .40); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.lp-app.lp-scrolled .lp-top { background: color-mix(in srgb, var(--lp-frost-solid-2) 96%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
  }
  :root[data-theme="dark"] body.lp-app.lp-scrolled .lp-top { box-shadow: 0 1px 0 var(--lp-frost-edge-soft), 0 10px 22px -16px rgba(0, 0, 0, .7); }
}
@media (min-width: 861px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.lp-app.lp-scrolled .lp-top { box-shadow: 0 1px 0 var(--lp-frost-edge-soft), 0 10px 22px -16px rgba(0, 0, 0, .7); } }
@media (prefers-reduced-motion: reduce) { body.lp-app .lp-top { transition: none; } }

/* ===== v4.20 Dashboard finish: type weights, one icon scale, Quick actions 2x2, equal status cards, compact setup bar =====
   Only the weights that are really loaded are used (400, 500, 700). The page title and the brand keep 700; titles and values are 500; text is 400. Nothing is simulated. */
body { font-synthesis: none; }
body.lp-app :is(h2, h3, h4, b, strong, legend, .lp-alert b, .kpi .n, .lp-stat b, .lp-steps .st, .lp-mk, .lp-co .av, .lp-me .av, .lp-menu .who b, .lp-tpl .tx b, .lp-pv-s) { font-weight: var(--lp-w-medium); }
body.lp-app h1.lp-pagetitle { font-weight: var(--lp-w-bold); }
body.lp-app .lp-brand .wm b { font-weight: var(--lp-w-bold); }
body.lp-app .lp-cells > div > span, body.lp-app .lp-cell-wide .val { font-weight: var(--lp-w-medium); }
body.lp-app .lp-cells small, body.lp-app .lp-stc .tx small, body.lp-app .lp-tile .tx small, body.lp-app .lp-steps .tx small, body.lp-app .lp-coname small { font-weight: var(--lp-w-regular); }

/* icons: one family (stroke 1.8, 24 grid), the glyph is half of its container (36 -> 18, 40 -> 20, 48 -> 24), always centred, ice-silver by default */
.lp-stic .ic, .lp-ico .ic, .lp-mk .ic { display: block; vertical-align: baseline; }
.lp-stic, .lp-ico, .lp-card > header .lp-ico { color: var(--lp-ice-ink); }
.lp-stic { width: 40px; height: 40px; border-radius: 12px; }
.lp-stic.big { width: 48px; height: 48px; border-radius: 14px; }
.lp-tile .lp-stic { width: 40px; height: 40px; border-radius: 12px; }
.lp-ico { width: 36px; height: 36px; }
.lp-stc[data-tone="ok"] .lp-stic { color: var(--lp-pos-text); }

/* Quick actions: 2x2 on desktop, one column on phones */
.lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.lp-tile { min-height: 64px; }
@media (min-width: 1001px) and (max-width: 1200px) { .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-tile .tx small { display: block; } .lp-tile { min-height: 64px; } }
/* a tile needs about 200px for its title on one line: Company and Quick actions share a row from 1100px (Quick actions gets the wider column below 1241px), below that they stack (the tiles stay 2 x 2) */
@media (min-width: 1241px) { .lp-ovgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (min-width: 1100px) and (max-width: 1240px) { .lp-ovgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }
@media (max-width: 1099px) { .lp-ovgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .lp-tiles { grid-template-columns: 1fr; } }

/* the three status cards: one height */
.lp-status3 { align-items: stretch; }
.lp-stc { min-height: 92px; }

/* setup complete: a quiet single bar */
.lp-card.compact > header { min-height: 32px; flex-wrap: nowrap; }
.lp-card.compact > header h2 { flex: 0 1 auto; min-width: 0; }

/* ===== v4.21 FMCSA Lookup (Signature): search bar, one wide result card with three glass sections. Frosted Silver tokens only; 400 text, 500 titles and values. ===== */
.lk-bar { display: flex; align-items: center; padding: 5px; margin: 0; background: var(--lp-frost-solid); border: 1px solid var(--lp-frost-edge); border-radius: var(--lp-r-lg); box-shadow: var(--lp-frost-hl), var(--lp-frost-sh); overflow: hidden; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lk-bar { background: var(--lp-frost-surface); -webkit-backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.2); backdrop-filter: blur(var(--lp-frost-blur)) saturate(1.2); } }
.lk-f { display: flex; align-items: center; min-width: 0; }
.lk-kind { flex: none; width: 128px; border-right: 1px solid var(--lp-frost-edge-soft); }
.lk-num { flex: 1 1 auto; }
.lk-bar select, .lk-bar input { width: 100%; height: 42px; padding: 0 var(--lp-s4); font: inherit; font-size: var(--lp-fs-sm); font-weight: var(--lp-w-medium); color: var(--lp-ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; outline-offset: -3px; }
.lk-bar input { font-weight: var(--lp-w-regular); }
.lk-bar input::placeholder { color: var(--lp-slate); opacity: 1; }
.lk-go { flex: none; align-self: center; margin: 0; min-height: 42px; padding: 0 var(--lp-s5); gap: 8px; }
.lk-err { margin: var(--lp-s2) 0 0; color: var(--lp-neg-text); }
.lk-card { margin-top: var(--lp-s4); min-height: 612px; display: flex; flex-direction: column; gap: var(--lp-s4); padding: var(--lp-s5); }
.lk-head { display: flex; align-items: center; gap: var(--lp-s4); min-width: 0; }
.lk-mono { display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; font-size: 22px; font-weight: var(--lp-w-medium); letter-spacing: .02em; color: var(--lp-ice-ink); background: var(--lp-frost-tint); border: 1px solid var(--lp-frost-edge-soft); border-radius: 18px; box-shadow: var(--lp-frost-hl); }
.lk-id { display: grid; gap: 4px; min-width: 0; }
.lk-id h2 { font-size: var(--lp-fs-xl); letter-spacing: -.01em; overflow-wrap: anywhere; }
.lk-dba { margin: 0; color: var(--lp-slate); font-size: var(--lp-fs-sm); overflow-wrap: anywhere; }
.lk-chips { display: flex; flex-wrap: wrap; gap: var(--lp-s2); margin-top: 4px; }
.lk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; font-size: var(--lp-fs-xs); font-weight: var(--lp-w-medium); color: var(--lp-ink); background: var(--lp-frost-tint); border: 1px solid var(--lp-frost-edge-soft); border-radius: var(--lp-r-pill); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lk-chip .ic { color: var(--lp-ice-ink); display: block; }
.lk-chip.dim { font-weight: var(--lp-w-regular); color: var(--lp-slate); border-style: dashed; }
.lk-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-s4); flex: 1; }
.lk-sec { container-type: inline-size; display: flex; flex-direction: column; gap: var(--lp-s3); min-width: 0; padding: var(--lp-s4); background: var(--lp-frost-tint); border: 1px solid var(--lp-frost-edge-soft); border-radius: var(--lp-r-md); }
.lk-sec h3 { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: var(--lp-fs-sm); }
.lk-sec h3 .ic { color: var(--lp-ice-ink); display: block; flex: none; }
.lk-sec dl { display: grid; margin: 0; }
.lk-row { display: grid; grid-template-columns: 9.25rem minmax(0, 1fr) auto; align-items: start; gap: var(--lp-s2); min-height: 36px; padding: 8px 0; border-top: 1px solid var(--lp-frost-edge-soft); font-size: var(--lp-fs-sm); }
.lk-row:first-child { border-top: 0; padding-top: 0; min-height: 0; }
.lk-copy-sp { display: none; }
.lk-bar input:focus-visible, .lk-bar select:focus-visible { outline: none; }
.lk-bar:focus-within { border-color: var(--lp-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-focus) 25%, transparent), var(--lp-frost-sh); }
.lk-row dt { color: var(--lp-slate); font-weight: var(--lp-w-regular); }
.lk-row dd { margin: 0; min-width: 0; font-weight: var(--lp-w-medium); overflow-wrap: anywhere; }
.lk-row dd .muted { font-weight: var(--lp-w-regular); }
.lk-st { display: inline-flex; align-items: center; gap: 8px; }
.lk-copy { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; margin-top: -4px; cursor: pointer; color: var(--lp-slate); background: transparent; border: 1px solid transparent; border-radius: var(--lp-r-sm); }
.lk-copy:hover { color: var(--lp-ink); background: var(--lp-sel); border-color: var(--lp-frost-edge-soft); }
.lk-copy .ic { display: block; }
.lk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lp-s2) var(--lp-s4); padding-top: var(--lp-s3); border-top: 1px solid var(--lp-frost-edge-soft); font-size: var(--lp-fs-sm); }
.lk-link { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--lp-ink); font-weight: var(--lp-w-medium); text-decoration: none; }
.lk-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.lk-src { color: var(--lp-slate); font-size: var(--lp-fs-xs); }
.lk-note { margin: calc(-1 * var(--lp-s2)) 0 0; color: var(--lp-slate); font-size: var(--lp-fs-xs); }
.lk-msg { display: grid; justify-items: center; align-content: center; gap: var(--lp-s3); flex: 1; min-height: 340px; text-align: center; }
.lk-msg h2 { font-size: var(--lp-fs-lg); } .lk-msg p { margin: 0; max-width: 52ch; color: var(--lp-slate); overflow-wrap: anywhere; }
.lk-sk { display: block; height: 12px; border-radius: 6px; background: var(--lp-frost-edge-soft); opacity: .7; }
.lk-sk.tall { height: 28px; } .lk-id .lk-sk.w30 { height: 18px; margin: 2px 0; } .lk-foot .lk-sk { height: 18px; margin: 7px 0; } .lk-note .lk-sk { height: 14px; } .lk-sec h3 .lk-sk { height: 16px; margin: 4px 0; } .lk-sk.chip { display: inline-block; width: 84px; height: 28px; border-radius: 999px; }
.lk-sk.w30 { width: 30%; } .lk-sk.w40 { width: 40%; } .lk-sk.w60 { width: 60%; } .lk-sk.w90 { width: 90%; }
.lk-sk-m { background: var(--lp-frost-edge-soft); opacity: .7; }
.lk-id .lk-sk.w40 { min-width: 160px; } .lk-id .lk-sk.w30 { min-width: 110px; }
@media (max-width: 1000px) { .lk-secs { grid-template-columns: 1fr; } .lk-card { min-height: 0; } .lk-msg { min-height: 260px; } }
@media (max-width: 560px) {
  .lk-bar { flex-wrap: wrap; }
  .lk-kind { width: 100%; border-right: 0; border-bottom: 1px solid var(--lp-frost-edge-soft); }
  .lk-num { flex: 1 1 100%; border-bottom: 1px solid var(--lp-frost-edge-soft); }
  .lk-go { flex: 1 1 100%; margin: 4px 0 0; justify-content: center; }
  .lk-card { padding: var(--lp-s4); }
  .lk-head { align-items: flex-start; } .lk-mono { width: 52px; height: 52px; font-size: 18px; border-radius: 15px; }
  .lk-id h2 { font-size: var(--lp-fs-lg); }
}
@media (pointer: coarse), (max-width: 760px) { .lk-bar select, .lk-bar input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .lk-copy, .lk-link { transition: none; } }
.lk-copy, .lk-bar select, .lk-bar input { transition: background-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease); }
/* a section that is too narrow for label + value side by side stacks them (label above value): same rule on phones, 1100-1366 desktops and inside the loading skeleton, so the card keeps its height */
@container (max-width: 339px) {
  .lk-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--lp-s2); min-height: 62px; padding-block: 9px; }
  .lk-row:first-child { min-height: 51px; }
  .lk-row dt { grid-column: 1 / -1; font-size: var(--lp-fs-xs); } .lk-row dd { grid-column: 1; } .lk-row .lk-copy { grid-column: 2; grid-row: 2; margin-top: -3px; }
}
@media (max-width: 560px) { .lk-note:has(.lk-sk) { min-height: 56px; } }