:root {
    --wc-ink: #102a33;
    --wc-ink-strong: #071b23;
    --wc-ink-soft: #28444d;
    --wc-teal: #168b8d;
    --wc-teal-strong: #0d6f72;
    --wc-teal-soft: #dff3f1;
    --wc-gold: #c8a96b;
    --wc-gold-soft: #f3ead7;
    --wc-ivory: #faf8f3;
    --wc-surface: #ffffff;
    --wc-surface-muted: #f2f6f5;
    --wc-border: #dce7e4;
    --wc-border-strong: #bfd2ce;
    --wc-text: #132f38;
    --wc-muted: #61777d;
    --wc-success: #13795b;
    --wc-warning: #a66516;
    --wc-danger: #b42318;
    --wc-info: #1d5f8a;
    --wc-radius-xs: 8px;
    --wc-radius-sm: 12px;
    --wc-radius: 18px;
    --wc-radius-lg: 28px;
    --wc-shadow-sm: 0 4px 18px rgba(7, 27, 35, 0.06);
    --wc-shadow: 0 18px 55px rgba(7, 27, 35, 0.10);
    --wc-shadow-lg: 0 30px 80px rgba(7, 27, 35, 0.15);
    --wc-container: 1240px;
    --wc-font: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wc-display: "DM Serif Display", Georgia, serif;
    --wc-transition: 180ms ease;
}

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

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    color: var(--wc-text);
    background: var(--wc-ivory);
    font-family: var(--wc-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body, button, input, select, textarea { font-family: var(--wc-font); }

img, svg { max-width: 100%; }

a {
    color: var(--wc-teal-strong);
    text-underline-offset: 3px;
    transition: color var(--wc-transition), opacity var(--wc-transition), transform var(--wc-transition);
}

a:hover { color: var(--wc-ink); }

button, [type="button"], [type="submit"], [role="button"] { touch-action: manipulation; }

/*
 * Keyboard focus (U6-F1, WCAG 2.2: a focus indicator needs 3:1). The old ring was 35% teal: about 1.5:1 on white and 1:1 on the
 * slate top bar. Now a solid dark teal (#0b5f61, 7.4:1 on white) with a 2px white ring inside it (5.4:1 on the slate bar), so it
 * shows on light and dark backgrounds alike.
 */
:focus-visible {
    outline: 3px solid #0b5f61 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff;
}

::selection { color: #fff; background: var(--wc-teal); }

.wc-skip-link {
    position: fixed;
    z-index: 99999;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    color: #fff;
    background: var(--wc-ink-strong);
    border-radius: var(--wc-radius-xs);
    transform: translateY(-160%);
}

.wc-skip-link:focus { color: #fff; transform: translateY(0); }

.wc-container {
    width: min(calc(100% - 32px), var(--wc-container));
    margin-inline: auto;
}

.wc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--wc-teal-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.wc-eyebrow::before {
    width: 24px;
    height: 1px;
    content: "";
    background: var(--wc-gold);
}

.wc-display {
    margin: 0;
    color: var(--wc-ink-strong);
    font-family: var(--wc-display);
    font-size: clamp(2.6rem, 6vw, 5.7rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.wc-section-title {
    margin: 0;
    color: var(--wc-ink-strong);
    font-family: var(--wc-display);
    font-size: clamp(2.1rem, 4vw, 3.8rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.wc-lead {
    max-width: 700px;
    margin: 18px 0 0;
    color: var(--wc-muted);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.75;
}

.wc-btn,
.btn-primary,
.btn-success,
.btn-info {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    color: #fff !important;
    background: var(--wc-teal) !important;
    border: 1px solid var(--wc-teal) !important;
    border-radius: 999px !important;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background var(--wc-transition), border-color var(--wc-transition), box-shadow var(--wc-transition), transform var(--wc-transition);
}

.wc-btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
    color: #fff !important;
    background: var(--wc-teal-strong) !important;
    border-color: var(--wc-teal-strong) !important;
    box-shadow: 0 12px 28px rgba(13, 111, 114, 0.22);
    transform: translateY(-1px);
}

.wc-btn--dark { background: var(--wc-ink-strong) !important; border-color: var(--wc-ink-strong) !important; }
.wc-btn--dark:hover { background: var(--wc-ink) !important; border-color: var(--wc-ink) !important; }
.wc-btn--ghost,
.btn-outline-primary {
    color: var(--wc-ink) !important;
    background: transparent !important;
    border: 1px solid var(--wc-border-strong) !important;
    border-radius: 999px !important;
}
.wc-btn--ghost:hover,
.btn-outline-primary:hover { color: var(--wc-teal-strong) !important; background: var(--wc-teal-soft) !important; border-color: var(--wc-teal) !important; }

.btn-danger { border-radius: 999px !important; }

.wc-card,
.card {
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow-sm);
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: 48px;
    color: var(--wc-text);
    background-color: #fff;
    border: 1px solid var(--wc-border-strong);
    border-radius: var(--wc-radius-sm);
    box-shadow: none;
}

.form-control,
.form-select { padding: 11px 14px; }
.form-control::placeholder { color: #8a9b9f; }
.form-control:focus,
.form-select:focus {
    border-color: var(--wc-teal);
    box-shadow: 0 0 0 4px rgba(22, 139, 141, 0.12);
}

label, .form-label { color: var(--wc-ink); font-size: 0.88rem; font-weight: 750; }

.table { --bs-table-bg: transparent; color: var(--wc-text); }
.table > :not(caption) > * > * { padding: 15px 14px; border-bottom-color: var(--wc-border); vertical-align: middle; }
.table thead th {
    color: var(--wc-muted);
    background: var(--wc-surface-muted);
    border-bottom: 1px solid var(--wc-border);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge { padding: 7px 10px; border-radius: 999px; font-weight: 750; }

.alert {
    border: 1px solid transparent;
    border-radius: var(--wc-radius-sm);
    font-size: 0.92rem;
}
.alert-success { color: #0a6249; background: #e4f6ef; border-color: #bce8d9; }
.alert-danger { color: #912018; background: #fff0ee; border-color: #f2c9c4; }
.alert-warning { color: #82500d; background: #fff8e7; border-color: #eedcae; }
.alert-info { color: #174f72; background: #eaf5fb; border-color: #c8e1ef; }

/* First-party, dependency-free feedback shared by every application shell. */
.wc-notification-region {
    position: fixed;
    z-index: 100000;
    inset: auto 22px 22px auto;
    display: grid;
    width: min(420px, calc(100vw - 32px));
    gap: 12px;
    pointer-events: none;
}

.wc-notification {
    --wc-notification-accent: var(--wc-teal);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 15px;
    color: var(--wc-ink);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--wc-border);
    border-left: 4px solid var(--wc-notification-accent);
    border-radius: 15px;
    box-shadow: 0 18px 50px rgba(16, 42, 51, 0.2);
    pointer-events: auto;
    animation: wc-notification-enter 180ms ease-out both;
}

.wc-notification--success { --wc-notification-accent: #16845f; }
.wc-notification--error { --wc-notification-accent: #c33f35; }
.wc-notification--warning { --wc-notification-accent: #b27412; }
.wc-notification--info { --wc-notification-accent: #167e9d; }
.wc-notification.is-actionable { cursor: pointer; }
.wc-notification.is-leaving { animation: wc-notification-leave 170ms ease-in both; }

.wc-notification__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    background: var(--wc-notification-accent);
    border-radius: 11px;
    font-size: 0.95rem;
    font-weight: 900;
}

.wc-notification__copy { display: grid; min-width: 0; gap: 3px; }
.wc-notification__copy strong { color: var(--wc-ink-strong); font-size: 0.87rem; }
.wc-notification__copy > span { color: var(--wc-text); font-size: 0.82rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }

.wc-notification__close {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    margin: -5px -5px 0 0;
    padding: 0;
    color: var(--wc-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    font-size: 1.25rem;
    line-height: 1;
}

.wc-notification__close:hover,
.wc-notification__close:focus-visible { color: var(--wc-ink); background: var(--wc-surface-muted); }
.wc-notification__action { grid-column: 2; justify-self: start; color: var(--wc-teal-strong); font-size: 0.78rem; font-weight: 800; }
.wc-is-submitting { cursor: progress !important; opacity: 0.78; pointer-events: none; }

@keyframes wc-notification-enter {
    from { opacity: 0; transform: translate3d(18px, 0, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes wc-notification-leave {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(18px, 0, 0); }
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-lg);
    box-shadow: var(--wc-shadow-lg);
}

.dropdown-menu {
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-sm);
    box-shadow: var(--wc-shadow);
}

.dropdown-item { border-radius: 8px; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--wc-teal-strong); background: var(--wc-teal-soft); }

.pagination { gap: 6px; }
.page-link {
    min-width: 38px;
    min-height: 38px;
    display: grid;
    place-items: center;
    color: var(--wc-ink);
    background: #fff;
    border: 1px solid var(--wc-border) !important;
    border-radius: 10px !important;
}
.active > .page-link, .page-link.active { color: #fff; background: var(--wc-teal); }

@media (max-width: 767.98px) {
    .wc-container { width: min(calc(100% - 24px), var(--wc-container)); }
    .wc-btn { width: 100%; }
    .table-responsive { border-radius: var(--wc-radius-sm); }
    .wc-notification-region { inset: auto 16px 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}