/*
 * Sijil V2 — The Wayfinding System.
 * Every screen is signage: one destination named large, one next step,
 * sections as pictogram signs. No framework; Overpass + Phosphor (fill).
 */

/* ============ Tokens ============ */
:root {
    --v2-green-900: #072a20;
    --v2-green: #0b3d2e;
    --v2-green-700: #13513d;
    --v2-green-600: #1b6a50;
    --v2-green-wash: #e3eee9;
    --v2-yellow: #ffd400;
    --v2-yellow-deep: #e6bf00;
    --v2-yellow-wash: #fff6c7;
    --v2-red: #c8102e;
    --v2-red-wash: #fbe6e9;
    --v2-ground: #f4f5f2;
    --v2-surface: #ffffff;
    --v2-ink: #1a1a1a;
    --v2-ink-2: #3d4440;
    --v2-ink-3: #5b635f;
    --v2-line: #d5d9d5;
    --v2-line-2: #b7bdb8;
    --v2-on-green: #ffffff;
    --v2-on-green-2: #c3d8cf;

    /* Derived tokens so a theme can re-colour shadows, hovers and charts. */
    --v2-shadow-rgb: 7, 42, 32;
    --v2-row-hover: #fafbf9;
    --v2-chart-1: #0b3d2e;
    --v2-chart-2: #1a1a1a;
    --v2-chart-3: #5b635f;
    --v2-chart-4: #1b6a50;

    --v2-font: "Overpass", "Segoe UI", system-ui, -apple-system, sans-serif;
    --v2-radius: 6px;
    --v2-radius-sm: 4px;
    --v2-rail: 17rem;
    --v2-gutter: clamp(1rem, 2.5vw, 2rem);
    --v2-shadow: 0 1px 2px rgba(var(--v2-shadow-rgb), .06), 0 8px 24px -14px rgba(var(--v2-shadow-rgb), .35);
    --v2-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ============ Base ============ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--v2-line-2) transparent;
}

body.v2 {
    margin: 0;
    min-height: 100vh;
    background: var(--v2-ground);
    color: var(--v2-ink);
    font-family: var(--v2-font);
    font-size: 1rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

.v2 h1,
.v2 h2,
.v2 h3,
.v2 h4 {
    margin: 0;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.v2 p {
    margin: 0;
}

.v2 a {
    color: var(--v2-green-600);
    text-underline-offset: .2em;
}

.v2 a:hover {
    color: var(--v2-green);
}

.v2 img {
    max-width: 100%;
}

.v2 ::selection {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2 input,
.v2 textarea {
    caret-color: var(--v2-green);
}

.v2 :focus-visible {
    outline: 3px solid var(--v2-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--v2-ink);
    border-radius: var(--v2-radius-sm);
}

.v2 ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.v2 ::-webkit-scrollbar-thumb {
    background: var(--v2-line-2);
    border: 2px solid var(--v2-ground);
    border-radius: 6px;
}

.v2-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.v2-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--v2-yellow);
    color: var(--v2-ink) !important;
    font-weight: 800;
    border-radius: var(--v2-radius);
    text-decoration: none;
}

.v2-skip:focus {
    top: 1rem;
}

.v2 .ph-fill,
.v2 .ph,
.v2 .ph-bold {
    line-height: 1;
    flex-shrink: 0;
}

/* ============ Shell ============ */
.v2-shell {
    display: grid;
    grid-template-columns: var(--v2-rail) minmax(0, 1fr);
    min-height: 100vh;
}

.v2-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--v2-green);
    color: var(--v2-on-green);
    overflow-y: auto;
}

.v2-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    color: var(--v2-on-green) !important;
    text-decoration: none;
}

.v2-brand-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--v2-radius);
    background: #ffffff;
    overflow: hidden;
}

/* T.png has wide white margins and thin strokes: crop into the artwork and
   darken the lines so the mark stays legible at small sizes. */
.v2-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.5);
    filter: contrast(1.8);
}

.v2-brand-name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}

.v2-brand-sub {
    display: block;
    margin-top: .2rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--v2-on-green-2);
}

.v2-directory {
    position: relative;
    flex: 1;
    padding: .5rem .75rem 1rem;
}

.v2 .v2-directory-group {
    margin: 1.5rem .6rem .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-on-green-2);
}

.v2-directory ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2-marker {
    position: absolute;
    left: .75rem;
    right: .75rem;
    top: 0;
    height: 0;
    border-radius: var(--v2-radius);
    background: rgba(255, 255, 255, .1);
    pointer-events: none;
    opacity: 0;
    transition: transform 320ms var(--v2-ease), opacity 160ms linear;
}

.v2-dir-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .4rem .6rem;
    border-radius: var(--v2-radius);
    color: var(--v2-on-green) !important;
    font-weight: 700;
    text-decoration: none;
}

.v2-dir-link .v2-pict {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--v2-radius-sm);
    background: rgba(255, 255, 255, .12);
    font-size: 1.15rem;
}

.v2-dir-link[aria-current="page"] {
    background: var(--v2-yellow);
    color: var(--v2-ink) !important;
}

.v2-dir-link[aria-current="page"] .v2-pict {
    background: var(--v2-ink);
    color: var(--v2-yellow);
}

.v2-rail-foot {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .875rem;
}

.v2-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}

.v2-user img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--v2-on-green-2);
}

.v2-user-name {
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.v2-user-role {
    color: var(--v2-on-green-2);
    font-size: .8rem;
}

.v2-rail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.v2-rail-actions a,
.v2-rail-actions button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--v2-radius-sm);
    background: transparent;
    color: var(--v2-on-green) !important;
    font: inherit;
    font-weight: 600;
    font-size: .8rem;
    text-decoration: none;
    cursor: pointer;
}

.v2-rail-actions a:hover,
.v2-rail-actions button:hover {
    border-color: var(--v2-on-green);
}

.v2-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.v2-content {
    flex: 1;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--v2-gutter) 3rem;
}

.v2-signbar {
    display: none;
}

.v2-footer {
    padding: 1.25rem var(--v2-gutter);
    color: var(--v2-ink-3);
    font-size: .8rem;
}

/* ============ Destination panel (page header) ============ */
.v2-destination {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin: var(--v2-gutter) 0 1.75rem;
    padding: 1.75rem 2rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .6rem;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    font-weight: 600;
    color: var(--v2-on-green-2);
}

.v2-route li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.v2-route li + li::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: .2rem;
}

.v2-route a {
    color: var(--v2-on-green) !important;
    text-decoration: none;
}

.v2-route a:hover {
    text-decoration: underline;
}

.v2-destination-title {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    color: var(--v2-on-green);
    overflow-wrap: anywhere;
}

.v2-destination-title--long {
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
    max-width: 48ch;
}

.v2-route a,
.v2-route [aria-current="page"] {
    display: inline-block;
    max-width: 26ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.v2-destination-lede {
    margin-top: .5rem !important;
    max-width: 60ch;
    color: var(--v2-on-green-2);
}

.v2-destination-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.v2-destination .v2-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: var(--v2-on-green) !important;
}

.v2-destination .v2-btn--outline:hover {
    border-color: var(--v2-on-green);
    background: rgba(255, 255, 255, .08);
}

/* ============ Buttons ============ */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 2.75rem;
    padding: .55rem 1.1rem;
    border: 2px solid transparent;
    border-radius: var(--v2-radius);
    font: inherit;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 160ms var(--v2-ease), border-color 160ms var(--v2-ease),
        color 160ms var(--v2-ease);
}

.v2-btn .v2-arrow {
    transition: transform 220ms var(--v2-ease);
}

.v2-btn:hover .v2-arrow,
.v2-btn:focus-visible .v2-arrow {
    transform: translateX(4px);
}

.v2-btn--route {
    background: var(--v2-yellow);
    border-color: var(--v2-yellow);
    color: var(--v2-ink) !important;
}

.v2-btn--route:hover {
    background: var(--v2-yellow-deep);
    border-color: var(--v2-yellow-deep);
}

.v2-btn--green {
    background: var(--v2-green);
    border-color: var(--v2-green);
    color: var(--v2-on-green) !important;
}

.v2-btn--green:hover {
    background: var(--v2-green-700);
    border-color: var(--v2-green-700);
}

.v2-btn--outline {
    background: var(--v2-surface);
    border-color: var(--v2-line-2);
    color: var(--v2-ink) !important;
}

.v2-btn--outline:hover {
    border-color: var(--v2-ink);
}

.v2-btn--stop {
    background: var(--v2-surface);
    border-color: var(--v2-red);
    color: var(--v2-red) !important;
}

.v2-btn--stop:hover {
    background: var(--v2-red);
    color: #fff !important;
}

.v2-btn--quiet {
    background: transparent;
    color: var(--v2-ink-2) !important;
    padding-left: .6rem;
    padding-right: .6rem;
}

.v2-btn--quiet:hover {
    background: rgba(26, 26, 26, .06);
    color: var(--v2-ink) !important;
}

.v2-btn--sm {
    min-height: 2.25rem;
    padding: .35rem .8rem;
    font-size: .85rem;
}

.v2-btn--block {
    width: 100%;
}

.v2-btn[disabled],
.v2-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

/* ============ Sign chips (status) ============ */
.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem .15rem;
    border: 1.5px solid transparent;
    border-radius: var(--v2-radius-sm);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.v2-chip .ph-fill {
    font-size: .95rem;
}

.v2-chip--today {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2-chip--upcoming,
.v2-chip--approved,
.v2-chip--attended {
    background: var(--v2-green-wash);
    border-color: var(--v2-green-600);
    color: var(--v2-green);
}

.v2-chip--past,
.v2-chip--pending,
.v2-chip--unmarked {
    background: var(--v2-surface);
    border-color: var(--v2-line-2);
    border-style: dashed;
    color: var(--v2-ink-2);
}

.v2-chip--rejected,
.v2-chip--absent {
    background: var(--v2-red-wash);
    border-color: var(--v2-red);
    color: var(--v2-red);
}

/* ============ Surfaces ============ */
.v2-panel {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
}

.v2-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-panel-title {
    font-size: 1.15rem;
}

.v2-panel-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.v2-section + .v2-section {
    margin-top: 1.75rem;
}

/* ============ Toolbar: search + filter signs ============ */
.v2-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.v2-search {
    position: relative;
    flex: 1 1 18rem;
    max-width: 26rem;
}

.v2-search .ph-fill {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v2-ink-3);
    font-size: 1.1rem;
    pointer-events: none;
}

.v2-search .v2-input {
    padding-left: 2.5rem;
}

.v2-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-filters a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.25rem;
    padding: .3rem .8rem;
    border: 1.5px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-ink-2) !important;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.v2-filters a:hover {
    border-color: var(--v2-ink);
    color: var(--v2-ink) !important;
}

.v2-filters a[aria-current="true"] {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: var(--v2-surface) !important;
}

/* ============ Forms ============ */
.v2-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.v2-field + .v2-field {
    margin-top: 1.25rem;
}

.v2-label {
    font-weight: 800;
    font-size: .95rem;
}

.v2-label .v2-req {
    color: var(--v2-red);
}

.v2-help {
    color: var(--v2-ink-3);
    font-size: .85rem;
}

.v2-error {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--v2-red);
    font-size: .85rem;
    font-weight: 700;
}

.v2-input,
.v2-select,
.v2-textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem .8rem;
    border: 2px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font: inherit;
    transition: border-color 140ms var(--v2-ease);
}

.v2-textarea {
    min-height: 7rem;
    resize: vertical;
}

.v2-input::placeholder,
.v2-textarea::placeholder {
    color: var(--v2-ink-3);
    opacity: 1;
}

.v2-input:hover,
.v2-select:hover,
.v2-textarea:hover {
    border-color: var(--v2-ink-3);
}

.v2-input:focus,
.v2-select:focus,
.v2-textarea:focus {
    outline: none;
    border-color: var(--v2-ink);
    box-shadow: 0 0 0 3px var(--v2-yellow);
}

.v2-input[aria-invalid="true"],
.v2-select[aria-invalid="true"],
.v2-textarea[aria-invalid="true"] {
    border-color: var(--v2-red);
}

.v2 input[type="checkbox"],
.v2 input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--v2-green);
}

/* ============ Tables ============ */
.v2-table-wrap {
    overflow-x: auto;
}

.v2-table {
    width: 100%;
    border-collapse: collapse;
}

.v2-table th {
    padding: .75rem 1rem;
    border-bottom: 2px solid var(--v2-ink);
    text-align: left;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v2-ink-2);
    white-space: nowrap;
}

.v2-table td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--v2-line);
    vertical-align: middle;
}

.v2-table tbody tr:hover td {
    background: var(--v2-row-hover);
}

.v2-table .v2-num {
    text-align: right;
}

.v2-table-actions {
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
}

/* ============ Notices ============ */
.v2-notice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--v2-green-600);
    border-radius: var(--v2-radius);
    background: var(--v2-green-wash);
    color: var(--v2-green);
    font-weight: 600;
}

.v2-notice .ph-fill {
    font-size: 1.3rem;
    margin-top: .05rem;
}

.v2-notice--stop {
    border-color: var(--v2-red);
    background: var(--v2-red-wash);
    color: var(--v2-red);
}

.v2-notice-close {
    margin-left: auto;
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

/* ============ Empty state ============ */
.v2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--v2-ink-2);
}

.v2-empty .v2-pict-lg {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-size: 1.8rem;
}

.v2-empty h3 {
    font-size: 1.2rem;
    color: var(--v2-ink);
}

.v2-empty p {
    max-width: 42ch;
}

/* ============ Pagination (Laravel bootstrap-4 markup) ============ */
.v2 .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2 .page-link {
    display: grid;
    place-items: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .6rem;
    border: 1.5px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-ink) !important;
    font-weight: 700;
    text-decoration: none;
}

.v2 .page-item.active .page-link {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: var(--v2-surface) !important;
}

.v2 .page-item.disabled .page-link {
    color: var(--v2-ink-3) !important;
    opacity: .55;
}

.v2-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--v2-line);
    color: var(--v2-ink-3);
    font-size: .875rem;
}

/* ============ Class list rows ============ */
.v2-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2-list-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-list-row:last-child {
    border-bottom: 0;
}

.v2-list-row:hover {
    background: var(--v2-row-hover);
}

.v2-date-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-on-green);
    line-height: 1;
}

.v2-date-sign--today {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2-date-sign--past {
    background: var(--v2-ground);
    color: var(--v2-ink-2);
    border: 1.5px dashed var(--v2-line-2);
}

.v2-date-day {
    font-size: 1.75rem;
    font-weight: 800;
}

.v2-date-month {
    margin-top: .2rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.v2-list-title {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--v2-ink) !important;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.v2-list-title:hover {
    text-decoration: underline;
}

.v2-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    margin-top: .35rem;
    color: var(--v2-ink-3);
    font-size: .875rem;
}

.v2-meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.v2-list-end {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ============ Class page: facts + section signs ============ */
.v2-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
}

.v2-fact {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.5rem;
    background: var(--v2-surface);
}

.v2-fact .v2-pict {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-green-wash);
    color: var(--v2-green);
    font-size: 1.15rem;
}

.v2-fact dt {
    font-size: .78rem;
    font-weight: 700;
    color: var(--v2-ink-3);
}

.v2-fact dd {
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.v2-signs {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: .6rem 1rem;
    list-style: none;
    overflow-x: auto;
}

.v2-signs a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .35rem .8rem;
    border-radius: var(--v2-radius);
    color: var(--v2-ink-2) !important;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.v2-signs a:hover {
    background: var(--v2-ground);
    color: var(--v2-ink) !important;
}

.v2-signs a[aria-current="page"] {
    background: var(--v2-green);
    color: var(--v2-on-green) !important;
}

.v2-signs a[aria-current="page"] .ph-fill {
    color: var(--v2-yellow);
}

.v2-prose {
    max-width: 72ch;
    color: var(--v2-ink-2);
    line-height: 1.65;
}

.v2-prose > * + * {
    margin-top: .9em;
}

/* ============ Dialog (confirm) ============ */
.v2-dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--v2-radius);
    box-shadow: 0 24px 60px -20px rgba(var(--v2-shadow-rgb), .55);
    color: var(--v2-ink);
}

.v2-dialog::backdrop {
    background: rgba(var(--v2-shadow-rgb), .55);
}

.v2-dialog-body {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
}

.v2-dialog-body .v2-pict-lg {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--v2-radius);
    background: var(--v2-red);
    color: #fff;
    font-size: 1.5rem;
}

.v2-dialog-body h2 {
    font-size: 1.2rem;
    margin-bottom: .35rem;
}

.v2-dialog-body p {
    color: var(--v2-ink-2);
}

.v2-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.5rem;
    background: var(--v2-ground);
}


/* ============ Register (participant list) ============ */
.v2-bulkbar {
    position: sticky;
    top: .75rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    border-radius: var(--v2-radius);
    background: var(--v2-ink);
    color: var(--v2-surface);
    box-shadow: var(--v2-shadow);
}

.v2-bulkbar[hidden] {
    display: none;
}

.v2-bulkbar strong {
    margin-right: auto;
}

.v2-bulkbar .v2-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .5);
    color: var(--v2-surface) !important;
}

.v2-bulkbar .v2-btn--outline:hover {
    border-color: var(--v2-surface);
}

.v2-person-name {
    font-weight: 800;
}

.v2-person-sub {
    color: var(--v2-ink-3);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.v2-state-cell {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.v2-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1.5px solid transparent;
    border-radius: var(--v2-radius);
    background: transparent;
    color: var(--v2-ink-2) !important;
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
}

.v2-icon-btn:hover {
    border-color: var(--v2-line-2);
    background: var(--v2-surface);
    color: var(--v2-ink) !important;
}

.v2-icon-btn--stop:hover {
    border-color: var(--v2-red);
    color: var(--v2-red) !important;
}

.v2-check-col {
    width: 2.75rem;
}

/* ============ Form dialog ============ */
.v2-dialog-form .v2-dialog-head {
    padding: 1.25rem 1.5rem .25rem;
}

.v2-dialog-form .v2-dialog-head h2 {
    font-size: 1.25rem;
}

.v2-dialog-fields {
    padding: 1rem 1.5rem 1.25rem;
}

/* ============ File input ============ */
.v2-file {
    padding: .5rem;
}

.v2-file::file-selector-button {
    margin-right: .8rem;
    padding: .45rem .9rem;
    border: 2px solid var(--v2-ink);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* ============ Syllabus ============ */
.v2-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.v2-step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
    counter-increment: step;
}

.v2-step:last-child {
    border-bottom: 0;
}

.v2-step::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-size: 1.35rem;
    font-weight: 800;
}

.v2-step h3 {
    font-size: 1.05rem;
    margin-bottom: .25rem;
}

.v2-step p {
    color: var(--v2-ink-2);
    white-space: pre-line;
}

/* ============ Responsive table -> stacked rows ============ */
@media (max-width: 767.98px) {
    .v2-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .v2-table--stack,
    .v2-table--stack tbody,
    .v2-table--stack tr,
    .v2-table--stack td {
        display: block;
        width: 100%;
    }

    .v2-table--stack tr {
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--v2-line);
    }

    .v2-table--stack td {
        padding: .25rem 0;
        border: 0;
    }

    .v2-table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .1rem;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--v2-ink-3);
    }

    .v2-table--stack .v2-table-actions {
        justify-content: flex-start;
        margin-top: .4rem;
    }

    .v2-table--stack .v2-check-col {
        display: block;
        width: auto;
        padding-bottom: .5rem;
    }
}


/* ============ Class form ============ */
.v2-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.v2-two .v2-field + .v2-field {
    margin-top: 0;
}

.v2-editor {
    min-height: 12rem;
    background: var(--v2-surface);
    font-family: var(--v2-font);
    font-size: 1rem;
}

.v2 .ql-toolbar.ql-snow {
    border: 2px solid var(--v2-line-2);
    border-bottom: 1px solid var(--v2-line);
    border-radius: var(--v2-radius) var(--v2-radius) 0 0;
    background: var(--v2-ground);
}

.v2 .ql-container.ql-snow {
    border: 2px solid var(--v2-line-2);
    border-top: 0;
    border-radius: 0 0 var(--v2-radius) var(--v2-radius);
    font-family: var(--v2-font);
    font-size: 1rem;
}

.v2 .ql-editor {
    min-height: 11rem;
}

.v2 .ql-editor:focus-visible {
    outline: none;
    box-shadow: none;
}

.v2 .ql-container.ql-snow:focus-within {
    border-color: var(--v2-ink);
    box-shadow: 0 0 0 3px var(--v2-yellow);
}

.v2 .ql-editor.ql-blank::before {
    color: var(--v2-ink-3);
    font-style: normal;
}

.v2-syllabus-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2-syllabus-row {
    padding: 1rem 0;
    border-bottom: 1px solid var(--v2-line);
}

.v2-syllabus-row:first-child {
    padding-top: 0;
}

.v2-syllabus-row:last-child {
    border-bottom: 0;
}

.v2-syllabus-row .v2-field + .v2-field {
    margin-top: .9rem;
}

.v2-syllabus-row > .v2-btn {
    margin-top: .5rem;
}

.v2-thumb {
    width: 10rem;
    max-width: 100%;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    object-fit: cover;
}

.v2-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    cursor: pointer;
}

.v2-formbar {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.5rem;
    padding: .9rem 0;
    background: linear-gradient(to top, var(--v2-ground) 70%, transparent);
}

@media (max-width: 575.98px) {
    .v2-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-formbar .v2-btn {
        flex: 1 1 8rem;
    }
}


/* ============ Participant portal ============ */
.v2-count {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 .35rem;
    border-radius: 3px;
    background: rgba(26, 26, 26, .09);
    font-size: .78rem;
    text-align: center;
}

.v2-filters a[aria-current="true"] .v2-count {
    background: rgba(255, 255, 255, .22);
}

.v2-file-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-file-row:last-child {
    border-bottom: 0;
}

.v2-pict-file {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-size: 1.35rem;
}

.v2-dialog-wide {
    width: min(42rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: auto;
}

.v2-dialog-head-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-dialog-head-bar h2 {
    font-size: 1.2rem;
    color: var(--v2-on-green);
}

.v2-dialog-head-bar .v2-help {
    color: var(--v2-on-green-2);
}

.v2-dialog-head-bar .v2-icon-btn {
    color: var(--v2-on-green) !important;
}

.v2-answers {
    margin: 0;
    padding: 1rem 1.5rem 1.5rem;
}

.v2-answers dt {
    margin-top: 1rem;
    font-weight: 800;
}

.v2-answers dd {
    margin: .2rem 0 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-ink-2);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.v2-review {
    padding: 1rem 1.5rem 1.5rem;
}

.v2-qa + .v2-qa {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--v2-line);
}

.v2-qa h3 {
    font-size: 1rem;
}

.v2-qa-text {
    margin: .35rem 0 .75rem !important;
    color: var(--v2-ink-2);
}

.v2-qa-skip {
    margin-bottom: .6rem !important;
    color: var(--v2-ink-3);
    font-weight: 700;
}

.v2-qa-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.v2-qa-option {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .7rem .9rem;
    border: 1.5px solid var(--v2-line);
    border-radius: var(--v2-radius);
}

.v2-qa-option strong {
    font-size: .8rem;
}

.v2-qa-option.is-right {
    border-color: var(--v2-green-600);
    background: var(--v2-green-wash);
    color: var(--v2-green);
}

.v2-qa-option.is-wrong {
    border: 2px double var(--v2-red);
    background: var(--v2-red-wash);
    color: var(--v2-red);
}

.v2-qa-option.is-key {
    border: 1.5px dashed var(--v2-green-600);
    color: var(--v2-green);
}

.v2-copyrow {
    display: flex;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .v2-file-row {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        padding: .9rem 1rem;
    }

    .v2-file-row > .v2-btn {
        grid-column: 2;
        justify-self: start;
    }

    .v2-pict-file {
        width: 2.5rem;
        height: 2.5rem;
    }

    .v2-review,
    .v2-answers {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* ============ Public pages (no rail) ============ */
.v2-public {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.v2-pubbar {
    background: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-pubbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 44rem;
    margin: 0 auto;
    padding: .7rem var(--v2-gutter);
}

.v2-pubbar .v2-brand {
    padding: 0;
}

.v2-pubbar .v2-brand-mark {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.15rem;
}

.v2-pubbar-note {
    color: var(--v2-on-green-2);
    font-weight: 700;
    font-size: .9rem;
}

.v2-pubmain {
    flex: 1;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.5rem var(--v2-gutter) 2rem;
}

.v2-pubcard {
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow);
}

.v2-pubcard--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.v2-pubcard--center h1 {
    font-size: 1.75rem;
}

.v2-pubcard--center p {
    max-width: 40ch;
    color: var(--v2-ink-2);
}

.v2-pict-lg--ok {
    background: var(--v2-green) !important;
}

.v2-pubcard--center .v2-pict-lg {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-size: 2rem;
}

.v2-destination--flat {
    margin: 0;
    border-radius: 0;
}

.v2-onlight {
    color: var(--v2-yellow) !important;
    font-weight: 700;
}

.v2-facts--flat {
    border-bottom: 1px solid var(--v2-line);
}

.v2-pubform {
    padding: 1.5rem;
}

.v2-pubform > .v2-field + .v2-field,
.v2-pubform > .v2-field + .v2-btn,
.v2-pubform > .v2-field + fieldset {
    margin-top: 1.5rem;
}

.v2-pubform fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.v2-pubform legend {
    padding: 0;
    margin-bottom: .6rem;
}

.v2-input--lg {
    min-height: 3.25rem;
    font-size: 1.05rem;
}

.v2-btn--lg {
    min-height: 3.25rem;
    font-size: 1.05rem;
}

.v2-pubform > .v2-btn {
    margin-top: 1.75rem;
}

.v2-notice--in {
    margin: 1.25rem 1.5rem 0;
}

.v2-choices {
    display: grid;
    gap: .5rem;
}

.v2-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    padding: .55rem .9rem;
    border: 2px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    cursor: pointer;
    font-weight: 600;
}

.v2-choice:hover {
    border-color: var(--v2-ink);
}

.v2-choice:has(input:checked) {
    border-color: var(--v2-green);
    background: var(--v2-green-wash);
}

.v2-choice input {
    width: 1.3rem;
    height: 1.3rem;
}

.v2-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
}

.v2-scale-end {
    font-size: .85rem;
    font-weight: 700;
    color: var(--v2-ink-3);
}

.v2-scale-points {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.v2-point {
    position: relative;
    cursor: pointer;
}

.v2-point input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.v2-point span {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    font-weight: 800;
}

.v2-point input:checked + span {
    border-color: var(--v2-green);
    background: var(--v2-green);
    color: var(--v2-yellow);
}

.v2-point input:focus-visible + span {
    outline: 3px solid var(--v2-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--v2-ink);
}

.v2-rating {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.v2-star {
    position: relative;
    cursor: pointer;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--v2-line-2);
}

.v2-star input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.v2-star:hover,
.v2-star:has(~ .v2-star:hover) {
    color: var(--v2-yellow-deep);
}

.v2-rating:has(.v2-star:hover) .v2-star:not(:hover):not(:has(~ .v2-star:hover)) {
    color: var(--v2-line-2);
}

.v2-star:has(input:checked),
.v2-star:has(~ .v2-star input:checked) {
    color: var(--v2-yellow-deep);
}

.v2-star:has(input:focus-visible) {
    outline: 3px solid var(--v2-yellow);
    box-shadow: 0 0 0 5px var(--v2-ink);
    border-radius: var(--v2-radius-sm);
}

.v2-grid th[scope="row"] {
    border-bottom: 1px solid var(--v2-line);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v2-ink);
    white-space: normal;
}

.v2-grid th {
    white-space: normal;
}

.v2-grid thead th.v2-grid-col {
    min-width: 4.5rem;
    font-size: .72rem;
    line-height: 1.25;
}

.v2-grid-col {
    text-align: center !important;
}

.v2-grid-cell {
    display: grid;
    place-items: center;
    min-height: 2.75rem;
    cursor: pointer;
}

.v2-grid-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .v2-grid,
    .v2-grid tbody,
    .v2-grid tr,
    .v2-grid th,
    .v2-grid td {
        display: block;
        width: 100%;
    }

    .v2-grid thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .v2-grid tr {
        padding: .85rem 0;
        border-bottom: 1px solid var(--v2-line);
    }

    .v2-grid th[scope="row"] {
        padding: 0 0 .5rem;
        border: 0;
        font-weight: 800;
    }

    .v2-grid td {
        padding: 0;
        border: 0;
    }

    .v2-grid-cell {
        display: flex;
        justify-content: flex-start;
        gap: .7rem;
        min-height: 2.75rem;
        padding: .3rem .6rem;
        border-radius: var(--v2-radius-sm);
    }

    .v2-grid-label {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        overflow: visible;
        font-weight: 600;
    }

    .v2-grid-cell:has(input:checked) {
        background: var(--v2-green-wash);
    }
}

.v2-organizer {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 44rem;
    margin: 0 auto 1rem;
    text-align: left;
}

.v2-organizer img {
    border-radius: 50%;
    object-fit: cover;
}

.v2-organizer p {
    margin: 0;
}

.v2-pubfoot {
    padding: 1.25rem var(--v2-gutter) 1.5rem;
    border-top: 1px solid var(--v2-line);
    color: var(--v2-ink-3);
    font-size: .85rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    .v2-pubmain {
        padding-top: 1rem;
    }

    .v2-pubform {
        padding: 1.25rem 1rem;
    }

    .v2-notice--in {
        margin: 1rem 1rem 0;
    }
}


/* ============ Builders ============ */
.v2-builder {
    margin-top: .25rem;
}

.v2-builder-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.v2-builder-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.v2-qlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.v2-q {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
}

.v2-q-head {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--v2-line);
    background: var(--v2-ground);
}

.v2-q-num {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-weight: 800;
    flex-shrink: 0;
}

.v2-q-body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.v2-q-body .v2-field + .v2-field {
    margin-top: 0;
}

.v2-q-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--v2-line);
}

.v2-q-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.v2-q-tools .v2-icon-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.v2-q-add {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 2px dashed var(--v2-line-2);
    border-radius: var(--v2-radius);
}

.v2-q-add .v2-input {
    flex: 1 1 14rem;
    width: auto;
}

.v2-opts {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: .5rem;
}

.v2-opts legend {
    padding: 0;
    margin-bottom: .1rem;
}

.v2-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.v2-opt .v2-input {
    flex: 1;
}

.v2-builder-status {
    margin: 0 auto 0 0;
    font-weight: 700;
    color: var(--v2-ink-2);
}

.v2-builder-status--bad {
    color: var(--v2-red);
}

.v2-pad {
    padding: 1rem 1.5rem;
    list-style: none;
}

.v2-qb-grid {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.v2-qb-nav,
.v2-qb-editor {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow);
}

.v2-qb-nav {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: .75rem;
}

.v2-qb-nav-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.v2-qb-items {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    display: grid;
    gap: .35rem;
}

.v2-qb-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .45rem;
    border: 1.5px solid transparent;
    border-radius: var(--v2-radius);
    background: transparent;
    color: var(--v2-ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.v2-qb-item:hover {
    background: var(--v2-ground);
}

.v2-qb-item[aria-current="true"] {
    border-color: var(--v2-green);
    background: var(--v2-green-wash);
}

.v2-qb-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-qb-editor {
    padding: 1.25rem;
    display: grid;
    gap: 1.1rem;
}

.v2-qb-editor .v2-field + .v2-field {
    margin-top: 0;
}

.v2-qb-editor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.v2-qb-img {
    display: block;
    max-width: 100%;
    max-height: 16rem;
    object-fit: contain;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
}

.v2-correct {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 5.5rem;
    font-size: .8rem;
    font-weight: 800;
    color: var(--v2-green);
}

/* ============ Quiz cards ============ */
.v2-quizcard-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 1.1rem 1.5rem .5rem;
}

.v2-quizcard-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.v2-countdown {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border: 1.5px solid var(--v2-ink);
    border-radius: var(--v2-radius-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.v2-quizcard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem 1.1rem;
}

.v2-dialog--go .v2-pict-lg {
    background: var(--v2-green);
    color: var(--v2-yellow);
}

/* ============ Leaderboard ============ */
.v2-podium {
    list-style: none;
    margin: 0;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.v2-podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.25rem 1rem;
    border: 1.5px solid var(--v2-line);
    border-radius: var(--v2-radius);
    text-align: center;
}

.v2-podium-place--1 {
    order: 2;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-color: var(--v2-yellow-deep);
    background: var(--v2-yellow-wash);
}

.v2-podium-place--2 {
    order: 1;
}

.v2-podium-place--3 {
    order: 3;
}

.v2-podium-rank {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-size: 1.4rem;
    font-weight: 800;
}

.v2-podium-place--1 .v2-podium-rank {
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2-podium-name {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.v2-podium-score {
    font-size: 1.6rem;
    font-weight: 800;
}

.v2-podium-score small {
    font-size: .8rem;
    font-weight: 700;
    color: var(--v2-ink-3);
}

.v2-rank-num {
    font-weight: 800;
}

/* ============ Share dialog ============ */
.v2-share-body {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.v2-qr {
    display: grid;
    place-items: center;
    min-width: 13rem;
    min-height: 13rem;
    padding: .75rem;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: #fff;
    text-align: center;
    color: var(--v2-ink-3);
}

.v2-share-link {
    width: 100%;
}

@media (max-width: 767.98px) {
    .v2-qb-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-qb-nav {
        position: static;
        max-height: 14rem;
    }

    .v2-podium {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-podium-place--1 {
        order: 1;
    }

    .v2-podium-place--2 {
        order: 2;
    }

    .v2-podium-place--3 {
        order: 3;
    }
}

@media (max-width: 575.98px) {
    .v2-quizcard-main,
    .v2-quizcard-actions {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .v2-quizcard-actions form,
    .v2-quizcard-actions > .v2-btn {
        flex: 1 1 auto;
    }

    .v2-quizcard-actions form .v2-btn:not(.v2-icon-btn) {
        width: 100%;
    }
}


/* ============ Quiz runner and quiz results ============ */

.v2-runner[hidden],
.v2-runner [hidden] {
    display: none !important;
}

.v2-runner-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: 1.25rem 1.5rem .75rem;
}

.v2-runner-title {
    font-size: 1.3rem;
    overflow-wrap: anywhere;
}

.v2-runner-clocks {
    display: flex;
    gap: .5rem;
}

.v2-clock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 5.5rem;
    justify-content: center;
    padding: .4rem .7rem;
    border: 2px solid var(--v2-ink);
    border-radius: var(--v2-radius);
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.v2-clock--q {
    background: var(--v2-green);
    border-color: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-clock--warn {
    background: var(--v2-red);
    border-color: var(--v2-red);
    color: #fff;
}

.v2-progress {
    height: .6rem;
    margin: 0 1.5rem;
    border-radius: 99px;
    background: var(--v2-line);
    overflow: hidden;
}

.v2-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--v2-green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 400ms var(--v2-ease);
}

.v2-runner-body {
    padding: 1.5rem;
}

.v2-runner-q {
    min-width: 0;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.v2-runner-text {
    padding: 0;
    margin-bottom: .75rem;
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.v2-runner-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1rem;
    padding: .25rem .6rem;
    border: 1.5px dashed var(--v2-line-2);
    border-radius: var(--v2-radius-sm);
    font-size: .875rem;
    font-weight: 700;
    color: var(--v2-ink-2);
}

.v2-runner-img {
    margin: 0 0 1rem;
}

.v2-runner-options {
    display: grid;
    gap: .75rem;
}

.v2-choice--quiz {
    gap: .9rem;
    min-height: 3.75rem;
    padding: .8rem 1rem;
    font-size: 1.05rem;
}

.v2-choice--quiz input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.v2-choice--quiz {
    position: relative;
}

.v2-choice-letter {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-ground);
    font-weight: 800;
}

.v2-choice--quiz:has(input:checked) .v2-choice-letter {
    background: var(--v2-green);
    color: var(--v2-yellow);
}

.v2-choice--quiz:has(input:focus-visible) {
    outline: 3px solid var(--v2-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--v2-ink);
}

.v2-runner-saving {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.v2-spinner {
    width: 2.75rem;
    height: 2.75rem;
    border: 4px solid var(--v2-line);
    border-top-color: var(--v2-green);
    border-radius: 50%;
    animation: v2-spin 900ms linear infinite;
}

@keyframes v2-spin {
    to { transform: rotate(360deg); }
}

.v2-live {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--v2-ink-2);
}

.v2-live-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--v2-green);
    animation: v2-pulse 1.4s ease-in-out infinite;
}

@keyframes v2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}

.v2-pict-lg--wait {
    background: var(--v2-yellow) !important;
    color: var(--v2-ink) !important;
}

.v2-pubactions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.v2-notice--center {
    margin: 0;
    text-align: left;
}

.v2-scorecard {
    width: 100%;
    max-width: 24rem;
    border: 2px solid var(--v2-green);
    border-radius: var(--v2-radius);
    overflow: hidden;
}

.v2-score-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    background: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-score-label,
.v2-score-unit {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v2-on-green-2);
}

.v2-score-figure {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--v2-yellow);
}

.v2-score-facts {
    display: flex;
    margin: 0;
}

.v2-score-facts > div {
    flex: 1;
    padding: .8rem 1rem;
    text-align: center;
}

.v2-score-facts > div + div {
    border-left: 1px solid var(--v2-line);
}

.v2-score-facts dt {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v2-ink-3);
}

.v2-score-facts dd {
    margin: .1rem 0 0;
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .v2-runner-top {
        padding: 1rem 1rem .5rem;
    }

    .v2-progress {
        margin: 0 1rem;
    }

    .v2-runner-body {
        padding: 1.25rem 1rem;
    }
}


/* ============ Wide public pages, certificate, trainer profile ============ */
.v2-pubbar-inner.v2-wide,
.v2-pubmain.v2-wide {
    max-width: 72rem;
}

.v2-pubnav {
    margin-left: auto;
}

.v2-pubbar-note + .v2-pubnav {
    margin-left: 1rem;
}

.v2-pubmain.v2-wide .v2-pubcard {
    max-width: 52rem;
    margin: 0 auto;
}

.v2-cert {
    padding: 1.75rem 2rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-cert-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.v2-cert-head .v2-pict-lg {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-size: 1.8rem;
}

.v2-cert-when {
    margin: 0;
    color: var(--v2-ink-3);
    font-weight: 600;
}

.v2-cert-status {
    margin-left: auto;
}

.v2-cert-lede {
    margin: 1.75rem 0 .25rem !important;
    color: var(--v2-ink-3);
    font-weight: 600;
}

.v2-cert-name {
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
    overflow-wrap: anywhere;
}

.v2-cert-for {
    margin: .5rem 0 0 !important;
    font-size: 1.15rem;
    color: var(--v2-ink-2);
}

.v2-cert-issuer {
    margin: .75rem 0 0 !important;
    color: var(--v2-ink-3);
    font-weight: 600;
}

.v2-cert .v2-notice {
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.v2-cert-image {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
}

.v2-cert-body {
    padding: 1.5rem 2rem 2rem;
}

.v2-cert-body h2 {
    margin: 1.5rem 0 .75rem;
    font-size: 1.2rem;
}

.v2-cert-body h2:first-child {
    margin-top: 0;
}

.v2-facts--inline {
    margin-top: 1.25rem;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    overflow: hidden;
}

.v2-steps--flat {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
}

.v2-profile {
    align-items: center;
}

.v2-profile-img {
    width: 6rem;
    height: 6rem;
    border-radius: var(--v2-radius);
    object-fit: cover;
    border: 3px solid var(--v2-yellow);
    background: var(--v2-green-700);
}

.v2-profile-img--blank {
    display: grid;
    place-items: center;
    color: var(--v2-on-green-2);
    font-size: 3.5rem;
}

.v2-profile-main {
    flex: 1 1 18rem;
}

.v2-facts--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    overflow: hidden;
    box-shadow: var(--v2-shadow);
}

.v2-fact dd {
    font-size: 1.15rem;
}

.v2-list-row--compact {
    grid-template-columns: 5rem minmax(0, 1fr);
}

.v2-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-calendar.fc {
    font-family: var(--v2-font);
    --fc-border-color: var(--v2-line);
    --fc-today-bg-color: var(--v2-yellow-wash);
    --fc-button-bg-color: var(--v2-green);
    --fc-button-border-color: var(--v2-green);
    --fc-button-hover-bg-color: var(--v2-green-700);
    --fc-button-hover-border-color: var(--v2-green-700);
    --fc-button-active-bg-color: var(--v2-ink);
    --fc-button-active-border-color: var(--v2-ink);
}

.v2-calendar.fc .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 800;
}

.v2-calendar.fc .fc-button-primary {
    background-color: var(--v2-green);
    border-color: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-calendar.fc .fc-button-primary:hover {
    background-color: var(--v2-green-700);
    border-color: var(--v2-green-700);
}

.v2-calendar.fc .fc-button-primary:not(:disabled).fc-button-active,
.v2-calendar.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--v2-ink);
    border-color: var(--v2-ink);
}

.v2-calendar.fc .fc-button {
    border-radius: var(--v2-radius);
    font-weight: 700;
    text-transform: capitalize;
}

.v2-calendar.fc .fc-event {
    border-radius: var(--v2-radius-sm);
    border-width: 1.5px;
    font-weight: 700;
}

.v2-calendar.fc .v2-ev-upcoming {
    background: var(--v2-green-wash);
    border-color: var(--v2-green-600);
    color: var(--v2-green);
}

.v2-calendar.fc .v2-ev-today {
    background: var(--v2-yellow);
    border-color: var(--v2-yellow-deep);
    color: var(--v2-ink);
}

.v2-calendar.fc .v2-ev-past {
    background: var(--v2-surface);
    border: 1.5px dashed var(--v2-line-2);
    color: var(--v2-ink-2);
}

.v2-calendar.fc .fc-event-title,
.v2-calendar.fc .fc-event-main {
    color: inherit;
}

/* ============ Auth ============ */
body.v2.v2-auth {
    background: var(--v2-green);
    min-height: 100vh;
}

.v2-authwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 28rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.v2-authback {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--v2-on-green) !important;
    font-weight: 700;
    text-decoration: none;
}

.v2-authback:hover {
    text-decoration: underline;
}

.v2-authcard {
    width: 100%;
    padding: 1.75rem 1.5rem;
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
}

.v2-authhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.v2-authhead .v2-brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .5rem;
    border: 2px solid var(--v2-ink);
}

.v2-authhead h1 {
    font-size: 1.75rem;
}

.v2-authhead p {
    color: var(--v2-ink-3);
}

.v2 .v2-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: var(--v2-ink-3);
    font-size: .875rem;
    font-weight: 700;
}

.v2-or::before,
.v2-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--v2-line);
}

.v2-authcard form .v2-field + .v2-field {
    margin-top: 1.1rem;
}

.v2-authcard form .v2-btn {
    margin-top: 1.5rem;
}

.v2-authlink {
    margin-top: .6rem !important;
    text-align: right;
    font-size: .9rem;
    font-weight: 700;
}

.v2-authswitch {
    margin-top: 1.25rem !important;
    text-align: center;
    color: var(--v2-ink-2);
}

.v2-authswitch a {
    font-weight: 800;
}

.v2-authfoot {
    color: var(--v2-on-green-2);
    font-size: .85rem;
}

@media (max-width: 575.98px) {
    .v2-cert,
    .v2-cert-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .v2-cert-status {
        margin-left: 0;
    }

    .v2-facts--stats {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ============ Dashboards ============ */
.v2-facts--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    overflow: hidden;
    box-shadow: var(--v2-shadow);
}

.v2-fact dd + .v2-person-sub {
    display: block;
}

.v2-facts--four .v2-fact dd {
    font-size: 1.6rem;
    line-height: 1.15;
}

.v2-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.v2-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.v2-span-2 {
    grid-column: 1 / -1;
}

.v2-chart {
    min-height: 16rem;
}

.v2-chart--tall {
    min-height: 20rem;
}

.v2-file-row--tight {
    padding: .75rem 1.25rem;
}

.v2-file-row--two {
    grid-template-columns: minmax(0, 1fr) auto;
}

.v2-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.v2-calendar.fc .fc-event-today {
    background: var(--v2-yellow);
    border-color: var(--v2-yellow-deep);
    color: var(--v2-ink);
}

.v2-calendar.fc .fc-event-upcoming {
    background: var(--v2-green-wash);
    border-color: var(--v2-green-600);
    color: var(--v2-green);
}

.v2-calendar.fc .fc-event-past {
    background: var(--v2-surface);
    border: 1.5px dashed var(--v2-line-2);
    color: var(--v2-ink-2);
}

@media (max-width: 1199.98px) {
    .v2-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-facts--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .v2-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ============ Certificate builder ============ */
.v2-cb {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 18rem;
    gap: 1.25rem;
    align-items: start;
}

.v2-cb-chips {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.v2-cb-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .4rem .75rem;
    border: 1.5px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.v2-cb-chip:hover {
    border-color: var(--v2-ink);
}

.v2-cb-chip > span {
    flex: 1;
}

.v2-cb-chip-add {
    color: var(--v2-green-600);
}

.v2-cb-stage {
    min-width: 0;
}

.v2-cb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-cb-spacer {
    flex: 1;
}

.v2-input--sm {
    width: auto;
    min-height: 2.25rem;
    padding: .25rem .6rem;
}

.v2-cb-fit {
    position: relative;
    margin: 1rem;
    overflow: hidden;
}

.v2-cb-canvas {
    position: relative;
    transform-origin: top left;
    background: #fff;
    box-shadow: 0 4px 24px rgba(var(--v2-shadow-rgb), .18);
    overflow: hidden;
    touch-action: none;
}

.v2-cb-canvas.is-portrait {
    width: 500px;
    height: 707px;
}

.v2-cb-canvas.is-landscape {
    width: 707px;
    height: 500px;
}

.v2-cb-canvas > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.v2-cb-canvas > img[hidden],
.v2-cb-placeholder[hidden] {
    display: none;
}

.v2-cb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: var(--v2-ink-3);
    text-align: center;
    border: 2px dashed var(--v2-line-2);
    margin: 1rem;
}

.v2-cb-placeholder i {
    font-size: 2.5rem;
}

.v2-cb-field {
    position: absolute;
    min-height: 1.25em;
    cursor: grab;
    user-select: none;
    outline: 1px dashed rgba(var(--v2-shadow-rgb), .45);
    outline-offset: 2px;
    touch-action: none;
}

.v2-cb-field:active {
    cursor: grabbing;
}

.v2-cb-field.is-selected,
.v2-cb-field:focus-visible {
    outline: 2px solid var(--v2-green);
    box-shadow: 0 0 0 4px var(--v2-yellow);
}

.v2-cb-fc {
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.v2-cb-qr {
    display: grid;
    place-items: center;
    margin: 0 auto;
    border: 2px solid #000;
    background: repeating-linear-gradient(45deg, #fff, #fff 4px, #ddd 4px, #ddd 8px);
    font-size: 11px;
    font-weight: 700;
    color: #000;
}

.v2-cb-selected {
    margin: 0 0 1rem !important;
    padding: .35rem .6rem;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-green-wash);
    color: var(--v2-green);
    font-weight: 800;
}

.v2-cb-props .v2-field + .v2-field,
.v2-cb-props .v2-two,
.v2-cb-props .v2-btn {
    margin-top: .9rem;
}

.v2-color {
    padding: .2rem;
    cursor: pointer;
}

.v2-seg {
    display: flex;
}

.v2-seg-btn {
    flex: 1;
    min-height: 2.5rem;
    border: 2px solid var(--v2-line-2);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font-size: 1.1rem;
    cursor: pointer;
}

.v2-seg-btn + .v2-seg-btn {
    border-left-width: 0;
}

.v2-seg-btn:first-child {
    border-radius: var(--v2-radius) 0 0 var(--v2-radius);
}

.v2-seg-btn:last-child {
    border-radius: 0 var(--v2-radius) var(--v2-radius) 0;
}

.v2-seg-btn[aria-pressed="true"] {
    background: var(--v2-green);
    border-color: var(--v2-green);
    color: var(--v2-yellow);
}

@media (max-width: 1199.98px) {
    .v2-cb {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-cb-chips {
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    }
}


/* ============ Admin: users, trainers, templates ============ */
.v2-grow {
    flex: 1 1 24rem;
}

.v2-userrow {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.v2-grid-profile {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: start;
}

.v2-profile-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-profile-photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--v2-radius);
    object-fit: cover;
    border: 2px solid var(--v2-green);
}

.v2-profile-card h3 {
    font-size: 1.25rem;
}

.v2-detail {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v2-detail > div {
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-detail-wide {
    grid-column: 1 / -1;
}

.v2-detail dt {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v2-ink-3);
}

.v2-detail dd {
    margin: .15rem 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.v2-upload + .v2-upload {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--v2-line);
}

.v2-upload .v2-btn {
    margin-top: .75rem;
}

.v2-upload-img {
    display: block;
    max-width: 100%;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    object-fit: cover;
}

.v2-upload-img--logo {
    width: 7rem;
    height: 7rem;
}

.v2-upload-img--banner {
    width: 100%;
    max-height: 9rem;
}

@media (max-width: 991.98px) {
    .v2-grid-profile {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .v2-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-detail > div,
    .v2-profile-card {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* ============ Review fixes ============ */
.v2-counter {
    margin: 0 0 .25rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--v2-ink-3);
}

.v2-pubcard .v2-destination {
    margin: 0;
    border-radius: 0;
}

.v2-glance {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2-glance li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--v2-line);
}

.v2-glance li:last-child {
    border-bottom: 0;
}

.v2-glance li > i {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-green-wash);
    color: var(--v2-green);
    font-size: 1.2rem;
}

.v2-glance p {
    font-size: 1.05rem;
}

.v2-avatar--blank {
    display: inline-grid;
    place-items: center;
    background: var(--v2-green-wash);
    color: var(--v2-green);
    font-size: 1.6rem;
}

.v2-cert-kind {
    font-size: 1.1rem;
    color: var(--v2-ink-2);
}

.v2-verdict {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--v2-radius);
}

.v2-verdict > i {
    font-size: 2.5rem;
}

.v2-verdict strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
}

.v2-verdict--ok {
    background: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-verdict--ok > i {
    color: var(--v2-yellow);
}

.v2-verdict--ok span {
    color: var(--v2-on-green-2);
}

.v2-verdict--no {
    background: var(--v2-red);
    color: #fff;
}

.v2-detail > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.v2-signs {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%);
}

@media (max-width: 575.98px) {
    .v2-calendar.fc .fc-header-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .v2-calendar.fc .fc-toolbar-chunk:nth-child(2) {
        order: -1;
        flex: 1 1 100%;
        text-align: center;
    }

    .v2-calendar.fc .fc-button {
        padding: .3rem .5rem;
        font-size: .8rem;
    }

    .v2-icon-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .v2-table-actions {
        gap: .6rem;
    }

    .v2-glance li {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        padding: .9rem 1rem;
    }

    .v2-glance li .v2-btn {
        grid-column: 2;
        justify-self: start;
    }

    .v2-formbar {
        padding-bottom: 1.25rem;
    }
}


/* ============ Review fixes 2 ============ */
.v2-facts.v2-facts--inline {
    grid-template-columns: minmax(0, 1fr);
}

.v2-selectrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}

.v2-selectrow-text {
    display: none;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .v2-selectrow {
        min-height: 2.75rem;
        padding: .25rem .5rem .25rem 0;
    }

    .v2-selectrow input {
        width: 1.5rem;
        height: 1.5rem;
    }

    .v2-selectrow-text {
        display: inline;
    }
}


/* ============ Landing page ============ */
.v2-pubmain.v2-site {
    flex: none;
    max-width: none;
    padding: 0;
}

/* The landing page ends in the dark footer, so any spare window height
   below it continues the footer colour instead of showing a grey gap. */
body.v2-public:has(.v2-site) {
    background: var(--v2-green-900);
}

.v2-pubbar-inner.v2-site {
    max-width: 72rem;
}

.v2-pubnav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.v2-sitelink {
    color: var(--v2-on-green) !important;
    font-weight: 700;
    text-decoration: none;
}

.v2-sitelink:hover {
    text-decoration: underline;
}

.v2-wrap {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--v2-gutter);
}

.v2-hero {
    padding: 3.5rem 0;
    background: var(--v2-green);
    color: var(--v2-on-green);
}

.v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.v2-hero h1 {
    font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem);
    color: var(--v2-on-green);
}

.v2-hero-lede {
    margin-top: 1rem !important;
    max-width: 52ch;
    font-size: 1.15rem;
    color: var(--v2-on-green-2);
}

.v2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.v2-hero .v2-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: var(--v2-on-green) !important;
}

.v2-hero .v2-btn--outline:hover {
    border-color: var(--v2-on-green);
    background: rgba(255, 255, 255, .08);
}

.v2-verify {
    padding: 1.5rem;
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    color: var(--v2-ink);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
}

.v2-verify h2 {
    font-size: 1.35rem;
}

.v2-verify > p {
    margin: .35rem 0 1.1rem !important;
    color: var(--v2-ink-2);
}

.v2-verify .v2-btn {
    margin-top: 1.1rem;
}

.v2-band {
    padding: 3.5rem 0;
    background: var(--v2-surface);
}

.v2-band--ground {
    background: var(--v2-ground);
}

.v2-band-title {
    margin-bottom: 1.75rem;
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
}

.v2-route-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    position: relative;
}

.v2-route-steps::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 1.5rem;
    border-top: 3px dashed var(--v2-line-2);
}

.v2-route-steps li {
    position: relative;
}

.v2-route-stop {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--v2-yellow);
    color: var(--v2-ink);
    font-size: 1.35rem;
    font-weight: 800;
    border: 3px solid var(--v2-surface);
}

.v2-route-steps h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
}

.v2-route-steps h3 i {
    color: var(--v2-green-600);
}

.v2-route-steps p {
    margin-top: .4rem !important;
    color: var(--v2-ink-2);
}

.v2-directory-board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 2px solid var(--v2-ink);
}

.v2-directory-board li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem .5rem;
    border-bottom: 1px solid var(--v2-line-2);
}

.v2-directory-board .v2-pict {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--v2-radius);
    background: var(--v2-green);
    color: var(--v2-yellow);
    font-size: 1.4rem;
}

.v2-directory-board h3 {
    font-size: 1.05rem;
}

.v2-directory-board p {
    margin-top: .2rem !important;
    color: var(--v2-ink-2);
}

.v2-cta {
    padding: 3rem 0;
    background: var(--v2-yellow);
    color: var(--v2-ink);
}

.v2-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.v2-cta h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
}

.v2-cta .v2-btn--route {
    background: var(--v2-green);
    border-color: var(--v2-green);
    color: var(--v2-on-green) !important;
}

.v2-sitefoot {
    background: var(--v2-green-900);
    color: var(--v2-on-green-2);
    padding-top: 2.5rem;
}

.v2-sitefoot a {
    color: var(--v2-on-green) !important;
}

.v2-sitefoot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 2rem;
}

.v2-sitefoot-brand {
    margin-bottom: .5rem !important;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--v2-on-green);
}

.v2-sitefoot h2 {
    margin-bottom: .6rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-on-green-2);
}

.v2-sitefoot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.v2-sitefoot-social {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem !important;
    margin-top: 1rem !important;
}

.v2-sitefoot-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .875rem;
}

.v2-sitefoot-base a + a {
    margin-left: 1rem;
}

@media (max-width: 991.98px) {
    .v2-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-sitefoot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .v2-route-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-route-steps::before {
        left: 1.5rem;
        right: auto;
        top: 1.5rem;
        bottom: 1.5rem;
        border-top: 0;
        border-left: 3px dashed var(--v2-line-2);
    }

    .v2-route-steps li {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 1rem;
    }

    .v2-route-stop {
        margin-bottom: 0;
    }

    .v2-directory-board {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .v2-hero {
        padding: 2.25rem 0;
    }

    .v2-band {
        padding: 2.25rem 0;
    }

    .v2-sitefoot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-sitelink {
        display: none;
    }

    .v2-hero-actions .v2-btn {
        flex: 1 1 100%;
    }
}


/* ============ Theme: black and white ============
 * Switched with <html data-theme="mono"> (env UI_THEME=mono). Everything is
 * driven by the same tokens; red is kept for destructive and rejected states.
 */
[data-theme="mono"] {
    --v2-green-900: #000000;
    --v2-green: #111111;
    --v2-green-700: #2b2b2b;
    --v2-green-600: #333333;
    --v2-green-wash: #ececec;
    --v2-yellow: #ffffff;
    --v2-yellow-deep: #111111;
    --v2-yellow-wash: #f0f0f0;
    --v2-red: #c8102e;
    --v2-red-wash: #f7e3e6;
    --v2-ground: #f2f2f2;
    --v2-surface: #ffffff;
    --v2-ink: #111111;
    --v2-ink-2: #333333;
    --v2-ink-3: #595959;
    --v2-line: #d9d9d9;
    --v2-line-2: #b3b3b3;
    --v2-on-green: #ffffff;
    --v2-on-green-2: #cfcfcf;
    --v2-shadow-rgb: 0, 0, 0;
    --v2-row-hover: #f7f7f7;
    --v2-chart-1: #111111;
    --v2-chart-2: #8c8c8c;
    --v2-chart-3: #595959;
    --v2-chart-4: #c8c8c8;
}

/* Primary action: black on light surfaces, white on dark panels. */
[data-theme="mono"] .v2-btn--route {
    background: #111111;
    border-color: #111111;
    color: #ffffff !important;
}

[data-theme="mono"] .v2-btn--route:hover {
    background: #2b2b2b;
    border-color: #2b2b2b;
}

[data-theme="mono"] :is(.v2-destination, .v2-hero, .v2-rail, .v2-signbar, .v2-pubbar, .v2-bulkbar,
    .v2-cta, .v2-sitefoot, .v2-dialog-head-bar, .v2-verdict) .v2-btn--route {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111 !important;
}

[data-theme="mono"] :is(.v2-destination, .v2-hero, .v2-rail, .v2-signbar, .v2-pubbar, .v2-bulkbar,
    .v2-cta, .v2-sitefoot, .v2-dialog-head-bar, .v2-verdict) .v2-btn--route:hover {
    background: #e6e6e6;
    border-color: #e6e6e6;
}

/* White cards that sit inside dark bands keep the light-surface button. */
[data-theme="mono"] :is(.v2-verify, .v2-authcard, .v2-pubcard) .v2-btn--route {
    background: #111111;
    border-color: #111111;
    color: #ffffff !important;
}

[data-theme="mono"] :is(.v2-pubcard .v2-destination, .v2-verify) .v2-btn--route {
    background: #111111;
    border-color: #111111;
    color: #ffffff !important;
}

[data-theme="mono"] .v2-pubcard .v2-destination .v2-btn--route {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111 !important;
}

[data-theme="mono"] .v2 ::selection,
[data-theme="mono"] ::selection {
    background: #111111;
    color: #ffffff;
}

[data-theme="mono"] .v2-chip--today {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

[data-theme="mono"] .v2-date-sign--today {
    background: var(--v2-surface);
    color: #111111;
    border: 3px solid #111111;
}

[data-theme="mono"] .v2-cta {
    background: #111111;
    color: #ffffff;
}

[data-theme="mono"] .v2-route-stop {
    background: #111111;
    color: #ffffff;
}

[data-theme="mono"] .v2-score-figure,
[data-theme="mono"] .v2-score-main {
    color: #ffffff;
}

[data-theme="mono"] .v2-cb-field.is-selected,
[data-theme="mono"] .v2-cb-field:focus-visible {
    outline: 2px solid #111111;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px #111111;
}

[data-theme="mono"] .v2-star:has(input:checked),
[data-theme="mono"] .v2-star:has(~ .v2-star input:checked),
[data-theme="mono"] .v2-star:hover,
[data-theme="mono"] .v2-star:has(~ .v2-star:hover) {
    color: #111111;
}

[data-theme="mono"] .v2-calendar.fc .v2-ev-today,
[data-theme="mono"] .v2-calendar.fc .fc-event-today {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

/* ============ Confirm dialog and toasts (SweetAlert2, themed) ============ */
.swal2-container {
    font-family: var(--v2-font);
    z-index: 2000;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(var(--v2-shadow-rgb), .55);
}

.swal2-popup.v2-swal {
    width: min(26rem, calc(100vw - 2rem));
    padding: 1.5rem;
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow);
    color: var(--v2-ink);
    font-family: var(--v2-font);
    text-align: left;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
}

.swal2-popup.v2-swal > * {
    grid-column: 1 / -1;
}

.swal2-popup.v2-swal .v2-swal-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    border: 0;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-green-wash);
    color: var(--v2-green);
    font-size: 1.5rem;
    line-height: 1;
}

.swal2-popup.v2-swal--stop .v2-swal-icon {
    background: var(--v2-red-wash);
    color: var(--v2-red);
}

.swal2-popup.v2-swal .swal2-icon-content {
    font-size: inherit;
}

.swal2-popup.v2-swal .v2-swal-title {
    grid-column: 2;
    margin: 0;
    padding: 0;
    color: var(--v2-ink);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: left;
}

.swal2-popup.v2-swal .v2-swal-text {
    grid-column: 2;
    margin: .25rem 0 0;
    padding: 0;
    color: var(--v2-ink-2);
    font-size: .9375rem;
    line-height: 1.5;
    text-align: left;
}

.swal2-popup.v2-swal .v2-swal-actions {
    margin: 1.25rem 0 0;
    padding: 0;
    justify-content: flex-end;
    gap: .5rem;
}

.swal2-popup.v2-swal .swal2-styled:focus-visible,
.swal2-popup.v2-swal-toast .v2-swal-close:focus-visible {
    outline: 3px solid var(--v2-yellow-deep);
    outline-offset: 2px;
    box-shadow: none;
}

/* Toasts */
.swal2-container.swal2-top-end {
    padding: 1rem;
}

.swal2-popup.v2-swal-toast {
    width: min(24rem, calc(100vw - 2rem));
    padding: .75rem 2.5rem .75rem .75rem;
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-shadow);
    color: var(--v2-ink);
    font-family: var(--v2-font);
}

.swal2-popup.v2-swal-toast--error {
    border-color: var(--v2-red);
}

.swal2-popup.v2-swal-toast .v2-swal-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    margin: 0 .75rem 0 0;
    border: 0;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-green-wash);
    color: var(--v2-green);
    font-size: 1.125rem;
}

.swal2-popup.v2-swal-toast--error .v2-swal-icon {
    background: var(--v2-red-wash);
    color: var(--v2-red);
}

.swal2-popup.v2-swal-toast .v2-swal-title {
    margin: 0;
    padding: 0;
    color: var(--v2-ink);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.swal2-popup.v2-swal-toast .v2-swal-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-ink-3);
    font-size: 1rem;
}

/* Drop SweetAlert2's animated ring and tick pieces; the Phosphor icon is the mark. */
.swal2-popup .v2-swal-icon [class^="swal2-success-"],
.swal2-popup .v2-swal-icon.swal2-success::before,
.swal2-popup .v2-swal-icon.swal2-success::after {
    display: none;
}

.swal2-popup .v2-swal-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    color: inherit;
}

.swal2-popup.v2-swal-toast .v2-swal-close {
    background: transparent;
    box-shadow: none;
}

.swal2-popup.v2-swal-toast .v2-swal-close:hover {
    background: var(--v2-row-hover);
    color: var(--v2-ink);
}

.swal2-popup.v2-swal-toast .v2-swal-progress {
    height: 3px;
    background: var(--v2-green);
}

.swal2-popup.v2-swal-toast--error .v2-swal-progress {
    background: var(--v2-red);
}

[data-theme="mono"] .swal2-popup.v2-swal-toast {
    border-left-color: #111111;
}

[data-theme="mono"] .swal2-popup.v2-swal-toast--error {
    border-color: var(--v2-red);
}

[data-theme="mono"] .swal2-popup.v2-swal-toast--success .v2-swal-icon,
[data-theme="mono"] .swal2-popup.v2-swal-toast--info .v2-swal-icon {
    background: #111111;
    color: #ffffff;
}

[data-theme="mono"] .swal2-popup.v2-swal-toast .v2-swal-progress {
    background: #111111;
}

[data-theme="mono"] .swal2-popup.v2-swal-toast--error .v2-swal-progress {
    background: var(--v2-red);
}

@media (max-width: 575.98px) {
    .swal2-popup.v2-swal {
        padding: 1.25rem;
    }

    .swal2-popup.v2-swal .v2-swal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* ============ Class thumbnail: list thumb and overview banner ============ */
.v2-list-main {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.v2-list-thumb {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-ground);
    color: var(--v2-ink-3);
    font-size: 1.5rem;
}

.v2-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .v2-list-thumb {
        width: 3rem;
        height: 3rem;
    }
}

/* Destination image: normal size at the end of the panel, full size in a lightbox. */
.v2-destination--image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 1.25rem 2rem;
}

.v2-destination--image .v2-destination-text {
    grid-column: 1;
    grid-row: 1;
}

.v2-destination--image .v2-destination-actions {
    grid-column: 1;
    grid-row: 2;
}

.v2-destination-image {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 11rem;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--v2-on-green-2);
    border-radius: var(--v2-radius);
    background: var(--v2-green-700);
    cursor: zoom-in;
}

.v2-destination-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-destination-zoom {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--v2-radius-sm);
    background: rgba(0, 0, 0, .7);
    color: #ffffff;
}

.v2-destination-image:hover {
    border-color: #ffffff;
}

.v2-destination-image:focus-visible {
    outline: 3px solid var(--v2-yellow-deep);
    outline-offset: 2px;
}

.v2-lightbox {
    width: auto;
    max-width: min(60rem, calc(100vw - 2rem));
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.v2-lightbox img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 7rem);
    margin: 0 auto;
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
}

.v2-lightbox-close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: var(--v2-surface);
}

@media (max-width: 767.98px) {
    .v2-destination--image {
        grid-template-columns: minmax(0, 1fr);
    }

    .v2-destination-image {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        max-width: 16rem;
        aspect-ratio: 16 / 9;
    }
}

/* ============ Responsive ============ */
@media (max-width: 991.98px) {
    .v2-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .v2-signbar {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .6rem 1rem;
        background: var(--v2-green);
        color: var(--v2-on-green);
    }

    .v2-signbar .v2-brand {
        padding: 0;
    }

    .v2-signbar .v2-brand-mark {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.15rem;
    }

    .v2-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        min-height: 2.5rem;
        padding: .35rem .8rem;
        border: 1.5px solid rgba(255, 255, 255, .45);
        border-radius: var(--v2-radius);
        background: transparent;
        color: var(--v2-on-green);
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }

    .v2-rail {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(20rem, 86vw);
        transform: translateX(-100%);
        transition: transform 260ms var(--v2-ease);
    }

    .v2-rail[data-open="true"] {
        transform: none;
        box-shadow: 0 0 0 100vmax rgba(var(--v2-shadow-rgb), .5);
    }

    .v2-rail > .v2-brand {
        display: none;
    }

    .v2-destination {
        padding: 1.25rem;
        margin-top: 1rem;
    }

    .v2-destination-actions,
    .v2-destination-actions .v2-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .v2-panel-head,
    .v2-panel-body,
    .v2-fact,
    .v2-pager {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .v2-list-row {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        padding: 1rem;
        gap: .9rem;
    }

    .v2-list-end {
        grid-column: 2;
        justify-content: flex-start;
    }

    .v2-date-sign {
        min-height: 4rem;
    }

    .v2-date-day {
        font-size: 1.4rem;
    }
}


@media (max-width: 575.98px) {
    .v2-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v2-fact .v2-pict {
        display: none;
    }

    .v2-fact {
        padding: .75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2 *,
    .v2 *::before,
    .v2 *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ============ Certificate preview ============ */
.v2-pdf {
    display: block;
    width: 100%;
    height: min(75vh, 52rem);
    min-height: 24rem;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-ground);
}