:root {
  --ritss-blue: #123f6d;
  --ritss-blue-dark: #0a2b4c;
  --ritss-accent: #2f7fbd;
  --ritss-bg: #f4f7fb;
  --ritss-border: #dbe4ef;
}

body {
  min-height: 100vh;
  color: #172536;
  background:
    radial-gradient(circle at 90% 0, rgba(47, 127, 189, .12), transparent 28rem),
    var(--ritss-bg);
}

.navbar { background: linear-gradient(110deg, var(--ritss-blue-dark), var(--ritss-blue)); }
.navbar-brand span { color: #a9d6f5; font-weight: 400; }
.navbar .nav-link { color: rgba(255, 255, 255, .72); border-radius: .5rem; padding-inline: .85rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .1); }
.shutdown-button { align-self: center; white-space: nowrap; }
.eyebrow { color: var(--ritss-accent); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.page-heading h1 { color: var(--ritss-blue-dark); letter-spacing: -.035em; }
.app-card { background: #fff; border: 1px solid var(--ritss-border); border-radius: 1rem; padding: 1.4rem; box-shadow: 0 .6rem 2rem rgba(22, 54, 89, .055); }
.section-title { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.25rem; }
.section-title > span { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; color: #fff; background: var(--ritss-blue); border-radius: 50%; font-weight: 800; }
.section-title h2 { font-size: 1.15rem; margin: 0; color: var(--ritss-blue-dark); }
.section-title p { margin: .15rem 0 0; color: #6b7c90; font-size: .9rem; }
.form-label { font-size: .82rem; font-weight: 700; color: #41556d; }
.form-control, .form-select, .input-group-text { border-color: #cfdae7; }
.form-control:focus, .form-select:focus { border-color: #70a9d1; box-shadow: 0 0 0 .2rem rgba(47, 127, 189, .13); }
.btn-primary { --bs-btn-bg: var(--ritss-blue); --bs-btn-border-color: var(--ritss-blue); --bs-btn-hover-bg: var(--ritss-blue-dark); --bs-btn-hover-border-color: var(--ritss-blue-dark); }
.btn-outline-primary { --bs-btn-color: var(--ritss-blue); --bs-btn-border-color: #9ab8d1; --bs-btn-hover-bg: var(--ritss-blue); --bs-btn-hover-border-color: var(--ritss-blue); }
.offer-badge { min-width: 15rem; padding: .85rem 1.1rem; color: #fff; background: linear-gradient(120deg, var(--ritss-blue), var(--ritss-accent)); border-radius: .9rem; box-shadow: 0 .5rem 1.5rem rgba(18, 63, 109, .2); }
.offer-badge span { display: block; opacity: .75; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.offer-badge strong { display: block; font-size: 1.3rem; letter-spacing: .04em; }
.totals-card { top: 1.5rem; }
.total-row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #edf1f6; color: #506176; }
.total-row strong { color: #172536; white-space: nowrap; }
.grand-total { margin-top: .4rem; padding-top: 1.2rem; border: 0; font-size: 1.05rem; }
.grand-total strong { color: var(--ritss-blue); font-size: 1.25rem; }
.product-lines th { color: #68798d; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.product-lines td { min-width: 8rem; }
.product-lines td:first-child { min-width: 5.5rem; }
.product-lines td:nth-child(2) { min-width: 17rem; }
.product-lines td:last-child { min-width: 2.5rem; }
.history-table th { color: #68798d; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.history-table td { min-width: 9rem; }
.product-card { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid #e8eef5; }
.product-card:last-child { border-bottom: 0; padding-bottom: 0; }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: #78889a; background: #f8fafc; border: 1px dashed #cdd9e6; border-radius: .75rem; }
code { color: var(--ritss-blue); }
.shutdown-page { display: grid; place-items: center; }
.shutdown-card { width: min(32rem, calc(100vw - 2rem)); }
.shutdown-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto; color: #fff; background: #198754; border-radius: 50%; font-size: 1.7rem; font-weight: 800; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.login-card { width: min(28rem, 100%); }
@media (max-width: 767px) {
  .app-card { padding: 1rem; }
  .product-card { align-items: flex-start; flex-direction: column; }
}