/* ============================================================
 * cleanscribe.css — Self-sustaining Bootstrap 5 compatible CSS
 * ============================================================
 * Drop-in replacement for bootstrap.css. Provides Bootstrap's
 * full class API (grid, utilities, components) skinned in the
 * CleanScribe brand.
 *
 *   <link rel="stylesheet" href="cleanscribe.css">
 *
 * No Bootstrap dependency. Works with standard Bootstrap markup.
 * ============================================================ */

@import url("./fonts.css");

/* ============================================================
 * RESET (Reboot-equivalent)
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16px;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid var(--bs-border-color); opacity: 1; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; }
p { margin-top: 0; margin-bottom: 1rem; letter-spacing: 0.16px; }
ul, ol { padding-left: 2rem; margin-top: 0; margin-bottom: 1rem; }
b, strong { font-weight: 600; }
small, .small { font-size: 0.875em; }
sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
a { color: var(--bs-link-color); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--bs-link-hover-color); }
a:not([href]):not([class]) { color: inherit; text-decoration: none; }
/* Any anchor that carries a component class should defer color/decoration to that class. */
a[class] { color: inherit; text-decoration: none; }
pre, code, kbd, samp { font-family: var(--bs-font-monospace); font-size: 0.875em; }
code { color: var(--cs-body-strong); word-wrap: break-word; }
pre {
  display: block; margin-top: 0; margin-bottom: 1rem;
  font-size: 0.875em; overflow: auto; padding: 1rem;
  background: var(--cs-canvas-soft); border-radius: var(--cs-radius-md);
  border: 1px solid var(--cs-hairline);
}
img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; cursor: pointer; }
button:disabled { cursor: not-allowed; }
::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }
label { display: inline-block; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: calc(1.275rem + 0.3vw); line-height: inherit; }
[hidden] { display: none !important; }

/* ============================================================
 * 1. ROOT TOKENS
 * ============================================================ */
:root {
  /* CleanScribe brand tokens */
  --cs-primary:           #292524;
  --cs-primary-active:    #0c0a09;
  --cs-canvas:            #f5f5f5;
  --cs-canvas-soft:       #fafafa;
  --cs-canvas-deep:       #0c0a09;
  --cs-surface-card:      #ffffff;
  --cs-surface-strong:    #f0efed;
  --cs-surface-dark:      #0c0a09;
  --cs-surface-dark-elev: #1c1917;
  --cs-hairline:          #e7e5e4;
  --cs-hairline-soft:     #f0efed;
  --cs-hairline-strong:   #d6d3d1;
  --cs-ink:               #0c0a09;
  --cs-body:              #4e4e4e;
  --cs-body-strong:       #292524;
  --cs-muted:             #777169;
  --cs-muted-soft:        #a8a29e;
  --cs-on-primary:        #ffffff;
  --cs-on-dark:           #ffffff;
  --cs-on-dark-soft:      #a8a29e;
  --cs-gradient-mint:     #a7e5d3;
  --cs-gradient-peach:    #f4c5a8;
  --cs-gradient-lavender: #c8b8e0;
  --cs-gradient-sky:      #a8c8e8;
  --cs-gradient-rose:     #e8b8c4;
  --cs-success:           #16a34a;
  --cs-error:             #dc2626;
  --cs-font-display: "EB Garamond", "Times New Roman", serif;
  --cs-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-radius-xs: 4px;  --cs-radius-sm: 6px;  --cs-radius-md: 8px;
  --cs-radius-lg: 12px; --cs-radius-xl: 16px; --cs-radius-xxl: 24px;
  --cs-radius-pill: 9999px;
  --cs-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.04);

  /* Bootstrap-compatible variables */
  --bs-blue:   #a8c8e8;   --bs-indigo: #c8b8e0;
  --bs-purple: #c8b8e0;   --bs-pink:   #e8b8c4;
  --bs-red:    #dc2626;   --bs-orange: #f4c5a8;
  --bs-yellow: #f4c5a8;   --bs-green:  #16a34a;
  --bs-teal:   #a7e5d3;   --bs-cyan:   #a8c8e8;
  --bs-white:  #ffffff;   --bs-black:  #0c0a09;
  --bs-gray:   #777169;   --bs-gray-dark: #292524;

  --bs-primary:    #292524;  --bs-primary-rgb:    41, 37, 36;
  --bs-secondary:  #4e4e4e;  --bs-secondary-rgb:  78, 78, 78;
  --bs-success:    #16a34a;  --bs-success-rgb:    22, 163, 74;
  --bs-danger:     #dc2626;  --bs-danger-rgb:     220, 38, 38;
  --bs-warning:    #f4c5a8;  --bs-warning-rgb:    244, 197, 168;
  --bs-info:       #a8c8e8;  --bs-info-rgb:       168, 200, 232;
  --bs-light:      #f5f5f5;  --bs-light-rgb:      245, 245, 245;
  --bs-dark:       #0c0a09;  --bs-dark-rgb:       12, 10, 9;
  --bs-white-rgb:  255,255,255;
  --bs-black-rgb:  12, 10, 9;
  --bs-body-color-rgb: 12, 10, 9;
  --bs-body-bg-rgb:    245, 245, 245;

  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-serif:      "EB Garamond", "Times New Roman", serif;
  --bs-font-monospace:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #0c0a09;
  --bs-body-bg: #f5f5f5;
  --bs-emphasis-color: #0c0a09;
  --bs-secondary-color: #4e4e4e;
  --bs-secondary-bg: #f0efed;
  --bs-tertiary-color: #777169;
  --bs-tertiary-bg: #fafafa;
  --bs-heading-color: #0c0a09;

  --bs-link-color: #0c0a09;
  --bs-link-color-rgb: 12, 10, 9;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #292524;
  --bs-link-hover-color-rgb: 41, 37, 36;
  --bs-code-color: #292524;
  --bs-highlight-bg: rgba(244, 197, 168, 0.4);

  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #e7e5e4;
  --bs-border-color-translucent: rgba(12, 10, 9, 0.1);

  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 9999px;

  --bs-box-shadow:     0 4px 16px rgba(12,10,9,0.04);
  --bs-box-shadow-sm:  0 1px 2px  rgba(12,10,9,0.04);
  --bs-box-shadow-lg:  0 8px 32px rgba(12,10,9,0.06);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(12,10,9,0.04);

  --bs-focus-ring-width: 2px;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(12, 10, 9, 0.25);
}

/* ============================================================
 * 2. CONTAINER & GRID
 * ============================================================ */
.container, .container-fluid,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .container, .container-sm  { max-width: 540px; } }
@media (min-width: 768px)  { .container, .container-sm, .container-md  { max-width: 720px; } }
@media (min-width: 992px)  { .container, .container-sm, .container-md, .container-lg  { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl  { max-width: 1140px; } }
@media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1320px; } }

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col { flex: 1 0 0%; }
.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.666667%; }

.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.333333%; }
.col-2  { flex: 0 0 auto; width: 16.666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.333333%; }
.col-5  { flex: 0 0 auto; width: 41.666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.333333%; }
.col-8  { flex: 0 0 auto; width: 66.666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; } .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; } .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; } .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; } .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; }
  .row-cols-md-1 > * { width: 100%; } .row-cols-md-2 > * { width: 50%; }
  .row-cols-md-3 > * { width: 33.333333%; } .row-cols-md-4 > * { width: 25%; }
  .row-cols-md-6 > * { width: 16.666667%; }
}
@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; } .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; } .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Gutter helpers */
.g-0,.gx-0 { --bs-gutter-x: 0; }   .g-0,.gy-0 { --bs-gutter-y: 0; }
.g-1,.gx-1 { --bs-gutter-x: 0.25rem; } .g-1,.gy-1 { --bs-gutter-y: 0.25rem; }
.g-2,.gx-2 { --bs-gutter-x: 0.5rem; }  .g-2,.gy-2 { --bs-gutter-y: 0.5rem; }
.g-3,.gx-3 { --bs-gutter-x: 1rem; }    .g-3,.gy-3 { --bs-gutter-y: 1rem; }
.g-4,.gx-4 { --bs-gutter-x: 1.5rem; }  .g-4,.gy-4 { --bs-gutter-y: 1.5rem; }
.g-5,.gx-5 { --bs-gutter-x: 3rem; }    .g-5,.gy-5 { --bs-gutter-y: 3rem; }

/* ============================================================
 * 3. TYPOGRAPHY
 * ============================================================ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--cs-font-display);
  font-weight: 300;
  color: var(--cs-ink);
}
h1, .h1 { font-size: 4rem;    line-height: 1.05; letter-spacing: -1.92px; }
h2, .h2 { font-size: 3rem;    line-height: 1.08; letter-spacing: -0.96px; }
h3, .h3 { font-size: 2.25rem; line-height: 1.17; letter-spacing: -0.36px; }
h4, .h4 { font-size: 2rem;    line-height: 1.13; letter-spacing: -0.32px; }
h5, .h5, h6, .h6 { font-family: var(--cs-font-body); font-weight: 500; color: var(--cs-ink); }
h5, .h5 { font-size: 1.25rem; line-height: 1.35; }
h6, .h6 { font-size: 1.125rem; line-height: 1.44; letter-spacing: 0.18px; }

.display-1 { font-size: 5rem;    letter-spacing: -2.4px;  line-height: 1.04; }
.display-2 { font-size: 4.5rem;  letter-spacing: -2.16px; line-height: 1.05; }
.display-3 { font-size: 4rem;    letter-spacing: -1.92px; line-height: 1.05; }
.display-4 { font-size: 3.5rem;  letter-spacing: -1.4px;  line-height: 1.06; }
.display-5 { font-size: 3rem;    letter-spacing: -0.96px; line-height: 1.08; }
.display-6 { font-size: 2.5rem;  letter-spacing: -0.5px;  line-height: 1.12; }

.lead {
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: 0.16px;
  color: var(--cs-body);
}

.text-muted, .text-secondary { color: var(--cs-muted) !important; }

.eyebrow, .text-uppercase.small {
  font-family: var(--cs-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--cs-muted);
}

/* Blockquote */
.blockquote { margin-bottom: 1rem; font-size: 1.25rem; }
.blockquote-footer { margin-top: -1rem; margin-bottom: 1rem; font-size: 0.875em; color: var(--cs-muted); }
.blockquote-footer::before { content: "\2014\00A0"; }

/* ============================================================
 * 4. BUTTONS
 * ============================================================ */
.btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-font-family: var(--cs-font-body);
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1;
  --bs-btn-color: var(--cs-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--cs-radius-pill);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: none;
  --bs-btn-disabled-opacity: 0.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  letter-spacing: 0;
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  background-color: var(--bs-btn-bg);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  height: 40px;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,10,9,0.15); }
.btn:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  pointer-events: none; opacity: var(--bs-btn-disabled-opacity);
  color: var(--bs-btn-disabled-color); background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color);
}
.btn-lg { height: 48px; padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-sm { height: 32px; padding: 0.375rem 0.875rem; font-size: 0.8125rem; }

.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #292524; --bs-btn-border-color: #292524;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0c0a09; --bs-btn-hover-border-color: #0c0a09;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #0c0a09; --bs-btn-active-border-color: #0c0a09;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #a8a29e; --bs-btn-disabled-border-color: #a8a29e;
}
.btn-secondary {
  --bs-btn-color: #0c0a09; --bs-btn-bg: #f0efed; --bs-btn-border-color: #f0efed;
  --bs-btn-hover-color: #0c0a09; --bs-btn-hover-bg: #e7e5e4; --bs-btn-hover-border-color: #e7e5e4;
  --bs-btn-active-color: #0c0a09; --bs-btn-active-bg: #d6d3d1; --bs-btn-active-border-color: #d6d3d1;
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a;
  --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #166534; --bs-btn-active-border-color: #166534; --bs-btn-active-color: #fff;
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #991b1b; --bs-btn-active-border-color: #991b1b; --bs-btn-active-color: #fff;
}
.btn-warning {
  --bs-btn-color: #0c0a09; --bs-btn-bg: #f4c5a8; --bs-btn-border-color: #f4c5a8;
  --bs-btn-hover-bg: #e8b08c; --bs-btn-hover-border-color: #e8b08c; --bs-btn-hover-color: #0c0a09;
}
.btn-info {
  --bs-btn-color: #0c0a09; --bs-btn-bg: #a8c8e8; --bs-btn-border-color: #a8c8e8;
  --bs-btn-hover-bg: #8eb6dc; --bs-btn-hover-border-color: #8eb6dc; --bs-btn-hover-color: #0c0a09;
}
.btn-light {
  --bs-btn-color: #0c0a09; --bs-btn-bg: #fff; --bs-btn-border-color: #e7e5e4;
  --bs-btn-hover-bg: #fafafa; --bs-btn-hover-border-color: #d6d3d1; --bs-btn-hover-color: #0c0a09;
}
.btn-dark {
  --bs-btn-color: #fff; --bs-btn-bg: #0c0a09; --bs-btn-border-color: #0c0a09;
  --bs-btn-hover-bg: #1c1917; --bs-btn-hover-border-color: #1c1917; --bs-btn-hover-color: #fff;
}
.btn-outline-primary, .btn-outline-dark {
  --bs-btn-color: #0c0a09; --bs-btn-bg: transparent; --bs-btn-border-color: #d6d3d1;
  --bs-btn-hover-bg: #f0efed; --bs-btn-hover-border-color: #d6d3d1; --bs-btn-hover-color: #0c0a09;
  --bs-btn-active-bg: #f0efed; --bs-btn-active-border-color: #0c0a09; --bs-btn-active-color: #0c0a09;
}
.btn-outline-secondary {
  --bs-btn-color: #4e4e4e; --bs-btn-bg: transparent; --bs-btn-border-color: #d6d3d1;
  --bs-btn-hover-bg: #f0efed; --bs-btn-hover-border-color: #d6d3d1; --bs-btn-hover-color: #0c0a09;
}
.btn-outline-success {
  --bs-btn-color: #16a34a; --bs-btn-bg: transparent; --bs-btn-border-color: #16a34a;
  --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a; --bs-btn-hover-color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: #dc2626; --bs-btn-bg: transparent; --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-hover-color: #fff;
}
.btn-outline-light {
  --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255,255,255,0.4);
  --bs-btn-hover-bg: rgba(255,255,255,0.1); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,0.6);
}
.btn-link {
  --bs-btn-color: #0c0a09; --bs-btn-hover-color: #292524; --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  height: auto; padding: 0;
}
/* Square radius helpers preserve Bootstrap's API */
.btn.rounded-0 { border-radius: 0; }
.btn.rounded-1 { border-radius: 0.25rem; }
.btn.rounded-2 { border-radius: var(--cs-radius-md); }
.btn.rounded-3 { border-radius: var(--cs-radius-lg); }

.btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; }
.btn-group > .btn, .btn-group-vertical > .btn { position: relative; flex: 1 1 auto; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Bootstrap's btn-check pattern: visually hide the radio/checkbox input but keep
 * it focusable + form-submittable. Without this rule the native radio circles
 * leak into the layout (seen on /Subscription's Annual/Monthly toggle). */
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  opacity: 0;
}
.btn-check:checked + .btn {
  background-color: var(--cs-ink);
  color: #fff;
  border-color: var(--cs-ink);
}
.btn-check:focus-visible + .btn {
  outline: 2px solid var(--cs-ink);
  outline-offset: 2px;
}

/* ============================================================
 * 5. FORMS
 * ============================================================ */
.form-control, .form-select {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  font-family: var(--cs-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16px;
  color: var(--cs-ink);
  background-color: var(--cs-surface-card);
  border: 1px solid var(--cs-hairline-strong);
  border-radius: var(--cs-radius-md);
  height: 44px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  appearance: none;
}
.form-select { line-height: 1.4; }
.form-control:focus, .form-select:focus {
  border-color: var(--cs-ink); box-shadow: 0 0 0 1px var(--cs-ink); outline: 0;
}
.form-control::placeholder { color: var(--cs-muted-soft); }
.form-control:disabled, .form-select:disabled { background-color: var(--cs-canvas-soft); color: var(--cs-muted-soft); }
.form-control-lg { height: 52px; padding: 1rem 1.25rem; font-size: 1.125rem; }
.form-control-sm { height: 36px; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
textarea.form-control { height: auto; min-height: 100px; }

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230c0a09' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

.form-label {
  margin-bottom: 0.5rem;
  font-family: var(--cs-font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.14px;
  color: var(--cs-ink);
}
.form-text { margin-top: 0.375rem; color: var(--cs-muted); font-size: 0.8125rem; letter-spacing: 0.14px; }
.form-floating { position: relative; }

.form-check { display: block; min-height: 1.5rem; padding-left: 1.75rem; margin-bottom: 0.25rem; }
.form-check .form-check-input { float: left; margin-left: -1.75rem; }
.form-check-input {
  width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--cs-hairline-strong);
  appearance: none;
  print-color-adjust: exact;
  cursor: pointer;
}
.form-check-input[type="checkbox"] { border-radius: var(--cs-radius-xs); }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background-color: var(--cs-primary); border-color: var(--cs-primary);
}
.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:focus { border-color: var(--cs-ink); box-shadow: 0 0 0 2px rgba(12,10,9,0.1); outline: 0; }
.form-check-label { color: var(--cs-ink); font-family: var(--cs-font-body); cursor: pointer; }

.form-switch { padding-left: 2.5rem; }
.form-switch .form-check-input {
  width: 2rem; height: 1.125rem; margin-left: -2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a8a29e'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 9999px;
  transition: background-position 120ms ease;
}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-range { width: 100%; height: 1.5rem; padding: 0; background: transparent; appearance: none; }
.form-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.375rem; background: var(--cs-primary); border: 0; border-radius: 50%; appearance: none; cursor: pointer; }
.form-range::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; background: var(--cs-surface-strong); border-radius: 9999px; }
.form-range::-moz-range-thumb { width: 1rem; height: 1rem; background: var(--cs-primary); border: 0; border-radius: 50%; cursor: pointer; }
.form-range::-moz-range-track { width: 100%; height: 0.25rem; background: var(--cs-surface-strong); border-radius: 9999px; }

.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text, .input-group > .btn { border-radius: 0; height: 44px; }
.input-group > :first-child { border-top-left-radius: var(--cs-radius-md); border-bottom-left-radius: var(--cs-radius-md); }
.input-group > :last-child  { border-top-right-radius: var(--cs-radius-md); border-bottom-right-radius: var(--cs-radius-md); }
.input-group > :not(:first-child) { margin-left: -1px; }
.input-group-text {
  display: flex; align-items: center; padding: 0.75rem 1rem;
  font-family: var(--cs-font-body); font-size: 0.9375rem; color: var(--cs-body);
  background-color: var(--cs-surface-strong);
  border: 1px solid var(--cs-hairline-strong);
  border-radius: 0;
  height: 44px;
}

.is-valid { border-color: var(--cs-success) !important; }
.is-invalid { border-color: var(--cs-error) !important; }
.valid-feedback { color: var(--cs-success); font-size: 0.8125rem; margin-top: 0.25rem; }
.invalid-feedback { color: var(--cs-error); font-size: 0.8125rem; margin-top: 0.25rem; }

/* ============================================================
 * 6. CARD
 * ============================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  background-color: var(--cs-surface-card);
  background-clip: border-box;
  border: 1px solid var(--cs-hairline);
  border-radius: var(--cs-radius-xl);
  transition: box-shadow 200ms ease;
}
.card:hover { box-shadow: var(--cs-shadow-soft); }
.card > hr { margin-right: 0; margin-left: 0; }
.card-body { flex: 1 1 auto; padding: 1.5rem; color: var(--cs-body); }
.card-title {
  font-family: var(--cs-font-display); font-weight: 300;
  font-size: 1.5rem; line-height: 1.2; letter-spacing: 0;
  color: var(--cs-ink); margin-bottom: 0.5rem;
}
.card-subtitle {
  margin-top: -0.25rem; margin-bottom: 0;
  font-family: var(--cs-font-body); font-weight: 500; font-size: 0.875rem;
  letter-spacing: 0.14px; color: var(--cs-muted);
}
.card-text:last-child { margin-bottom: 0; }
.card-link + .card-link { margin-left: 1rem; }
.card-header {
  padding: 1.25rem 1.5rem; margin-bottom: 0;
  background-color: transparent; border-bottom: 1px solid var(--cs-hairline);
  font-family: var(--cs-font-body); font-weight: 500;
}
.card-footer {
  padding: 1rem 1.5rem;
  background-color: transparent; border-top: 1px solid var(--cs-hairline);
}
.card-img, .card-img-top, .card-img-bottom { width: 100%; }
.card-img-top { border-top-left-radius: calc(var(--cs-radius-xl) - 1px); border-top-right-radius: calc(var(--cs-radius-xl) - 1px); }
.card-img-bottom { border-bottom-left-radius: calc(var(--cs-radius-xl) - 1px); border-bottom-right-radius: calc(var(--cs-radius-xl) - 1px); }
.card-group { display: flex; flex-flow: row wrap; }

/* ============================================================
 * 7. NAVBAR
 * ============================================================ */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  min-height: 64px;
  background-color: var(--cs-canvas);
  border-bottom: 1px solid var(--cs-hairline);
}
.navbar > .container, .navbar > .container-fluid { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; }
.navbar-brand {
  padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem;
  font-family: var(--cs-font-display); font-weight: 300; font-size: 1.5rem;
  letter-spacing: -0.36px; color: var(--cs-ink);
  text-decoration: none; white-space: nowrap;
}
.navbar-brand:hover { color: var(--cs-ink); }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.navbar-nav .nav-link {
  font-family: var(--cs-font-body); font-weight: 500; font-size: 0.9375rem;
  color: var(--cs-muted); padding: 0.5rem 1rem; text-decoration: none;
  transition: color 120ms ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-item.show > .nav-link { color: var(--cs-ink); }
.navbar-toggler {
  padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1;
  background-color: transparent; border: 1px solid var(--cs-hairline-strong);
  border-radius: var(--cs-radius-pill); color: var(--cs-ink);
  cursor: pointer;
}
.navbar-toggler:focus { outline: 0; box-shadow: 0 0 0 2px rgba(12,10,9,0.1); }
.navbar-toggler-icon {
  display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230c0a09' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-position: center; background-repeat: no-repeat; background-size: 100%;
}
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
@media (min-width: 992px) {
  .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; }
  .navbar-expand-lg .navbar-nav { flex-direction: row; }
  .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1rem; padding-left: 1rem; }
  .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
  .navbar-expand-lg .navbar-toggler { display: none; }
}

/* ============================================================
 * 8. NAV / TABS / PILLS
 * ============================================================ */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link {
  display: block; padding: 0.5rem 1rem;
  font-family: var(--cs-font-body); font-weight: 500;
  color: var(--cs-muted); text-decoration: none;
  transition: color 120ms ease;
}
.nav-link:hover { color: var(--cs-ink); }
.nav-link.active { color: var(--cs-ink); }

.nav-tabs { border-bottom: 1px solid var(--cs-hairline); }
.nav-tabs .nav-link {
  margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 0.75rem 1rem;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  background: transparent; color: var(--cs-ink); border-bottom-color: var(--cs-ink);
}

.nav-pills {
  background: var(--cs-surface-strong); border-radius: var(--cs-radius-pill);
  padding: 0.25rem; display: inline-flex; gap: 0.25rem;
}
.nav-pills .nav-link {
  border-radius: var(--cs-radius-pill); color: var(--cs-muted); padding: 0.5rem 1.125rem;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--cs-surface-card); color: var(--cs-ink);
  box-shadow: 0 1px 2px rgba(12,10,9,0.04);
}
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* ============================================================
 * 9. BADGES
 * ============================================================ */
.badge {
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  font-family: var(--cs-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: var(--cs-surface-strong);
  color: var(--cs-ink);
  border-radius: var(--cs-radius-pill);
}
.badge.bg-primary   { background-color: var(--cs-primary) !important; color: #fff; }
.badge.bg-secondary { background-color: var(--cs-surface-strong) !important; color: var(--cs-ink); }
.badge.bg-success   { background-color: var(--cs-success) !important; color: #fff; }
.badge.bg-danger    { background-color: var(--cs-error) !important; color: #fff; }
.badge.bg-warning   { background-color: var(--cs-gradient-peach) !important; color: var(--cs-ink); }
.badge.bg-info      { background-color: var(--cs-gradient-sky) !important; color: var(--cs-ink); }
.badge.bg-light     { background-color: #fff !important; color: var(--cs-ink); border: 1px solid var(--cs-hairline-strong); }
.badge.bg-dark      { background-color: var(--cs-surface-dark) !important; color: var(--cs-on-dark); }

/* ============================================================
 * 10. ALERTS
 * ============================================================ */
.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--cs-hairline);
  border-radius: var(--cs-radius-lg);
  font-family: var(--cs-font-body);
  font-size: 0.9375rem;
  letter-spacing: 0.15px;
}
.alert-primary   { background-color: var(--cs-surface-strong); color: var(--cs-ink); border-color: var(--cs-hairline-strong); }
.alert-secondary { background-color: var(--cs-canvas-soft); color: var(--cs-body); border-color: var(--cs-hairline); }
.alert-success   { background-color: rgba(22,163,74,0.08); color: #15803d; border-color: rgba(22,163,74,0.2); }
.alert-danger    { background-color: rgba(220,38,38,0.08); color: #b91c1c; border-color: rgba(220,38,38,0.2); }
.alert-warning   { background-color: rgba(244,197,168,0.25); color: #92400e; border-color: rgba(244,197,168,0.5); }
.alert-info      { background-color: rgba(168,200,232,0.25); color: #1e40af; border-color: rgba(168,200,232,0.5); }
.alert-light     { background-color: #fafafa; color: var(--cs-ink); border-color: var(--cs-hairline); }
.alert-dark      { background-color: var(--cs-surface-dark); color: var(--cs-on-dark); border-color: var(--cs-surface-dark); }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { position: absolute; top: 0.75rem; right: 0.75rem; }

/* ============================================================
 * 11. LIST GROUP
 * ============================================================ */
.list-group {
  display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0;
  border-radius: var(--cs-radius-xl);
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--cs-font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.14px;
  color: var(--cs-ink);
  background-color: var(--cs-surface-card);
  border: 1px solid var(--cs-hairline);
  text-decoration: none;
}
.list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.list-group-item:last-child  { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item.active { background-color: var(--cs-surface-strong); color: var(--cs-ink); border-color: var(--cs-hairline); z-index: 2; }
.list-group-item-action:hover { background-color: var(--cs-canvas-soft); cursor: pointer; }

/* ============================================================
 * 12. TABLE
 * ============================================================ */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--cs-canvas-soft);
  --bs-table-hover-bg: var(--cs-canvas-soft);
  --bs-table-border-color: var(--cs-hairline);
  width: 100%;
  margin-bottom: 1rem;
  font-family: var(--cs-font-body);
  font-size: 0.9375rem;
  color: var(--cs-body);
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * { padding: 1rem; background-color: var(--bs-table-bg); border-bottom: 1px solid var(--bs-table-border-color); }
.table > thead {
  font-family: var(--cs-font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.96px; text-transform: uppercase; color: var(--cs-muted);
}
.table > thead th { border-bottom: 1px solid var(--cs-hairline-strong); padding: 0.875rem 1rem; }
.table > tbody td { color: var(--cs-ink); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bs-table-striped-bg); }
.table-hover > tbody > tr:hover > * { background-color: var(--bs-table-hover-bg); }
.table-bordered > :not(caption) > * > * { border-width: 1px; }
.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }

/* ============================================================
 * 13. PAGINATION
 * ============================================================ */
.pagination { display: flex; padding-left: 0; list-style: none; gap: 0.25rem; }
.page-link {
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.875rem; min-width: 36px;
  font-family: var(--cs-font-body); font-weight: 500; font-size: 0.9375rem;
  color: var(--cs-ink); background-color: transparent;
  border: 1px solid var(--cs-hairline);
  border-radius: var(--cs-radius-md);
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.page-link:hover { background-color: var(--cs-surface-strong); border-color: var(--cs-hairline-strong); color: var(--cs-ink); }
.page-item.active .page-link { background-color: var(--cs-primary); border-color: var(--cs-primary); color: var(--cs-on-primary); }
.page-item.disabled .page-link { color: var(--cs-muted-soft); pointer-events: none; }

/* ============================================================
 * 14. PROGRESS
 * ============================================================ */
.progress {
  display: flex; height: 8px; overflow: hidden;
  background-color: var(--cs-surface-strong);
  border-radius: var(--cs-radius-pill);
  font-size: 0.75rem;
}
.progress-bar {
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; color: #fff; text-align: center; white-space: nowrap;
  background-color: var(--cs-primary);
  transition: width 0.6s ease;
}
.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }

/* ============================================================
 * 15. SPINNER
 * ============================================================ */
@keyframes spinner-border { to { transform: rotate(360deg); } }
.spinner-border {
  display: inline-block; width: 1.5rem; height: 1.5rem;
  vertical-align: -0.125em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 1px; }
@keyframes spinner-grow { 0% { transform: scale(0); } 50% { opacity: 1; transform: none; } }
.spinner-grow {
  display: inline-block; width: 1.5rem; height: 1.5rem;
  vertical-align: -0.125em; background-color: currentColor;
  border-radius: 50%; opacity: 0; animation: spinner-grow 0.75s linear infinite;
}

/* ============================================================
 * 16. MODAL
 * ============================================================ */
.modal {
  position: fixed; top: 0; left: 0; z-index: 1055;
  display: none; width: 100%; height: 100%;
  overflow-x: hidden; overflow-y: auto; outline: 0;
}
.modal.show { display: block; }
.modal-dialog {
  position: relative; width: auto; margin: 0.5rem;
  pointer-events: none;
}
@media (min-width: 576px) {
  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
  .modal-lg, .modal-xl { max-width: 800px; }
}
@media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }
.modal-content {
  position: relative; display: flex; flex-direction: column; width: 100%;
  pointer-events: auto;
  background-color: var(--cs-surface-card);
  border: 1px solid var(--cs-hairline);
  border-radius: var(--cs-radius-xl);
  box-shadow: var(--cs-shadow-soft);
  outline: 0;
}
.modal-header {
  display: flex; flex-shrink: 0; align-items: center; justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--cs-hairline);
  border-top-left-radius: calc(var(--cs-radius-xl) - 1px);
  border-top-right-radius: calc(var(--cs-radius-xl) - 1px);
}
.modal-title {
  margin-bottom: 0; line-height: 1.2;
  font-family: var(--cs-font-display); font-weight: 300;
  font-size: 1.5rem; letter-spacing: 0; color: var(--cs-ink);
}
.modal-body {
  position: relative; flex: 1 1 auto; padding: 1.5rem;
  font-family: var(--cs-font-body); color: var(--cs-body); letter-spacing: 0.16px;
}
.modal-footer {
  display: flex; flex-wrap: wrap; flex-shrink: 0;
  align-items: center; justify-content: flex-end;
  padding: 1.25rem 1.5rem; gap: 0.5rem;
  border-top: 1px solid var(--cs-hairline);
}
.modal-backdrop {
  position: fixed; top: 0; left: 0; z-index: 1050;
  width: 100vw; height: 100vh; background-color: var(--cs-canvas-deep);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.4; }

/* ============================================================
 * 17. OFFCANVAS
 * ============================================================ */
.offcanvas {
  position: fixed; bottom: 0; z-index: 1045;
  display: flex; flex-direction: column; max-width: 100%;
  background-color: var(--cs-surface-card);
  border-color: var(--cs-hairline);
  visibility: hidden;
}
.offcanvas-start { top: 0; left: 0; width: 400px; border-right: 1px solid var(--cs-hairline); transform: translateX(-100%); }
.offcanvas-end   { top: 0; right: 0; width: 400px; border-left: 1px solid var(--cs-hairline); transform: translateX(100%); }
.offcanvas-top   { top: 0; right: 0; left: 0; height: 30vh; border-bottom: 1px solid var(--cs-hairline); transform: translateY(-100%); }
.offcanvas-bottom { right: 0; left: 0; height: 30vh; border-top: 1px solid var(--cs-hairline); transform: translateY(100%); }
.offcanvas.show { visibility: visible; transform: none; }
.offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--cs-hairline); }
.offcanvas-body { flex-grow: 1; padding: 1rem 1.5rem; overflow-y: auto; }

/* ============================================================
 * 18. DROPDOWN
 * ============================================================ */
.dropdown, .dropend, .dropstart, .dropup { position: relative; }
.dropdown-toggle::after {
  display: inline-block; margin-left: 0.5em; vertical-align: 0.15em;
  content: ""; border-top: 4px solid; border-right: 4px solid transparent;
  border-bottom: 0; border-left: 4px solid transparent;
}
.dropdown-menu {
  position: absolute; z-index: 1000; display: none; min-width: 10rem;
  padding: 0.5rem; margin: 0; font-family: var(--cs-font-body);
  font-size: 0.9375rem; color: var(--cs-ink); text-align: left; list-style: none;
  background-color: var(--cs-surface-card); background-clip: padding-box;
  border: 1px solid var(--cs-hairline); border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-soft);
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  display: block; width: 100%; padding: 0.5rem 0.75rem;
  clear: both; font-weight: 400; color: var(--cs-ink); text-align: inherit;
  text-decoration: none; white-space: nowrap; background-color: transparent;
  border: 0; border-radius: var(--cs-radius-md); letter-spacing: 0.15px;
  cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--cs-surface-strong); color: var(--cs-ink); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--cs-primary); color: var(--cs-on-primary); }
.dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid var(--cs-hairline); }
.dropdown-header { display: block; padding: 0.5rem 0.75rem; margin-bottom: 0; font-size: 0.75rem; color: var(--cs-muted); white-space: nowrap; letter-spacing: 0.96px; text-transform: uppercase; font-weight: 600; }

/* ============================================================
 * 19. TOAST
 * ============================================================ */
.toast {
  width: 350px; max-width: 100%;
  font-size: 0.875rem; pointer-events: auto;
  background-color: var(--cs-surface-card);
  background-clip: padding-box; border: 1px solid var(--cs-hairline);
  border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-soft);
}
.toast.showing { opacity: 0; }
.toast-header {
  display: flex; align-items: center; padding: 0.75rem 1rem;
  background-clip: padding-box;
  border-bottom: 1px solid var(--cs-hairline);
  color: var(--cs-ink);
  border-top-left-radius: calc(var(--cs-radius-lg) - 1px);
  border-top-right-radius: calc(var(--cs-radius-lg) - 1px);
}
.toast-body { padding: 1rem; word-wrap: break-word; }
.toast-container { position: absolute; z-index: 1090; width: max-content; max-width: 100%; pointer-events: none; }

/* ============================================================
 * 20. TOOLTIP / POPOVER
 * ============================================================ */
.tooltip { position: absolute; z-index: 1080; display: block; font-family: var(--cs-font-body); margin: 0; font-size: 0.8125rem; opacity: 0; pointer-events: none; }
.tooltip.show { opacity: 1; }
.tooltip-inner {
  max-width: 200px; padding: 0.375rem 0.625rem;
  color: var(--cs-on-dark); background-color: var(--cs-surface-dark);
  border-radius: var(--cs-radius-md); text-align: center;
}
.popover {
  position: absolute; top: 0; left: 0; z-index: 1070; display: block;
  max-width: 276px; font-family: var(--cs-font-body); font-size: 0.875rem;
  background-color: var(--cs-surface-card);
  border: 1px solid var(--cs-hairline);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-soft);
}
.popover-header {
  padding: 0.75rem 1rem; margin-bottom: 0;
  font-weight: 500; color: var(--cs-ink);
  background-color: transparent;
  border-bottom: 1px solid var(--cs-hairline);
}
.popover-body { padding: 1rem; color: var(--cs-body); letter-spacing: 0.15px; }

/* ============================================================
 * 21. ACCORDION
 * ============================================================ */
.accordion-item {
  background-color: var(--cs-surface-card);
  border: 1px solid var(--cs-hairline);
}
.accordion-item:first-of-type { border-top-left-radius: var(--cs-radius-xl); border-top-right-radius: var(--cs-radius-xl); }
.accordion-item:not(:first-of-type) { border-top: 0; }
.accordion-item:last-of-type { border-bottom-left-radius: var(--cs-radius-xl); border-bottom-right-radius: var(--cs-radius-xl); }
.accordion-header { margin-bottom: 0; font-family: var(--cs-font-body); font-weight: 400; font-size: 1rem; line-height: 1.5; letter-spacing: 0; color: inherit; }
.accordion-button {
  position: relative; display: flex; align-items: center; width: 100%;
  padding: 1rem 1.25rem;
  font-family: var(--cs-font-body); font-weight: 500; font-size: 0.9375rem;
  line-height: 1.5; letter-spacing: 0.16px;
  color: var(--cs-ink); text-align: left;
  background-color: transparent; border: 0; border-radius: 0;
  overflow-anchor: none; cursor: pointer;
  transition: background-color 120ms ease;
}
.accordion-button:hover { background-color: var(--cs-canvas-soft); }
.accordion-button:not(.collapsed) { background-color: var(--cs-canvas-soft); color: var(--cs-ink); }
.accordion-button::after {
  flex-shrink: 0; width: 1rem; height: 1rem; margin-left: auto;
  content: ""; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230c0a09' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-size: 1rem;
  transition: transform 200ms ease;
}
.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }
.accordion-body { padding: 1rem 1.25rem; color: var(--cs-body); letter-spacing: 0.15px; }
.accordion-collapse:not(.show) { display: none; }

/* ============================================================
 * 22. BREADCRUMB
 * ============================================================ */
.breadcrumb {
  display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 1rem; list-style: none;
  font-family: var(--cs-font-body); font-size: 0.875rem; letter-spacing: 0.14px;
  color: var(--cs-muted);
}
.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }
.breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: 0.5rem; color: var(--cs-muted-soft); content: "/"; }
.breadcrumb-item a { color: var(--cs-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--cs-ink); }
.breadcrumb-item.active { color: var(--cs-ink); }

/* ============================================================
 * 23. CLOSE BUTTON
 * ============================================================ */
.btn-close {
  box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em;
  color: var(--cs-ink); background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230c0a09' stroke-linecap='round' stroke-width='2' d='M2 2 14 14M14 2 2 14'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0; border-radius: var(--cs-radius-md); opacity: 0.6; cursor: pointer;
}
.btn-close:hover { opacity: 1; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* ============================================================
 * 24. CLEARSCRIBE EXTENSIONS — atmospheric orbs & sections
 * ============================================================ */
.cs-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.7;
  pointer-events: none; z-index: 0;
}
.cs-orb--mint     { background: radial-gradient(circle, var(--cs-gradient-mint)     0%, transparent 65%); }
.cs-orb--peach    { background: radial-gradient(circle, var(--cs-gradient-peach)    0%, transparent 65%); }
.cs-orb--lavender { background: radial-gradient(circle, var(--cs-gradient-lavender) 0%, transparent 65%); }
.cs-orb--sky      { background: radial-gradient(circle, var(--cs-gradient-sky)      0%, transparent 65%); }
.cs-orb--rose     { background: radial-gradient(circle, var(--cs-gradient-rose)     0%, transparent 65%); }
.cs-section { padding: 6rem 0; position: relative; }
.cs-section--soft { background-color: var(--cs-canvas-soft); }
.cs-section--dark { background-color: var(--cs-surface-dark); color: var(--cs-on-dark); }
.cs-section--dark h1, .cs-section--dark h2, .cs-section--dark h3,
.cs-section--dark h4, .cs-section--dark h5, .cs-section--dark h6 { color: var(--cs-on-dark); }
.cs-section--dark p, .cs-section--dark { color: var(--cs-on-dark); }
.cs-section--dark .text-muted, .cs-section--dark .text-secondary { color: var(--cs-on-dark-soft) !important; }
/* Dark card body inherits the dark surface text colors */
.card.text-bg-dark, .card.bg-dark { color: var(--cs-on-dark); }
.card.text-bg-dark .card-text, .card.bg-dark .card-text { color: var(--cs-on-dark-soft); }
.card.text-bg-dark .card-title, .card.bg-dark .card-title { color: var(--cs-on-dark); }

.font-display { font-family: var(--cs-font-display) !important; font-weight: 300 !important; }
.font-body    { font-family: var(--cs-font-body) !important; }

/* ============================================================
 * 25. UTILITIES — Bootstrap-compatible
 * ============================================================ */
/* Display */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
@media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-block { display: block !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-block { display: inline-block !important; } }
@media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-block { display: block !important; } .d-md-flex { display: flex !important; } .d-md-inline-block { display: inline-block !important; } }
@media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-block { display: block !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-block { display: inline-block !important; } }
@media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-block { display: block !important; } .d-xl-flex { display: flex !important; } }

/* Flex */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-stretch { align-self: stretch !important; }

/* Responsive flex / align / justify / gap variants — match Bootstrap's API at
   sm (576px) / md (768px) / lg (992px) / xl (1200px) so layouts can do things
   like `flex-column flex-lg-row` without silently degrading on desktop. */
@media (min-width: 576px) {
    .flex-sm-row { flex-direction: row !important; } .flex-sm-row-reverse { flex-direction: row-reverse !important; }
    .flex-sm-column { flex-direction: column !important; } .flex-sm-column-reverse { flex-direction: column-reverse !important; }
    .flex-sm-wrap { flex-wrap: wrap !important; } .flex-sm-nowrap { flex-wrap: nowrap !important; }
    .flex-sm-grow-0 { flex-grow: 0 !important; } .flex-sm-grow-1 { flex-grow: 1 !important; }
    .flex-sm-shrink-0 { flex-shrink: 0 !important; } .flex-sm-shrink-1 { flex-shrink: 1 !important; }
    .flex-sm-fill { flex: 1 1 auto !important; }
    .justify-content-sm-start { justify-content: flex-start !important; } .justify-content-sm-end { justify-content: flex-end !important; } .justify-content-sm-center { justify-content: center !important; } .justify-content-sm-between { justify-content: space-between !important; } .justify-content-sm-around { justify-content: space-around !important; } .justify-content-sm-evenly { justify-content: space-evenly !important; }
    .align-items-sm-start { align-items: flex-start !important; } .align-items-sm-end { align-items: flex-end !important; } .align-items-sm-center { align-items: center !important; } .align-items-sm-baseline { align-items: baseline !important; } .align-items-sm-stretch { align-items: stretch !important; }
    .align-self-sm-start { align-self: flex-start !important; } .align-self-sm-end { align-self: flex-end !important; } .align-self-sm-center { align-self: center !important; } .align-self-sm-stretch { align-self: stretch !important; }
    .gap-sm-0 { gap: 0 !important; } .gap-sm-1 { gap: 0.25rem !important; } .gap-sm-2 { gap: 0.5rem !important; } .gap-sm-3 { gap: 1rem !important; } .gap-sm-4 { gap: 1.5rem !important; } .gap-sm-5 { gap: 3rem !important; }
}
@media (min-width: 768px) {
    .flex-md-row { flex-direction: row !important; } .flex-md-row-reverse { flex-direction: row-reverse !important; }
    .flex-md-column { flex-direction: column !important; } .flex-md-column-reverse { flex-direction: column-reverse !important; }
    .flex-md-wrap { flex-wrap: wrap !important; } .flex-md-nowrap { flex-wrap: nowrap !important; }
    .flex-md-grow-0 { flex-grow: 0 !important; } .flex-md-grow-1 { flex-grow: 1 !important; }
    .flex-md-shrink-0 { flex-shrink: 0 !important; } .flex-md-shrink-1 { flex-shrink: 1 !important; }
    .flex-md-fill { flex: 1 1 auto !important; }
    .justify-content-md-start { justify-content: flex-start !important; } .justify-content-md-end { justify-content: flex-end !important; } .justify-content-md-center { justify-content: center !important; } .justify-content-md-between { justify-content: space-between !important; } .justify-content-md-around { justify-content: space-around !important; } .justify-content-md-evenly { justify-content: space-evenly !important; }
    .align-items-md-start { align-items: flex-start !important; } .align-items-md-end { align-items: flex-end !important; } .align-items-md-center { align-items: center !important; } .align-items-md-baseline { align-items: baseline !important; } .align-items-md-stretch { align-items: stretch !important; }
    .align-self-md-start { align-self: flex-start !important; } .align-self-md-end { align-self: flex-end !important; } .align-self-md-center { align-self: center !important; } .align-self-md-stretch { align-self: stretch !important; }
    .gap-md-0 { gap: 0 !important; } .gap-md-1 { gap: 0.25rem !important; } .gap-md-2 { gap: 0.5rem !important; } .gap-md-3 { gap: 1rem !important; } .gap-md-4 { gap: 1.5rem !important; } .gap-md-5 { gap: 3rem !important; }
}
@media (min-width: 992px) {
    .flex-lg-row { flex-direction: row !important; } .flex-lg-row-reverse { flex-direction: row-reverse !important; }
    .flex-lg-column { flex-direction: column !important; } .flex-lg-column-reverse { flex-direction: column-reverse !important; }
    .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-nowrap { flex-wrap: nowrap !important; }
    .flex-lg-grow-0 { flex-grow: 0 !important; } .flex-lg-grow-1 { flex-grow: 1 !important; }
    .flex-lg-shrink-0 { flex-shrink: 0 !important; } .flex-lg-shrink-1 { flex-shrink: 1 !important; }
    .flex-lg-fill { flex: 1 1 auto !important; }
    .justify-content-lg-start { justify-content: flex-start !important; } .justify-content-lg-end { justify-content: flex-end !important; } .justify-content-lg-center { justify-content: center !important; } .justify-content-lg-between { justify-content: space-between !important; } .justify-content-lg-around { justify-content: space-around !important; } .justify-content-lg-evenly { justify-content: space-evenly !important; }
    .align-items-lg-start { align-items: flex-start !important; } .align-items-lg-end { align-items: flex-end !important; } .align-items-lg-center { align-items: center !important; } .align-items-lg-baseline { align-items: baseline !important; } .align-items-lg-stretch { align-items: stretch !important; }
    .align-self-lg-start { align-self: flex-start !important; } .align-self-lg-end { align-self: flex-end !important; } .align-self-lg-center { align-self: center !important; } .align-self-lg-stretch { align-self: stretch !important; }
    .gap-lg-0 { gap: 0 !important; } .gap-lg-1 { gap: 0.25rem !important; } .gap-lg-2 { gap: 0.5rem !important; } .gap-lg-3 { gap: 1rem !important; } .gap-lg-4 { gap: 1.5rem !important; } .gap-lg-5 { gap: 3rem !important; }
}
@media (min-width: 1200px) {
    .flex-xl-row { flex-direction: row !important; } .flex-xl-row-reverse { flex-direction: row-reverse !important; }
    .flex-xl-column { flex-direction: column !important; } .flex-xl-column-reverse { flex-direction: column-reverse !important; }
    .flex-xl-wrap { flex-wrap: wrap !important; } .flex-xl-nowrap { flex-wrap: nowrap !important; }
    .flex-xl-grow-0 { flex-grow: 0 !important; } .flex-xl-grow-1 { flex-grow: 1 !important; }
    .flex-xl-shrink-0 { flex-shrink: 0 !important; } .flex-xl-shrink-1 { flex-shrink: 1 !important; }
    .flex-xl-fill { flex: 1 1 auto !important; }
    .justify-content-xl-start { justify-content: flex-start !important; } .justify-content-xl-end { justify-content: flex-end !important; } .justify-content-xl-center { justify-content: center !important; } .justify-content-xl-between { justify-content: space-between !important; } .justify-content-xl-around { justify-content: space-around !important; } .justify-content-xl-evenly { justify-content: space-evenly !important; }
    .align-items-xl-start { align-items: flex-start !important; } .align-items-xl-end { align-items: flex-end !important; } .align-items-xl-center { align-items: center !important; } .align-items-xl-baseline { align-items: baseline !important; } .align-items-xl-stretch { align-items: stretch !important; }
    .align-self-xl-start { align-self: flex-start !important; } .align-self-xl-end { align-self: flex-end !important; } .align-self-xl-center { align-self: center !important; } .align-self-xl-stretch { align-self: stretch !important; }
    .gap-xl-0 { gap: 0 !important; } .gap-xl-1 { gap: 0.25rem !important; } .gap-xl-2 { gap: 0.5rem !important; } .gap-xl-3 { gap: 1rem !important; } .gap-xl-4 { gap: 1.5rem !important; } .gap-xl-5 { gap: 3rem !important; }
}

/* Spacing — m / p × 0..5 + auto, sides t r b l x y */
.m-0{margin:0!important;} .m-1{margin:0.25rem!important;} .m-2{margin:0.5rem!important;} .m-3{margin:1rem!important;} .m-4{margin:1.5rem!important;} .m-5{margin:3rem!important;} .m-auto{margin:auto!important;}
.mt-0{margin-top:0!important;} .mt-1{margin-top:0.25rem!important;} .mt-2{margin-top:0.5rem!important;} .mt-3{margin-top:1rem!important;} .mt-4{margin-top:1.5rem!important;} .mt-5{margin-top:3rem!important;} .mt-auto{margin-top:auto!important;}
.mb-0{margin-bottom:0!important;} .mb-1{margin-bottom:0.25rem!important;} .mb-2{margin-bottom:0.5rem!important;} .mb-3{margin-bottom:1rem!important;} .mb-4{margin-bottom:1.5rem!important;} .mb-5{margin-bottom:3rem!important;} .mb-auto{margin-bottom:auto!important;}
.ms-0{margin-left:0!important;} .ms-1{margin-left:0.25rem!important;} .ms-2{margin-left:0.5rem!important;} .ms-3{margin-left:1rem!important;} .ms-4{margin-left:1.5rem!important;} .ms-5{margin-left:3rem!important;} .ms-auto{margin-left:auto!important;}
.me-0{margin-right:0!important;} .me-1{margin-right:0.25rem!important;} .me-2{margin-right:0.5rem!important;} .me-3{margin-right:1rem!important;} .me-4{margin-right:1.5rem!important;} .me-5{margin-right:3rem!important;} .me-auto{margin-right:auto!important;}
.mx-0{margin-left:0!important;margin-right:0!important;} .mx-1{margin-left:0.25rem!important;margin-right:0.25rem!important;} .mx-2{margin-left:0.5rem!important;margin-right:0.5rem!important;} .mx-3{margin-left:1rem!important;margin-right:1rem!important;} .mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important;} .mx-5{margin-left:3rem!important;margin-right:3rem!important;} .mx-auto{margin-left:auto!important;margin-right:auto!important;}
.my-0{margin-top:0!important;margin-bottom:0!important;} .my-1{margin-top:0.25rem!important;margin-bottom:0.25rem!important;} .my-2{margin-top:0.5rem!important;margin-bottom:0.5rem!important;} .my-3{margin-top:1rem!important;margin-bottom:1rem!important;} .my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important;} .my-5{margin-top:3rem!important;margin-bottom:3rem!important;} .my-auto{margin-top:auto!important;margin-bottom:auto!important;}

.p-0{padding:0!important;} .p-1{padding:0.25rem!important;} .p-2{padding:0.5rem!important;} .p-3{padding:1rem!important;} .p-4{padding:1.5rem!important;} .p-5{padding:3rem!important;}
.pt-0{padding-top:0!important;} .pt-1{padding-top:0.25rem!important;} .pt-2{padding-top:0.5rem!important;} .pt-3{padding-top:1rem!important;} .pt-4{padding-top:1.5rem!important;} .pt-5{padding-top:3rem!important;}
.pb-0{padding-bottom:0!important;} .pb-1{padding-bottom:0.25rem!important;} .pb-2{padding-bottom:0.5rem!important;} .pb-3{padding-bottom:1rem!important;} .pb-4{padding-bottom:1.5rem!important;} .pb-5{padding-bottom:3rem!important;}
.ps-0{padding-left:0!important;} .ps-1{padding-left:0.25rem!important;} .ps-2{padding-left:0.5rem!important;} .ps-3{padding-left:1rem!important;} .ps-4{padding-left:1.5rem!important;} .ps-5{padding-left:3rem!important;}
.pe-0{padding-right:0!important;} .pe-1{padding-right:0.25rem!important;} .pe-2{padding-right:0.5rem!important;} .pe-3{padding-right:1rem!important;} .pe-4{padding-right:1.5rem!important;} .pe-5{padding-right:3rem!important;}
.px-0{padding-left:0!important;padding-right:0!important;} .px-1{padding-left:0.25rem!important;padding-right:0.25rem!important;} .px-2{padding-left:0.5rem!important;padding-right:0.5rem!important;} .px-3{padding-left:1rem!important;padding-right:1rem!important;} .px-4{padding-left:1.5rem!important;padding-right:1.5rem!important;} .px-5{padding-left:3rem!important;padding-right:3rem!important;}
.py-0{padding-top:0!important;padding-bottom:0!important;} .py-1{padding-top:0.25rem!important;padding-bottom:0.25rem!important;} .py-2{padding-top:0.5rem!important;padding-bottom:0.5rem!important;} .py-3{padding-top:1rem!important;padding-bottom:1rem!important;} .py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important;} .py-5{padding-top:3rem!important;padding-bottom:3rem!important;}

.gap-0{gap:0!important;} .gap-1{gap:0.25rem!important;} .gap-2{gap:0.5rem!important;} .gap-3{gap:1rem!important;} .gap-4{gap:1.5rem!important;} .gap-5{gap:3rem!important;}

/* Text */
.text-start{text-align:left!important;} .text-end{text-align:right!important;} .text-center{text-align:center!important;}
.text-lowercase{text-transform:lowercase!important;} .text-uppercase{text-transform:uppercase!important;} .text-capitalize{text-transform:capitalize!important;}
.text-decoration-none{text-decoration:none!important;} .text-decoration-underline{text-decoration:underline!important;}
.text-nowrap{white-space:nowrap!important;} .text-wrap{white-space:normal!important;} .text-break{word-wrap:break-word!important;word-break:break-word!important;}
.fw-light{font-weight:300!important;} .fw-normal{font-weight:400!important;} .fw-medium{font-weight:500!important;} .fw-semibold{font-weight:600!important;} .fw-bold{font-weight:700!important;}
.fst-italic{font-style:italic!important;} .fst-normal{font-style:normal!important;}
.fs-1{font-size:4rem!important;} .fs-2{font-size:3rem!important;} .fs-3{font-size:2.25rem!important;} .fs-4{font-size:2rem!important;} .fs-5{font-size:1.25rem!important;} .fs-6{font-size:1rem!important;}
.font-monospace{font-family:var(--bs-font-monospace)!important;}
.lh-1{line-height:1!important;} .lh-sm{line-height:1.25!important;} .lh-base{line-height:1.5!important;} .lh-lg{line-height:1.75!important;}
.text-primary{color:var(--cs-primary)!important;}
.text-success{color:var(--cs-success)!important;}
.text-danger{color:var(--cs-error)!important;}
.text-warning{color:#92400e!important;}
.text-info{color:#1e40af!important;}
.text-light{color:#fff!important;}
.text-dark, .text-ink{color:var(--cs-ink)!important;}
.text-white{color:#fff!important;}
.text-body{color:var(--cs-body)!important;}
.text-muted, .text-secondary{color:var(--cs-muted)!important;}
.text-muted-soft{color:var(--cs-muted-soft)!important;}
.text-on-dark{color:var(--cs-on-dark)!important;}

/* Background */
.bg-primary{background-color:var(--cs-primary)!important;}
.bg-secondary{background-color:var(--cs-surface-strong)!important;}
.bg-success{background-color:var(--cs-success)!important;}
.bg-danger{background-color:var(--cs-error)!important;}
.bg-warning{background-color:var(--cs-gradient-peach)!important;}
.bg-info{background-color:var(--cs-gradient-sky)!important;}
.bg-light{background-color:#fff!important;}
.bg-dark{background-color:var(--cs-surface-dark)!important;}
.bg-white{background-color:#fff!important;}
.bg-transparent{background-color:transparent!important;}
.bg-body{background-color:var(--cs-canvas)!important;}
.bg-canvas{background-color:var(--cs-canvas)!important;}
.bg-canvas-soft{background-color:var(--cs-canvas-soft)!important;}
.bg-surface-card{background-color:var(--cs-surface-card)!important;}
.bg-surface-strong{background-color:var(--cs-surface-strong)!important;}
.bg-ink, .bg-dark-ink{background-color:var(--cs-surface-dark)!important;color:var(--cs-on-dark)!important;}

/* Borders & radius */
.border{border:1px solid var(--cs-hairline)!important;}
.border-0{border:0!important;} .border-top{border-top:1px solid var(--cs-hairline)!important;} .border-end{border-right:1px solid var(--cs-hairline)!important;} .border-bottom{border-bottom:1px solid var(--cs-hairline)!important;} .border-start{border-left:1px solid var(--cs-hairline)!important;}
.border-top-0{border-top:0!important;} .border-end-0{border-right:0!important;} .border-bottom-0{border-bottom:0!important;} .border-start-0{border-left:0!important;}
.border-strong{border-color:var(--cs-hairline-strong)!important;}
.border-soft{border-color:var(--cs-hairline-soft)!important;}
.border-primary{border-color:var(--cs-primary)!important;}
.border-success{border-color:var(--cs-success)!important;}
.border-danger{border-color:var(--cs-error)!important;}
.rounded{border-radius:var(--cs-radius-md)!important;}
.rounded-0{border-radius:0!important;} .rounded-1{border-radius:0.25rem!important;} .rounded-2{border-radius:var(--cs-radius-md)!important;} .rounded-3{border-radius:var(--cs-radius-lg)!important;} .rounded-4{border-radius:var(--cs-radius-xl)!important;} .rounded-5{border-radius:var(--cs-radius-xxl)!important;}
.rounded-sm{border-radius:var(--cs-radius-sm)!important;} .rounded-lg{border-radius:var(--cs-radius-lg)!important;} .rounded-xl{border-radius:var(--cs-radius-xl)!important;} .rounded-xxl{border-radius:var(--cs-radius-xxl)!important;}
.rounded-pill{border-radius:9999px!important;} .rounded-circle{border-radius:50%!important;}
.rounded-top{border-top-left-radius:var(--cs-radius-md)!important;border-top-right-radius:var(--cs-radius-md)!important;}
.rounded-bottom{border-bottom-left-radius:var(--cs-radius-md)!important;border-bottom-right-radius:var(--cs-radius-md)!important;}

/* Shadow */
.shadow{box-shadow:var(--cs-shadow-soft)!important;}
.shadow-sm{box-shadow:0 1px 2px rgba(12,10,9,0.04)!important;}
.shadow-lg{box-shadow:0 8px 32px rgba(12,10,9,0.06)!important;}
.shadow-none{box-shadow:none!important;}
.shadow-soft{box-shadow:var(--cs-shadow-soft)!important;}

/* Sizing */
.w-25{width:25%!important;} .w-50{width:50%!important;} .w-75{width:75%!important;} .w-100{width:100%!important;} .w-auto{width:auto!important;}
.h-25{height:25%!important;} .h-50{height:50%!important;} .h-75{height:75%!important;} .h-100{height:100%!important;} .h-auto{height:auto!important;}
.mw-100{max-width:100%!important;} .mh-100{max-height:100%!important;}
.min-vh-100{min-height:100vh!important;} .vh-100{height:100vh!important;} .vw-100{width:100vw!important;}

/* Position */
.position-static{position:static!important;} .position-relative{position:relative!important;} .position-absolute{position:absolute!important;} .position-fixed{position:fixed!important;} .position-sticky{position:sticky!important;}
.top-0{top:0!important;} .top-50{top:50%!important;} .top-100{top:100%!important;}
.bottom-0{bottom:0!important;} .start-0{left:0!important;} .end-0{right:0!important;}
.translate-middle{transform:translate(-50%,-50%)!important;}

/* Sticky helpers — position: sticky shorthand for the most common cases. */
.sticky-top { position: sticky; top: 0; z-index: 1020; }
.sticky-bottom { position: sticky; bottom: 0; z-index: 1020; }
@media (min-width: 576px) {
    .position-sm-sticky { position: sticky !important; }
    .sticky-sm-top { position: sticky; top: 0; z-index: 1020; }
    .sticky-sm-bottom { position: sticky; bottom: 0; z-index: 1020; }
}
@media (min-width: 768px) {
    .position-md-sticky { position: sticky !important; }
    .sticky-md-top { position: sticky; top: 0; z-index: 1020; }
    .sticky-md-bottom { position: sticky; bottom: 0; z-index: 1020; }
}
@media (min-width: 992px) {
    .position-lg-sticky { position: sticky !important; }
    .sticky-lg-top { position: sticky; top: 0; z-index: 1020; }
    .sticky-lg-bottom { position: sticky; bottom: 0; z-index: 1020; }
}
@media (min-width: 1200px) {
    .position-xl-sticky { position: sticky !important; }
    .sticky-xl-top { position: sticky; top: 0; z-index: 1020; }
    .sticky-xl-bottom { position: sticky; bottom: 0; z-index: 1020; }
}

/* Overflow */
.overflow-auto{overflow:auto!important;} .overflow-hidden{overflow:hidden!important;} .overflow-visible{overflow:visible!important;} .overflow-scroll{overflow:scroll!important;}

/* Z-index */
.z-0{z-index:0!important;} .z-1{z-index:1!important;} .z-2{z-index:2!important;} .z-3{z-index:3!important;}

/* Visibility */
.visible{visibility:visible!important;} .invisible{visibility:hidden!important;}

/* Opacity */
.opacity-0{opacity:0!important;} .opacity-25{opacity:0.25!important;} .opacity-50{opacity:0.5!important;} .opacity-75{opacity:0.75!important;} .opacity-100{opacity:1!important;}

/* Cursor */
.cursor-pointer{cursor:pointer!important;}

/* User-select */
.user-select-all{user-select:all!important;} .user-select-auto{user-select:auto!important;} .user-select-none{user-select:none!important;}

/* Object-fit */
.object-fit-contain{object-fit:contain!important;} .object-fit-cover{object-fit:cover!important;} .object-fit-fill{object-fit:fill!important;}

/* ============================================================
 * 26. FOCUS RING
 * ============================================================ */
:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 2px;
  border-radius: var(--cs-radius-xs);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,10,9,0.15); }

/* ============================================================
 * 27. RESPONSIVE TYPE
 * ============================================================ */
@media (max-width: 768px) {
  h1, .h1, .display-1, .display-2 { font-size: 2.5rem; letter-spacing: -1px; }
  h2, .h2, .display-3 { font-size: 2rem; letter-spacing: -0.5px; }
  h3, .h3, .display-5 { font-size: 1.75rem; letter-spacing: -0.32px; }
  h4, .h4 { font-size: 1.5rem; letter-spacing: -0.32px; }
  .cs-section { padding: 4rem 0; }
}

/* ============================================================
 * 28. ADDITIONAL BOOTSTRAP COMPONENTS
 * ============================================================ */

/* Carousel */
.carousel { position: relative; }
.carousel.pointer-event { touch-action: pan-y; }
.carousel-inner {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--cs-radius-xl);
}
.carousel-inner::after { display: block; clear: both; content: ""; }
.carousel-item {
  position: relative; display: none; float: left;
  width: 100%; margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 600ms ease-in-out;
}
.carousel-item img { width: 100%; }
.carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; }
.carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none; }
.carousel-fade .carousel-item.active { opacity: 1; }
.carousel-control-prev, .carousel-control-next {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 15%; padding: 0; color: var(--cs-on-dark);
  background: transparent; border: 0;
  opacity: 0.5; transition: opacity 200ms ease;
}
.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 0.9; color: var(--cs-on-dark); }
.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }
.carousel-control-prev-icon, .carousel-control-next-icon {
  display: inline-block; width: 2rem; height: 2rem;
  background-repeat: no-repeat; background-position: 50%; background-size: 100% 100%;
  filter: drop-shadow(0 2px 6px rgba(12,10,9,0.4));
}
.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 1 4 8l7 7'/%3e%3c/svg%3e"); }
.carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 1 12 8 5 15'/%3e%3c/svg%3e"); }
.carousel-indicators {
  position: absolute; right: 0; bottom: 0; left: 0; z-index: 2;
  display: flex; justify-content: center; padding: 0; margin: 0 0 1rem;
  list-style: none;
}
.carousel-indicators button, .carousel-indicators [data-bs-target] {
  box-sizing: content-box; flex: 0 1 auto;
  width: 24px; height: 3px; padding: 0; margin: 0 3px;
  background-color: rgba(255,255,255,0.5); background-clip: padding-box;
  border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-radius: 0; cursor: pointer; opacity: 1; transition: opacity 200ms ease;
}
.carousel-indicators .active { background-color: #fff; }
.carousel-caption {
  position: absolute; right: 15%; bottom: 1.5rem; left: 15%;
  padding: 1rem 0; color: var(--cs-on-dark); text-align: center;
}
.carousel-dark .carousel-control-prev-icon, .carousel-dark .carousel-control-next-icon { filter: invert(1) grayscale(100%); }
.carousel-dark .carousel-indicators [data-bs-target] { background-color: var(--cs-ink); }
.carousel-dark .carousel-caption { color: var(--cs-ink); }

/* Collapse */
.collapse:not(.show) { display: none; }
.collapsing {
  height: 0; overflow: hidden;
  transition: height 350ms ease;
}
.collapsing.collapse-horizontal {
  width: 0; height: auto;
  transition: width 350ms ease;
}

/* Figure */
.figure { display: inline-block; margin-bottom: 1rem; }
.figure-img { margin-bottom: 0.5rem; line-height: 1; border-radius: var(--cs-radius-lg); }
.figure-caption {
  font-size: 0.875em; color: var(--cs-muted);
  font-family: var(--cs-font-body); letter-spacing: 0.14px;
}

/* Ratio */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-1x1  { --bs-aspect-ratio: 100%; }
.ratio-4x3  { --bs-aspect-ratio: 75%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }
.ratio-21x9 { --bs-aspect-ratio: 42.857143%; }

/* Stacks */
.vstack { display: flex; flex: 1 1 auto; flex-direction: column; align-self: stretch; }
.hstack { display: flex; flex-direction: row; align-items: center; align-self: stretch; }

/* Visually hidden */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Stretched link */
.stretched-link::after {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  content: ""; background-color: rgba(0,0,0,0);
}

/* Placeholder (skeleton) */
.placeholder {
  display: inline-block; min-height: 1em; vertical-align: middle;
  cursor: wait; background-color: currentcolor; opacity: 0.5;
  border-radius: var(--cs-radius-xs);
}
.placeholder.btn::before { display: inline-block; content: ""; }
.placeholder-xs { min-height: 0.6em; }
.placeholder-sm { min-height: 0.8em; }
.placeholder-lg { min-height: 1.2em; }
@keyframes placeholder-glow { 50% { opacity: 0.2; } }
.placeholder-glow .placeholder { animation: placeholder-glow 2s ease-in-out infinite; }
@keyframes placeholder-wave {
  100% { mask-position: -200% 0%; }
}
.placeholder-wave {
  mask-image: linear-gradient(130deg, var(--cs-ink) 55%, rgba(0,0,0,0.8) 75%, var(--cs-ink) 95%);
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}

/* Lists */
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: 0.5rem; }

/* Form floating */
.form-floating { position: relative; }
.form-floating > .form-control,
.form-floating > .form-select { height: calc(3.5rem + 2px); padding: 1rem 1rem 0.25rem; }
.form-floating > label {
  position: absolute; top: 0; left: 0; z-index: 2;
  height: 100%; padding: 1rem; pointer-events: none;
  border: 1px solid transparent; transform-origin: 0 0;
  color: var(--cs-muted); font-family: var(--cs-font-body);
  transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.7; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.5rem; padding-bottom: 0.4rem; }

/* Card extras */
.card-img-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  padding: 1.5rem; border-radius: inherit;
}
.card-header-tabs {
  margin-right: -0.5rem; margin-bottom: -1px; margin-left: -0.5rem;
  border-bottom: 0;
}
.card-header-pills { margin-right: -0.5rem; margin-left: -0.5rem; }

/* Alert link */
.alert-link { font-weight: 600; color: inherit; text-decoration: underline; }

/* Modern Bootstrap 5.2+ text-bg-* helpers */
.text-bg-primary   { color: #fff; background-color: var(--cs-primary) !important; }
.text-bg-secondary { color: var(--cs-ink); background-color: var(--cs-surface-strong) !important; }
.text-bg-success   { color: #fff; background-color: var(--cs-success) !important; }
.text-bg-danger    { color: #fff; background-color: var(--cs-error) !important; }
.text-bg-warning   { color: var(--cs-ink); background-color: var(--cs-gradient-peach) !important; }
.text-bg-info      { color: var(--cs-ink); background-color: var(--cs-gradient-sky) !important; }
.text-bg-light     { color: var(--cs-ink); background-color: #fff !important; }
.text-bg-dark      { color: var(--cs-on-dark); background-color: var(--cs-surface-dark) !important; }

/* Modal fullscreen */
.modal-fullscreen {
  width: 100vw; max-width: none; height: 100%; margin: 0;
}
.modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; }
.modal-fullscreen .modal-header, .modal-fullscreen .modal-footer { border-radius: 0; }
.modal-fullscreen .modal-body { overflow-y: auto; }
.modal-sm { max-width: 300px; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
@media (min-width: 576px) { .modal-dialog-centered { min-height: calc(100% - 3.5rem); } }
.modal-dialog-scrollable { height: calc(100% - 1rem); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }

/* Card group / horizontal card */
.card-group > .card { flex: 1 0 0%; margin-bottom: 0; }
@media (min-width: 576px) {
  .card-group > .card + .card { margin-left: 0; border-left: 0; }
  .card-group > .card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}

/* Fade utility used by JS components */
.fade { transition: opacity 150ms linear; }
.fade:not(.show) { opacity: 0; }

/* Show class baseline */
.show { display: block; }

/* Vertical rule */
.vr {
  display: inline-block; align-self: stretch; width: 1px;
  min-height: 1em; background-color: currentcolor; opacity: 0.25;
}

/* Form check inline */
.form-check-inline { display: inline-block; margin-right: 1rem; }

/* List group horizontal & flush */
.list-group-flush { border-radius: 0; }
.list-group-flush > .list-group-item { border-width: 0 0 1px; }
.list-group-flush > .list-group-item:last-child { border-bottom-width: 0; }
.list-group-horizontal { flex-direction: row; }
.list-group-horizontal > .list-group-item { border-right-width: 0; border-bottom-width: 1px; }
.list-group-horizontal > .list-group-item:first-child { border-top-left-radius: var(--cs-radius-md); border-bottom-left-radius: var(--cs-radius-md); border-top-right-radius: 0; }
.list-group-horizontal > .list-group-item:last-child { border-top-right-radius: var(--cs-radius-md); border-bottom-right-radius: var(--cs-radius-md); border-right-width: 1px; }

/* Input group prepend / append legacy spacing fix */
.input-group > .input-group-text:not(:first-child),
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) { margin-left: -1px; }