/* ==========================================================================
   MareArts Work — design system
   --------------------------------------------------------------------------
   One stylesheet for every page. Before this, each of the five templates
   carried its own <style> block (~1,340 duplicated lines) built around a
   #667eea -> #764ba2 purple gradient that appears nowhere in the MareArts
   brand kit, which is why the tool never looked like the rest of the company.

   Colours here come from the Neon palette in
   /media/m2/dev2/AI_HUB/AI_HUB/marearts-brand/final/neon/ — the same palette
   MAST Stitching Studio uses, so the two in-house tools read as one family.

   Dark is the default: this app's main surface is an image canvas, and a dark
   surround is both easier on the eyes and standard for annotation tools.
   Light is a full peer, not an afterthought — every token below has a light
   counterpart, so components never need a theme-specific rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root,
html[data-theme="dark"] {
    /* Brand constants — straight from the logo artwork. Never retune these;
       retune the surface/accent tokens below instead. */
    --brand-navy:   #060814;
    --brand-indigo: #4a5ea8;
    --brand-teal:   #22ffd6;
    --brand-mint:   #e0fffa;
    --brand-slate:  #96a2b0;

    /* Surfaces, back to front. Near-neutral graphite with only a faint cool
       cast, so the teal accent stays the one saturated thing on screen. */
    --bg:            #070a0f;
    --surface:       #0d1015;
    --surface-2:     #14181f;
    --surface-3:     #1c212a;
    --surface-hover: #222834;
    --border:        #29303a;
    --border-strong: #3a4551;

    --text:       #d6e0dd;
    --text-muted: #8b9a95;
    --text-faint: #5f6d69;

    --accent:        #22ffd6;
    --accent-strong: #63ffe6;
    /* Ink that sits ON an accent-filled surface. Bright teal needs dark text
       in dark mode; light mode flips to white over a deeper teal. Always use
       this instead of a hardcoded #fff so contrast tracks the theme. */
    --accent-contrast: #06131a;
    /* Accent as a triplet so rgba() tints (rings, hovers, glows) have a single
       source of truth and re-tint automatically per theme. */
    --accent-rgb: 34, 255, 214;

    --ok:     #3fb950;
    --warn:   #d29922;
    --danger: #f85149;
    --info:   #58a6ff;
    --ok-rgb:     63, 185, 80;
    --warn-rgb:   210, 153, 34;
    --danger-rgb: 248, 81, 73;
    --info-rgb:   88, 166, 255;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

html[data-theme="light"] {
    --bg:            #eef2f4;
    --surface:       #ffffff;
    --surface-2:     #f4f7f8;
    --surface-3:     #e7edef;
    --surface-hover: #dde5e8;
    --border:        #d3dbdf;
    --border-strong: #b3c0c6;

    --text:       #0e1720;
    --text-muted: #56656d;
    --text-faint: #7d8b92;

    /* Neon teal is unreadable on white, so light mode uses the deeper teal
       from the same hue family and flips the contrast ink to white. */
    --accent:          #0c9c86;
    --accent-strong:   #0a8372;
    --accent-contrast: #ffffff;
    --accent-rgb: 12, 156, 134;

    --ok:     #1a7f37;
    --warn:   #9a6700;
    --danger: #cf222e;
    --info:   #0969da;
    --ok-rgb:     26, 127, 55;
    --warn-rgb:   154, 103, 0;
    --danger-rgb: 207, 34, 46;
    --info-rgb:   9, 105, 218;

    --shadow-1: 0 1px 2px rgba(16, 32, 40, .08);
    --shadow-2: 0 4px 12px rgba(16, 32, 40, .10);
    --shadow-3: 0 12px 32px rgba(16, 32, 40, .14);

    color-scheme: light;
}

:root {
    /* Small radii read as "tool"; the 15-20px pills the old UI used read as
       "consumer app". 999px is reserved for genuine pills and status dots. */
    --r-sm:   3px;
    --r-md:   5px;
    --r-lg:   8px;
    --r-pill: 999px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-lg: 15px;
    --fs-xl: 18px;

    --topbar-h: 48px;
    --focus-ring: 0 0 0 2px rgba(var(--accent-rgb), .55);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html, body { height: 100%; }

body {
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* Page shell used by every content page except the annotate workspace, which
   manages its own full-height flex layout. */
body.ma-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.ma-main { flex: 1; padding: var(--sp-5); }
.ma-container { max-width: 1600px; margin: 0 auto; }
.ma-container-narrow { max-width: 1080px; margin: 0 auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

code, kbd, .mono { font-family: var(--font-mono); font-size: .95em; }

kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 5px;
    text-align: center;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
}

/* A single visible focus treatment everywhere. The old UI had none, so
   keyboard users had no idea where they were. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

::selection { background: rgba(var(--accent-rgb), .28); }

/* Scrollbars tuned to the surface so they stop looking like OS chrome bolted
   onto a dark app. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid transparent; background-clip: content-box; border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Icons
   Stroke icons from the sprite in base.html. currentColor everywhere so an
   icon always matches the text it sits next to.
   -------------------------------------------------------------------------- */

.icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -3px;
    pointer-events: none;
}
.icon-lg { width: 20px; height: 20px; }
.icon-sm { width: 14px; height: 14px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: var(--topbar-h);
    padding: 0 var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex: none;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text);
    text-decoration: none;
    flex: none;
}
.topbar-brand:hover { text-decoration: none; color: var(--text); }
.topbar-brand img { width: 22px; height: 22px; display: block; }
.topbar-brand-name {
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: .2px;
    white-space: nowrap;
}
.topbar-brand-name b { font-weight: 700; }

.topbar-sep { width: 1px; height: 22px; background: var(--border); flex: none; }

.topbar-nav { display: flex; align-items: center; gap: 2px; }

.topbar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--sp-3);
    height: 30px;
    color: var(--text-muted);
    font-size: var(--fs-md);
    border-radius: var(--r-md);
    text-decoration: none;
    white-space: nowrap;
}
.topbar-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.topbar-nav a[aria-current="page"] { color: var(--text); background: var(--surface-3); font-weight: 500; }
/* Current page gets an accent underline rather than a filled pill — quieter,
   and it survives the light theme without a second rule. */
.topbar-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: -10px;
    height: 2px;
    background: var(--accent);
    border-radius: var(--r-pill);
}

.topbar-slot { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex: none; }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--sp-2);
    height: 26px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    white-space: nowrap;
    /* Colour only. The old UI lifted buttons with translateY(-2px) on hover,
       which is what made it feel like a toy. */
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-primary:active:not(:disabled) { background: var(--accent); }

.btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.1); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: transparent; }

.btn-sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.btn-lg { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-lg); }
.btn-block { width: 100%; }

/* Square icon-only button. Every one of these must carry a title/aria-label —
   the icon is the whole affordance. */
.btn-icon { width: 30px; padding: 0; }
.btn-icon.btn-sm { width: 26px; }
.btn-icon.btn-lg { width: 36px; }

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.btn-group .btn:hover { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.input, .select, .textarea {
    height: 30px;
    padding: 0 var(--sp-2);
    font-family: inherit;
    font-size: var(--fs-md);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color .12s ease;
}
.textarea { height: auto; padding: var(--sp-2); resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

.select {
    /* Native arrow is drawn in OS chrome and clashes with a dark panel. */
    appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b9a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
html[data-theme="light"] .select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356656d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.hint { font-size: var(--fs-xs); color: var(--text-faint); }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon .icon { position: absolute; left: 8px; color: var(--text-faint); }
.input-icon .input { padding-left: 28px; width: 100%; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.card-title { font-size: var(--fs-md); font-weight: 600; }
.card-header .btn { margin-left: auto; }
.card-body { padding: var(--sp-4); }
.card-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }

.section { margin-bottom: var(--sp-5); }
.section-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.section-head h2 { font-size: var(--fs-lg); }
.section-head .btn { margin-left: auto; }

.eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Metric tile. Value is tabular so a grid of them lines up. */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.metric {
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.metric-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.metric-value { margin-top: 4px; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.metric-value.accent { color: var(--accent); }
.metric-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.table-wrap > .table { border: 0; border-radius: 0; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
.table th, .table td { padding: 7px var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); }
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable:hover { color: var(--text); background: var(--surface-3); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .total-row td { font-weight: 600; background: var(--surface-2); border-top: 2px solid var(--border-strong); }
.table-compact th, .table-compact td { padding: 4px var(--sp-2); }

/* --------------------------------------------------------------------------
   Badges / status
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-neutral { color: var(--text-muted); background: var(--surface-3); border-color: var(--border); }
.badge-ok      { color: var(--ok);     background: rgba(var(--ok-rgb), .13);     border-color: rgba(var(--ok-rgb), .35); }
.badge-warn    { color: var(--warn);   background: rgba(var(--warn-rgb), .13);   border-color: rgba(var(--warn-rgb), .35); }
.badge-danger  { color: var(--danger); background: rgba(var(--danger-rgb), .13); border-color: rgba(var(--danger-rgb), .35); }
.badge-info    { color: var(--info);   background: rgba(var(--info-rgb), .13);   border-color: rgba(var(--info-rgb), .35); }
.badge-accent  { color: var(--accent); background: rgba(var(--accent-rgb), .13); border-color: rgba(var(--accent-rgb), .35); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-faint); }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-danger { background: var(--danger); }
.dot-busy { background: var(--accent); animation: ma-pulse 1.4s ease-in-out infinite; }
@keyframes ma-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.progress-track { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .3s ease; }
.progress-track.lg { height: 10px; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: var(--fs-md);
}
.notice .icon { margin-top: 2px; }
.notice-title { font-weight: 600; margin-bottom: 2px; }
.notice-info    { border-left-color: var(--info);   background: rgba(var(--info-rgb), .07); }
.notice-info .icon { color: var(--info); }
.notice-ok      { border-left-color: var(--ok);     background: rgba(var(--ok-rgb), .07); }
.notice-ok .icon { color: var(--ok); }
.notice-warn    { border-left-color: var(--warn);   background: rgba(var(--warn-rgb), .07); }
.notice-warn .icon { color: var(--warn); }
.notice-danger  { border-left-color: var(--danger); background: rgba(var(--danger-rgb), .07); }
.notice-danger .icon { color: var(--danger); }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(2, 5, 9, .68);
    backdrop-filter: blur(2px);
}
.modal-backdrop.show { display: flex; }

.modal {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 2 * var(--sp-5));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
}
.modal-lg { max-width: 780px; }
.modal-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--fs-lg); font-weight: 600; }
.modal-header .btn-close { margin-left: auto; }
.modal-body { padding: var(--sp-4); overflow: auto; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Empty / loading states
   -------------------------------------------------------------------------- */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    color: var(--text-muted);
}
.empty .icon { width: 28px; height: 28px; color: var(--text-faint); stroke-width: 1.25; }
.empty-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.empty-text { font-size: var(--fs-sm); max-width: 42ch; }

.spinner-brand { width: 40px; height: 40px; }

/* Skeleton shimmer for table/list placeholders. */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: ma-shimmer 1.4s ease infinite;
    border-radius: var(--r-sm);
}
@keyframes ma-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.spacer { margin-left: auto; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.accent { color: var(--accent); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.danger { color: var(--danger); }

.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-lg { font-size: var(--fs-lg); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }

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