/* duomoi brand layer. Colours come from the logo: ink #16141F, coral #F2546B, indigo #5B4BDB.
   Loaded after each page's own styles, so it re-skins the pages built on Bootstrap without touching their layout. */
@font-face { font-family: "Outfit"; src: url("/brand/fonts/Outfit.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --ink: #16141F; --coral: #F2546B; --indigo: #5B4BDB; --indigo-dark: #4A3CC4;
  --paper: #FAF9FD; --card: #FFFFFF; --line: #E8E5F3; --muted: #6B6880;
  --indigo-soft: #EFEDFC; --coral-soft: #FFE8EC; --radius: 16px;
  --font: "Outfit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --primary: var(--indigo); --primary-dark: var(--indigo-dark); --bs-primary: #5B4BDB; --bs-primary-rgb: 91, 75, 219;
}
html body { font-family: var(--font) !important; background: var(--paper) !important; color: var(--ink) !important; }
h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bold, .fw-semibold, .header-title { font-family: var(--font); letter-spacing: -0.01em; }
a { color: var(--indigo); } a:hover { color: var(--indigo-dark); }

/* buttons and accents */
.btn-primary, .btn-primary-custom, .bg-primary { background: var(--indigo) !important; border-color: var(--indigo) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary-custom:hover { background: var(--indigo-dark) !important; border-color: var(--indigo-dark) !important; }
.btn-outline-primary, .btn-outline-custom { color: var(--indigo) !important; border-color: var(--indigo) !important; background: transparent; }
.btn-outline-primary:hover, .btn-outline-custom:hover { background: var(--indigo) !important; color: #fff !important; }
.btn-danger, .btn-danger-custom { background: var(--coral) !important; border-color: var(--coral) !important; color: #fff !important; }
.text-primary { color: var(--indigo) !important; } .text-danger { color: var(--coral) !important; }
.progress-bar { background: var(--indigo); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--indigo); box-shadow: 0 0 0 .2rem rgba(91, 75, 219, .18); }
.form-check-input:checked { background-color: var(--indigo); border-color: var(--indigo); }

/* surfaces */
.glass-card, .card-box, .card { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
  box-shadow: 0 6px 24px rgba(22, 20, 31, .05) !important; backdrop-filter: none !important; }
.card-header { background: transparent !important; border-bottom: 1px solid var(--line) !important; font-family: var(--font); }
.card-header i, .quick-link i { color: var(--indigo) !important; }

/* header: ink bar with the white logo */
.navbar, nav.navbar { background: var(--ink) !important; box-shadow: none !important; padding-top: .55rem; padding-bottom: .55rem; }
.navbar .navbar-brand { display: flex; align-items: center; gap: .7rem; padding: 0; margin: 0; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-label { font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); border-left: 1px solid rgba(255, 255, 255, .22); padding-left: .7rem; }
.brand-bar { background: var(--ink); display: flex; align-items: center; gap: .8rem; padding: .6rem max(16px, 2vw); }
.brand-bar a { display: flex; align-items: center; }
.brand-bar .brand-tag { margin-left: auto; font-size: .78rem; color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
.navbar .text-white-50 { color: rgba(255, 255, 255, .62) !important; }

/* leftovers from the pages' own palettes */
.meter div, .meter > div { background: var(--indigo) !important; }
.chip.active { background: var(--indigo) !important; border-color: var(--indigo) !important; color: #fff !important; }
.page-footer { color: var(--muted); font-size: .78rem; }