/* ===========================================================================
   Aurora Trust Bank: design tokens, reset and shared components.
   Loaded by every page, public and authenticated.

   Two token families are defined deliberately:

     Family A, semantic  (--primary, --accent, --font-color)
       Consumed by the public site, login, register and transfer screens.

     Family B, numeric   (--primary-600, --gray-800, --success-50)
       Consumed by the dashboard, sidebar and admin screens.

   They are not rival palettes, they are two naming conventions that the
   codebase already used in disjoint places. Mapping both onto the Aurora
   palette here rebrands sixty-odd authenticated pages without touching their
   markup.
   ======================================================================== */

:root {
  /* --- The palette, as given --------------------------------------------- */
  --aurora-midnight: #003366;   /* Arctic Midnight, primary  */
  --aurora-boreal:   #00C897;   /* Boreal Green, action      */
  --aurora-glacial:  #F4F7F6;   /* Glacial White, surfaces   */
  --aurora-tundra:   #007A7C;   /* Tundra Teal, success      */
  --aurora-slate:    #333333;   /* Charcoal Slate, text      */

  /* --- Family A: semantic ------------------------------------------------- */
  --primary-dark:   #00203F;
  --primary:        #003366;
  --primary-mid:    #0A4A85;
  --primary-soft:   #E8F0F8;

  --accent:         #00C897;
  --accent-dark:    #00A87D;
  --accent-light:   #4FE0BB;
  --accent-pale:    #E6FAF4;

  --bg-color:       #F4F7F6;
  --surface:        #FFFFFF;
  --surface-alt:    #FAFCFB;
  --border:         #DDE5E3;
  --border-strong:  #C3D0CE;

  --font-color:      #333333;
  --font-secondary:  #5A6B72;
  --thin-font-color: #7C8B92;
  --inactive-font-color: #9AA7AD;

  --success: #007A7C;
  --danger:  #C0392B;
  --warning: #D68910;
  --info:    #0A4A85;

  /* --- Family B: numeric scales ------------------------------------------ */
  --primary-50:  #E8F0F8;
  --primary-100: #C9DCEE;
  --primary-200: #9DBFDD;
  --primary-300: #6E9FC9;
  --primary-400: #3C7BAF;
  --primary-500: #0A4A85;
  --primary-600: #003366;
  --primary-700: #002851;
  --primary-800: #00203F;
  --primary-900: #00152A;

  --accent-50:  #E6FAF4;
  --accent-100: #BFF3E3;
  --accent-200: #8CE9CC;
  --accent-300: #4FE0BB;
  --accent-400: #1FD3A6;
  --accent-500: #00C897;
  --accent-600: #00A87D;
  --accent-700: #007A7C;
  --accent-800: #005C5E;
  --accent-900: #003E40;

  /* Neutrals warmed a touch toward Charcoal Slate so they sit with the text. */
  --gray-50:  #F7F9F9;
  --gray-100: #EEF2F1;
  --gray-200: #DDE5E3;
  --gray-300: #C3D0CE;
  --gray-400: #9AA7AD;
  --gray-500: #7C8B92;
  --gray-600: #5A6B72;
  --gray-700: #44525A;
  --gray-800: #333333;
  --gray-900: #1F2528;

  --success-50:  #E6F4F4;  --success-100: #C0E4E4;
  --success-500: #009193;  --success-600: #007A7C;  --success-700: #005C5E;
  --danger-50:   #FBEBE9;  --danger-100:  #F5CFCA;
  --danger-500:  #D94F3D;  --danger-600:  #C0392B;  --danger-700:  #9C2C21;
  --warning-50:  #FDF3E3;  --warning-100: #F9E1B8;
  --warning-500: #E8A317;  --warning-600: #D68910;  --warning-700: #A9690B;
  --info-50:     #E8F0F8;  --info-100:    #C9DCEE;
  --info-500:    #0A4A85;  --info-600:    #003366;

  /* --- Type -------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Montserrat', var(--font-sans);
  --font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  /* --- Space, radius, shadow --------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;

  --radius-sm: 6px;   --radius:    12px;   --radius-lg: 18px;
  --radius-xl: 26px;  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 32, 63, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 32, 63, 0.08);
  --shadow:    0 6px 20px rgba(0, 32, 63, 0.10);
  --shadow-lg: 0 16px 40px rgba(0, 32, 63, 0.14);
  --shadow-xl: 0 28px 70px rgba(0, 32, 63, 0.20);
  --shadow-accent: 0 10px 30px rgba(0, 200, 151, 0.28);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition: 220ms var(--ease-out);

  --header-height: 76px;
  --container: 1240px;

  /* --- Family C: compatibility aliases -----------------------------------
     The twenty-seven page stylesheets that survive the consolidation were
     written against three earlier naming schemes. Aliasing those names onto
     the Aurora palette here rebrands every one of them without editing a
     single rule. Nothing new should use these; they exist so the old files
     keep working.
     -------------------------------------------------------------------- */

  /* Old teal brand names */
  --turquoise:       var(--accent);
  --turquoise-light: var(--accent-light);
  --turquoise-glow:  rgba(0, 200, 151, 0.35);
  --teal-mid:        var(--accent-700);
  --teal-deep:       var(--accent-800);

  /* Generic colour names */
  --primary-color:   var(--primary);
  --primary-light:   var(--primary-mid);
  --secondary-color: var(--accent);
  /* Despite the name, --main-color is white in every one of its 74 uses: it
     backs light cards and panels, and colours text sitting on dark gradients. */
  --main-color:      #FFFFFF;
  --success-color:   var(--success);
  --danger-color:    var(--danger);
  --warning-color:   var(--warning);
  --white:           #FFFFFF;

  /* Surfaces */
  --bg:            var(--bg-color);
  --bg-primary:    var(--bg-color);
  --bg-card:       var(--surface);
  --card-bg:       var(--surface);
  --bg-sidecolor-2: var(--primary-800);
  --glass:         rgba(255, 255, 255, 0.08);
  --hover-dark:    rgba(0, 32, 63, 0.06);
  --hover-effects: rgba(0, 200, 151, 0.10);

  /* Text */
  --text:           var(--font-color);
  --text-color:     var(--font-color);
  --text-main:      var(--font-color);
  --text-primary:   var(--font-color);
  --text-secondary: var(--font-secondary);
  --text-muted:     var(--thin-font-color);

  /* Borders */
  --border-color: var(--border);
  --border-light: var(--gray-100);

  /* Radius and shadow aliases */
  --radius-base: var(--radius-sm);
  --radius-md:   var(--radius);
  --radius-2xl:  var(--radius-xl);
  --shadow-base: var(--shadow-xs);
  --shadow-md:   var(--shadow-sm);
  --shadow-card: var(--shadow-sm);
  --shadow-glow: var(--shadow-accent);
  --ease:        var(--ease-out);

  /* Spacing and type aliases */
  --spacing-small:  var(--space-2);
  --spacing-medium: var(--space-4);
  --spacing-large:  var(--space-6);
  --paragraph-font-size: var(--text-base);
  --semi-big-font-size:  var(--text-xl);

  /* Alert aliases */
  --alert-success-bg:    var(--success-50);
  --alert-success-color: var(--success-700);
  --alert-danger-bg:     var(--danger-50);
  --alert-danger-color:  var(--danger-700);

  /* Dashboard quick-action tiles, re-hued onto the Aurora palette */
  --action-green-bg:   var(--accent-50);   --action-green-text:  var(--accent-800);
  --action-blue-bg:    var(--primary-50);  --action-blue-text:   var(--primary-700);
  --action-purple-bg:  #EDEBFA;            --action-purple-text: #4B3F9E;
  --action-gray-bg:    var(--gray-100);    --action-gray-text:   var(--gray-700);

  /* "error" was an alternative spelling of "danger" on several pages */
  --error-50:  var(--danger-50);
  --error-200: var(--danger-100);
  --error-500: var(--danger-500);
  --error-700: var(--danger-700);
  --success-200: var(--success-100);

  /* Assorted one-off names from individual page stylesheets */
  --dark:          var(--primary-800);
  --light:         var(--gray-50);
  --light-gray:    var(--gray-100);
  --text-light:    var(--thin-font-color);
  --border-radius: var(--radius);
  --acct-color:    var(--accent-700);

  /* Admin shell */
  --admin-card-bg:            var(--surface);
  --admin-card-radius:        var(--radius-lg);
  --admin-card-padding:       var(--space-5);
  --admin-card-shadow:        var(--shadow-xs);
  --admin-table-border:       var(--border);
  --admin-table-header-bg:    var(--gray-50);
  --admin-table-header-color: var(--font-secondary);
  --admin-table-row-alt:      var(--surface-alt);
  --admin-table-row-hover:    var(--gray-50);
}

/* ===========================================================================
   Reset
   ======================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--font-color);
  background: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--primary);
}

h1 { font-size: clamp(2.25rem, 5vw, var(--text-5xl)); }
h2 { font-size: clamp(1.75rem, 3.6vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

/* Headings and links default to the brand navy, which is correct on light
   surfaces and invisible on dark ones. Inside any surface that sets its own
   text colour, both must inherit it instead.

   The target list uses :where() so this rule keeps the specificity of the
   ancestor class alone. With :is() it scored 0,2,0 and overrode component
   rules such as .jumbo-btn-light, painting white text on a white button. */
.on-dark :where(h1, h2, h3, h4, h5, h6, a),
.jumbo-card :where(h1, h2, h3, h4, h5, h6, a),
.help-cta-card :where(h1, h2, h3, h4, h5, h6, a),
.sidebar :where(h1, h2, h3, h4, h5, h6, a),
.bottom-nav :where(h1, h2, h3, h4, h5, h6, a),
.hero :where(h1, h2, h3, h4, h5, h6),
.page-hero :where(h1, h2, h3, h4, h5, h6),
.section--midnight :where(h1, h2, h3, h4, h5, h6),
footer :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-mid); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-700); }

/* Email addresses, account numbers and reference ids have no natural break
   points and will otherwise force a container wider than a phone screen. */
a[href^='mailto:'], .mono, .break-anywhere { overflow-wrap: anywhere; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }

button { font: inherit; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* Visible focus for keyboard users, suppressed for pointer users. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 2000;
  padding: var(--space-3) var(--space-5);
  background: var(--primary); color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--transition);
}
.skip-link:focus { top: 0; color: #fff; }

/* ===========================================================================
   Layout
   ======================================================================== */

/* Deliberately NOT `.container`: the authenticated areas use that class for the
   main region beside the sidebar, where a max-width and auto margins would
   squeeze the page into a narrow centred column. */
.section-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: clamp(3.5rem, 8vw, var(--space-9)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--space-7)); }
.section--glacial { background: var(--bg-color); }
.section--surface { background: var(--surface); }

.section--midnight {
  background: linear-gradient(160deg, var(--primary-800), var(--primary-600) 55%, var(--primary-500));
  color: #EAF2F7;
}
.section--midnight h1,
.section--midnight h2,
.section--midnight h3 { color: #fff; }

.section-header { max-width: 720px; margin: 0 auto var(--space-7); text-align: center; }
.section-header p { color: var(--font-secondary); font-size: var(--text-lg); }
.section--midnight .section-header p { color: rgba(255, 255, 255, 0.78); }

.overline {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.section--midnight .overline { color: var(--accent-300); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ===========================================================================
   Buttons
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), color var(--transition),
              border-color var(--transition);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-primary { background: var(--accent); color: var(--primary-800); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-400); color: var(--primary-900); }

.btn-midnight { background: var(--primary); color: #fff; }
.btn-midnight:hover { background: var(--primary-500); color: #fff; box-shadow: var(--shadow); }

.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn-ghost { background: transparent; color: var(--font-secondary); }
.btn-ghost:hover { background: var(--gray-100); color: var(--primary); }

.btn-on-dark { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn-on-dark:hover { background: #fff; color: var(--primary); border-color: #fff; }

.btn-success { background: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }

.btn-sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }
.btn-lg { padding: 1rem 2.1rem; font-size: var(--text-base); }
.btn-block { display: flex; width: 100%; }

/* Inline POST forms rendered as buttons in admin tables. */
.inline-action { display: inline-block; margin: 0 2px 4px 0; }

/* ===========================================================================
   Cards
   ======================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-200);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.card-header h3 { margin: 0; font-size: var(--text-lg); }

.card-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--accent-pale);
  color: var(--accent-700);
  font-size: 1.375rem;
}
.section--midnight .card-icon { background: rgba(0, 200, 151, 0.16); color: var(--accent-300); }

/* ===========================================================================
   Forms
   ======================================================================== */

.field { margin-bottom: var(--space-4); }

.field label,
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--font-secondary);
}

.input, .select, .textarea,
input[type='text'], input[type='email'], input[type='password'],
input[type='number'], input[type='tel'], input[type='date'],
input[type='search'], input[type='url'], select, textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--font-color);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus, .select:focus, .textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-pale);
}

input::placeholder, textarea::placeholder { color: var(--inactive-font-color); }

input:disabled, select:disabled, textarea:disabled {
  background: var(--gray-100);
  color: var(--font-secondary);
  cursor: not-allowed;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B72' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}

textarea { min-height: 130px; resize: vertical; }

.field-hint { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--thin-font-color); }
.field-error { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--danger); }

.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.checkbox-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.checkbox-row label { margin: 0; font-weight: 400; color: var(--font-secondary); }

/* ===========================================================================
   Badges, pills, alerts
   ======================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-accent  { background: var(--accent-pale);  color: var(--accent-800); }
.badge-primary { background: var(--primary-soft); color: var(--primary-700); }
.badge-success { background: var(--success-50);   color: var(--success-700); }
.badge-danger  { background: var(--danger-50);    color: var(--danger-700); }
.badge-warning { background: var(--warning-50);   color: var(--warning-700); }
.badge-muted   { background: var(--gray-100);     color: var(--gray-600); }

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.alert-success { background: var(--success-50); border-color: var(--success-600); color: var(--success-700); }
.alert-danger  { background: var(--danger-50);  border-color: var(--danger-600);  color: var(--danger-700); }
.alert-warning { background: var(--warning-50); border-color: var(--warning-600); color: var(--warning-700); }
.alert-info    { background: var(--info-50);    border-color: var(--info-600);    color: var(--primary-700); }

/* ===========================================================================
   Tables
   ======================================================================== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--font-secondary);
  background: var(--gray-50);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.table td { padding: var(--space-4); border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.table tbody tr { transition: background-color var(--transition); }
.table tbody tr:hover { background: var(--gray-50); }
.table tbody tr:last-child td { border-bottom: 0; }

.amount-in  { color: var(--success-600); font-weight: 600; }
.amount-out { color: var(--danger-600);  font-weight: 600; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ===========================================================================
   Modal
   ======================================================================== */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 32, 63, 0.55);
  backdrop-filter: blur(4px);
}
.modal-backdrop.is-open { display: grid; }

.modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: modal-in 280ms var(--ease-out);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ===========================================================================
   Empty state and loader
   ======================================================================== */

.empty-state { padding: var(--space-7) var(--space-5); text-align: center; color: var(--font-secondary); }
.empty-state i { font-size: 2.5rem; color: var(--gray-300); margin-bottom: var(--space-4); display: block; }

#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; gap: var(--space-4);
  background: var(--primary-800);
  transition: opacity 400ms var(--ease-out), visibility 400ms;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }

.loader-ring {
  width: 46px; height: 46px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loader-text {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
}

/* ===========================================================================
   Utilities
   ======================================================================== */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--font-secondary); }
.text-accent { color: var(--accent-700); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.fw-600      { font-weight: 600; }
.fw-700      { font-weight: 700; }

.flex        { display: flex; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }

.mt-0 { margin-top: 0; }    .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }  .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }  .mb-5 { margin-bottom: var(--space-5); }

.hide { display: none !important; }

/* ===========================================================================
   Motion preferences
   ======================================================================== */

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