/* ============================================================================
   ACADEMIC.CSS — Hệ thiết kế xanh dương, trắng, gọn gàng
   Nền trắng xanh nhạt · chữ xanh than · xanh biển làm màu chính
   · một họ chữ Be Vietnam Pro (dựng riêng cho tiếng Việt).
   Nạp toàn cục trong layout.ejs (sau Bootstrap để override).
   Tên biến cũ (--paper, --oxblood, --gold, --spine…) được giữ làm bí danh
   để các view không phải đổi tên; giá trị nay là bảng màu xanh, trắng.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Bảng màu gốc */
  --blue:        #1a56db;   /* xanh biển — màu chính */
  --blue-deep:   #1442a8;   /* hover, nhấn mạnh */
  --blue-tint:   #e8effd;   /* nền nhạt cho mục chọn, badge */
  --sky:         #3b82f6;   /* xanh trời — điểm nhấn phụ */
  --sky-tint:    #eef4ff;
  --ocean:       #0e2f74;   /* xanh đậm cho khối nổi chữ trắng */
  --ocean-2:     #15408f;

  /* Nền & chữ */
  --paper:        #f4f7fb;   /* nền trang */
  --paper-raised: #ffffff;   /* thẻ, card */
  --paper-deep:   #eef3fa;   /* vùng chìm, đầu bảng */
  --paper-edge:   #e3eaf4;

  --ink:        #0f1f3d;     /* chữ chính */
  --ink-soft:   #4b5b78;     /* chữ phụ */
  --ink-faint:  #8693ab;     /* chú thích */

  /* Bí danh tên cũ → bảng màu mới */
  --oxblood:      var(--blue);
  --oxblood-deep: var(--blue-deep);
  --oxblood-tint: var(--blue-tint);
  --gold:         var(--sky);
  --gold-deep:    #2563eb;
  --gold-tint:    var(--sky-tint);

  /* Khối nổi nền đậm (thẻ dự báo, CTA, chân trang) */
  --spine:        var(--ocean);
  --spine-2:      var(--ocean-2);
  --parchment:    #ffffff;   /* chữ trên nền đậm */
  --parchment-dim:#b9cdf2;   /* chữ phụ trên nền đậm */

  /* Kẻ / viền */
  --rule:        #e2e8f2;
  --rule-strong: #cbd5e3;
  --rule-ink:    rgba(15, 31, 61, 0.12);

  /* Trạng thái */
  --forest:      #15803d;   --forest-tint: #e7f6ec;
  --sienna:      #c2620a;   --sienna-tint: #fdf1e3;
  --error:       #dc2626;   --error-tint:  #fdecec;

  /* Hình học */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;

  /* Bóng — mảnh, lạnh */
  --sh-hair: 0 1px 0 var(--rule);
  --sh-1: 0 1px 2px rgba(15,31,61,.05);
  --sh-2: 0 8px 24px -12px rgba(15,31,61,.18);
  --sh-3: 0 24px 48px -20px rgba(15,31,61,.28);

  /* Chữ: một họ cho cả tiêu đề và thân bài */
  --serif-display: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Bootstrap remap */
  --bs-body-font-family: var(--serif-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--rule);
  --bs-primary: var(--blue);
  --bs-primary-rgb: 26, 86, 219;
  --bs-link-color: var(--blue);
  --bs-link-color-rgb: 26, 86, 219;
  --bs-link-hover-color: var(--blue-deep);
}

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
::selection { background: var(--blue-tint); color: var(--blue-deep); }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--serif-body);
  color: var(--ink);
  background-color: var(--paper);
  font-size: 15.5px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.app-container, .auth-wrapper { position: relative; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }

strong, b { font-weight: 600; }

/* Số liệu: chữ số đều cột */
.ac-tnum, .stat-card .val, .trend-score, table td, table th { font-variant-numeric: tabular-nums; }

/* Thanh cuộn */
* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 10px; border: 2px solid var(--paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* Vòng focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

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

/* ----------------------------------------------------------------------------
   3. HELPERS
   -------------------------------------------------------------------------- */

/* Nhãn nhỏ phía trên tiêu đề — viết thường, không giãn chữ */
.ac-eyebrow {
  font-family: var(--serif-body);
  font-weight: 600;
  font-size: .82rem;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.ac-eyebrow::before { display: none; }

.ac-rule { border: 0; border-top: 1px solid var(--rule); margin: 1.25rem 0; }
.ac-rule--double { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
.ac-rule--gold { border: 0; border-top: 3px solid var(--blue); width: 40px; border-radius: 3px; margin: 1rem 0; }

.ac-secno { font-family: var(--serif-display); color: var(--blue); font-weight: 700; }

/* Vùng trang */
.ac-page { max-width: 1040px; margin: 0 auto; padding: 28px 22px 72px; }
.ac-page--narrow { max-width: 760px; }
.ac-page--wide { max-width: 1200px; }

.ac-page-head { margin: 4px 0 24px; }
.ac-page-head h1 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 700;
  margin: .3rem 0 0;
}
.ac-page-head .lead { color: var(--ink-soft); font-size: 1rem; margin: .4rem 0 0; max-width: 62ch; }
.ac-page-head .ac-rule { margin-top: 18px; }

/* ----------------------------------------------------------------------------
   4. CARD
   -------------------------------------------------------------------------- */
.ac-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 22px 24px;
}
.ac-card--ruled { border-top: 3px solid var(--blue); }
.ac-card-title {
  font-family: var(--serif-display);
  font-size: 1.08rem; font-weight: 700;
  margin: 0 0 4px; display: flex; align-items: center; gap: .55rem;
}
.ac-card-title i { color: var(--blue); font-size: .95em; }
.ac-card-sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 16px; }

/* ----------------------------------------------------------------------------
   5. NÚT
   -------------------------------------------------------------------------- */
.ac-btn {
  --_bg: var(--paper-raised);
  --_fg: var(--ink);
  --_bd: var(--rule-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--serif-body);
  font-weight: 600; font-size: .94rem;
  line-height: 1;
  padding: .75em 1.2em;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ac-btn:hover { color: var(--_fg); box-shadow: var(--sh-1); }
.ac-btn--solid { --_bg: var(--blue); --_fg: #fff; --_bd: var(--blue); }
.ac-btn--solid:hover { --_bg: var(--blue-deep); --_bd: var(--blue-deep); --_fg: #fff; }
.ac-btn--gold { --_bg: var(--blue-tint); --_fg: var(--blue-deep); --_bd: var(--blue-tint); }
.ac-btn--gold:hover { --_bg: #d7e4fc; --_fg: var(--blue-deep); }
.ac-btn--ghost { --_bg: var(--paper-raised); --_fg: var(--blue); --_bd: var(--rule-strong); }
.ac-btn--ghost:hover { --_bg: var(--blue-tint); --_fg: var(--blue-deep); --_bd: #bcd0f7; }
.ac-btn--sm { padding: .5em .85em; font-size: .85rem; }
.ac-btn--lg { padding: .9em 1.5em; font-size: 1rem; }
.ac-btn--block { width: 100%; }

/* ----------------------------------------------------------------------------
   6. BADGE
   -------------------------------------------------------------------------- */
.ac-badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--serif-body); font-weight: 600;
  font-size: .76rem;
  padding: .3em .7em; border-radius: 999px;
  border: 1px solid transparent; color: var(--ink-soft); background: var(--paper-deep);
}
.ac-badge--oxblood { color: var(--blue-deep); background: var(--blue-tint); }
.ac-badge--forest  { color: var(--forest); background: var(--forest-tint); }
.ac-badge--sienna  { color: var(--sienna); background: var(--sienna-tint); }
.ac-badge--gold    { color: var(--gold-deep); background: var(--sky-tint); }

/* ----------------------------------------------------------------------------
   7. METER
   -------------------------------------------------------------------------- */
.ac-meter { height: 8px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
.ac-meter > i { display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width .5s ease; }

/* ----------------------------------------------------------------------------
   8. TRÍCH DẪN
   -------------------------------------------------------------------------- */
.ac-quote {
  border-left: 3px solid var(--blue);
  background: var(--sky-tint);
  padding: .8rem 1.1rem;
  color: var(--ink-soft);
  border-radius: 0 var(--r) var(--r) 0;
}

/* ----------------------------------------------------------------------------
   9. EMPTY STATE
   -------------------------------------------------------------------------- */
.ac-empty {
  text-align: center; padding: 56px 22px;
  background: var(--paper-raised); border: 1px dashed var(--rule-strong); border-radius: var(--r-lg);
}
.ac-empty i { font-size: 2.4rem; color: #b3c6ea; margin-bottom: 14px; }
.ac-empty h2 { font-size: 1.2rem; margin: 0 0 8px; }
.ac-empty p { color: var(--ink-soft); margin: 0 0 20px; }

/* ----------------------------------------------------------------------------
   10. BẢNG
   -------------------------------------------------------------------------- */
.ac-table { width: 100%; border-collapse: collapse; background: var(--paper-raised); }
.ac-table thead th {
  font-family: var(--serif-body); font-weight: 600;
  font-size: .8rem;
  color: var(--ink-soft); text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.ac-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.ac-table tbody tr:hover td { background: var(--sky-tint); }

/* ----------------------------------------------------------------------------
   11. OVERRIDE BOOTSTRAP
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--serif-body);
  --bs-btn-border-radius: var(--r);
  font-weight: 600;
}
.btn-primary {
  --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-deep); --bs-btn-hover-border-color: var(--blue-deep);
  --bs-btn-active-bg: var(--blue-deep); --bs-btn-active-border-color: var(--blue-deep);
  --bs-btn-disabled-bg: var(--blue); --bs-btn-disabled-border-color: var(--blue);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: var(--paper-deep); --bs-btn-border-color: var(--rule);
  --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--paper-edge);
  --bs-btn-hover-border-color: var(--rule-strong); --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--paper-edge); --bs-btn-active-color: var(--ink);
}
.btn-success { --bs-btn-bg: var(--forest); --bs-btn-border-color: var(--forest); --bs-btn-hover-bg: #116632; --bs-btn-hover-border-color: #116632; }
.btn-warning { --bs-btn-bg: var(--sienna); --bs-btn-border-color: var(--sienna); --bs-btn-color: #fff; --bs-btn-hover-bg: #a55208; --bs-btn-hover-border-color: #a55208; --bs-btn-hover-color: #fff; }
.btn-danger  { --bs-btn-bg: var(--error); --bs-btn-border-color: var(--error); --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; }
.btn-info    { --bs-btn-bg: var(--sky); --bs-btn-border-color: var(--sky); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--gold-deep); --bs-btn-hover-border-color: var(--gold-deep); --bs-btn-hover-color: #fff; }
.btn-outline-primary {
  --bs-btn-color: var(--blue); --bs-btn-border-color: #bcd0f7;
  --bs-btn-hover-bg: var(--blue-tint); --bs-btn-hover-border-color: #bcd0f7; --bs-btn-hover-color: var(--blue-deep);
  --bs-btn-active-bg: var(--blue); --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink-soft); --bs-btn-border-color: var(--rule-strong);
  --bs-btn-hover-bg: var(--paper-deep); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--rule-strong);
}
.btn-outline-danger { --bs-btn-color: var(--error); --bs-btn-border-color: #f3b4b4; --bs-btn-hover-bg: var(--error); --bs-btn-hover-border-color: var(--error); }

.card {
  --bs-card-bg: var(--paper-raised);
  --bs-card-border-color: var(--rule);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-cap-bg: var(--paper-raised);
  box-shadow: var(--sh-1);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--rule);
  --bs-table-striped-bg: rgba(15,31,61,.02);
  --bs-table-hover-bg: var(--sky-tint);
  vertical-align: middle;
}
.table > thead th, .table > thead td {
  font-weight: 600; font-size: .8rem;
  color: var(--ink-soft); background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}

.form-control, .form-select {
  font-family: var(--serif-body);
  background-color: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  color: var(--ink);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus, .form-select:focus {
  background-color: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.15);
  color: var(--ink);
}
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-label { font-weight: 600; color: var(--ink); font-size: .9rem; }

.badge { font-family: var(--serif-body); font-weight: 600; border-radius: 999px; }
.badge.bg-primary { background: var(--blue) !important; }
.badge.bg-success { background: var(--forest) !important; }
.badge.bg-warning { background: var(--sienna) !important; color: #fff !important; }
.badge.bg-danger  { background: var(--error) !important; }
.badge.bg-info    { background: var(--sky) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--ink-soft) !important; }

.alert { border-radius: var(--r); border: 1px solid transparent; font-family: var(--serif-body); }
.alert-primary, .alert-info { background: var(--sky-tint); border-color: #cfe0fd; color: var(--ink); }
.alert-success { background: var(--forest-tint); border-color: #c4e8d0; color: #14532d; }
.alert-warning { background: var(--sienna-tint); border-color: #f6d9b5; color: #7c3d06; }
.alert-danger  { background: var(--error-tint); border-color: #f7c6c6; color: #991b1b; }

.modal-content {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.modal-header, .modal-footer { border-color: var(--rule); }
.modal-title { font-family: var(--serif-display); font-weight: 700; }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--rule);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--blue);
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--blue);
}
.nav-tabs .nav-link { font-family: var(--serif-body); font-weight: 600; color: var(--ink-soft); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--blue); }

.pagination {
  --bs-pagination-color: var(--blue);
  --bs-pagination-bg: var(--paper-raised);
  --bs-pagination-border-color: var(--rule);
  --bs-pagination-hover-bg: var(--sky-tint);
  --bs-pagination-hover-color: var(--blue-deep);
  --bs-pagination-active-bg: var(--blue);
  --bs-pagination-active-border-color: var(--blue);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--paper-raised);
  --bs-dropdown-border-color: var(--rule);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--sky-tint);
  --bs-dropdown-link-active-bg: var(--blue);
  font-family: var(--serif-body);
  box-shadow: var(--sh-2);
}

.progress { --bs-progress-bar-bg: var(--blue); --bs-progress-bg: var(--paper-deep); }

hr { border-top: 1px solid var(--rule); opacity: 1; }

.text-primary { color: var(--blue) !important; }
.text-muted { color: var(--ink-soft) !important; }
.text-danger { color: var(--error) !important; }
.text-success { color: var(--forest) !important; }
.bg-light { background: var(--paper-deep) !important; }
.bg-primary { background: var(--blue) !important; }
.border { border-color: var(--rule) !important; }

/* Nền trời sao cho khối nổi nền xanh đậm (thẻ dự báo, bảng điểm…) */
.ac-starry.ac-starry { /* lặp class để thắng shorthand background trong style của view */
  background-image:
    radial-gradient(ellipse 60% 80% at 85% 0%, rgba(147,197,253,.28), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220'%3E%3Cg fill='%23ffffff' fill-opacity='.32'%3E%3Ccircle cx='209.6' cy='67.1' r='1.11' opacity='1.00'/%3E%3Ccircle cx='217.4' cy='148.1' r='0.62' opacity='0.92'/%3E%3Ccircle cx='226.3' cy='182.1' r='1.35' opacity='0.57'/%3E%3Ccircle cx='254.0' cy='42.3' r='1.01' opacity='0.50'/%3E%3Ccircle cx='66.9' cy='173.3' r='1.73' opacity='0.90'/%3E%3Ccircle cx='35.6' cy='103.5' r='1.33' opacity='0.59'/%3E%3Ccircle cx='89.4' cy='81.0' r='1.89' opacity='0.92'/%3E%3Ccircle cx='134.2' cy='94.3' r='1.57' opacity='0.46'/%3E%3Ccircle cx='50.7' cy='69.9' r='0.74' opacity='0.68'/%3E%3Ccircle cx='311.4' cy='102.9' r='1.39' opacity='0.50'/%3E%3Ccircle cx='139.5' cy='192.2' r='1.57' opacity='0.55'/%3E%3Ccircle cx='171.5' cy='186.2' r='1.26' opacity='0.42'/%3E%3Ccircle cx='188.6' cy='20.3' r='1.23' opacity='0.61'/%3E%3Ccircle cx='223.9' cy='55.9' r='0.74' opacity='0.61'/%3E%3Ccircle cx='133.8' cy='207.7' r='0.79' opacity='0.36'/%3E%3Ccircle cx='80.6' cy='29.2' r='1.18' opacity='0.35'/%3E%3Ccircle cx='91.6' cy='61.7' r='0.78' opacity='0.49'/%3E%3Ccircle cx='257.1' cy='105.5' r='0.94' opacity='0.90'/%3E%3Ccircle cx='196.3' cy='153.9' r='0.60' opacity='0.71'/%3E%3Ccircle cx='143.6' cy='112.4' r='1.17' opacity='0.54'/%3E%3Ccircle cx='156.2' cy='209.9' r='0.63' opacity='0.69'/%3E%3Ccircle cx='290.0' cy='134.1' r='0.60' opacity='0.77'/%3E%3Ccircle cx='207.7' cy='87.8' r='1.53' opacity='0.80'/%3E%3Ccircle cx='90.5' cy='174.4' r='2.18' opacity='0.67'/%3E%3Ccircle cx='60.9' cy='125.2' r='1.19' opacity='0.91'/%3E%3Ccircle cx='183.1' cy='152.5' r='0.60' opacity='0.96'/%3E%3Ccircle cx='28.0' cy='53.5' r='0.82' opacity='0.87'/%3E%3Ccircle cx='99.1' cy='189.4' r='0.64' opacity='0.87'/%3E%3Ccircle cx='130.9' cy='94.6' r='0.60' opacity='0.56'/%3E%3Ccircle cx='226.7' cy='181.8' r='1.50' opacity='1.00'/%3E%3Ccircle cx='189.3' cy='189.2' r='0.68' opacity='0.35'/%3E%3Ccircle cx='81.3' cy='116.3' r='1.14' opacity='0.80'/%3E%3Ccircle cx='215.0' cy='107.4' r='1.16' opacity='0.95'/%3E%3Ccircle cx='218.3' cy='28.7' r='0.99' opacity='0.49'/%3E%3Cpath d='M52 39C53.05 44.95 53.05 44.95 59 46C53.05 47.05 53.05 47.05 52 53C50.95 47.05 50.95 47.05 45 46C50.95 44.95 50.95 44.95 52 39Z'/%3E%3Cpath d='M232 119C233.35 126.65 233.35 126.65 241 128C233.35 129.35 233.35 129.35 232 137C230.65 129.35 230.65 129.35 223 128C230.65 126.65 230.65 126.65 232 119Z'/%3E%3Cpath d='M150 183C150.75 187.25 150.75 187.25 155 188C150.75 188.75 150.75 188.75 150 193C149.25 188.75 149.25 188.75 145 188C149.25 187.25 149.25 187.25 150 183Z'/%3E%3Cpath d='M286 31.5C286.675 35.325 286.675 35.325 290.5 36C286.675 36.675 286.675 36.675 286 40.5C285.325 36.675 285.325 36.675 281.5 36C285.325 35.325 285.325 35.325 286 31.5Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 320px 220px;
}

/* ----------------------------------------------------------------------------
   12. TIỆN ÍCH NHỎ
   -------------------------------------------------------------------------- */
.ac-display { font-family: var(--serif-display); }
.ac-italic { font-style: italic; }
.ac-muted { color: var(--ink-soft); }
.ac-center { text-align: center; }