/* ════════════════════════════════════════════════════════════════
   UniAttend design system — playful, rounded, reference-inspired.
   Per-role palettes:
     Admin      → white & blue         (body.theme-admin)
     Dept Head  → maroon & white       (body.theme-dept)
     Staff      → light green & white  (body.theme-staff)
     Student    → peacock feather       (body.student-theme)
   Mapped onto the existing Bootstrap markup so every id/class the
   JS relies on keeps working.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* neutral base (login page + before a role theme is applied) */
  --bg: #FBF5E3;
  --bg-2: #F4EDD6;
  --card: #FFFFFF;
  --ink: #2E3A59;
  --muted: #9298AC;
  --line: #EFE7CF;

  /* role-tinted primary (each theme overrides these) */
  --primary: #5B7BE5;
  --primary-deep: #3D58C6;
  --primary-soft: #EAEFFC;
  --primary-soft-2: #DCE5FB;
  --primary-shadow: 0 10px 24px rgba(91,123,229,.35);
  --on-primary: #fff;

  /* shared status colors (semantic — same in every theme) */
  --red: #E5685C;
  --red-soft: #FCE9E6;
  --orange: #F2A93B;
  --orange-soft: #FBF0DA;
  --orange-ink: #C97F12;
  --green: #3EA877;
  --green-soft: #E1F3EA;
  --purple: #8B6FE8;
  --purple-soft: #EEE9FC;

  --shadow: 0 12px 30px rgba(46,58,89,.10);
  --shadow-sm: 0 4px 14px rgba(46,58,89,.08);
  --r-lg: 24px; --r-md: 18px; --r-sm: 12px;
  --sidebar-w: 248px;
}

[data-bs-theme="dark"] {
  --bg: #1B1F30;
  --bg-2: #1F2438;
  --card: #262B42;
  --ink: #EEF1FA;
  --muted: #9CA3BD;
  --line: #333A57;
  --primary-soft: #2F3858;
  --primary-soft-2: #37426B;
  --red-soft: #473038;
  --orange-soft: #453A28;
  --orange-ink: #F2B45C;
  --green-soft: #27413A;
  --purple-soft: #3A3458;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.30);
}

/* ── ADMIN · blue & white (login palette) ── */
body.theme-admin {
  --bg: #EFF3FE; --bg-2: #DFE8FC; --card: #FFFFFF;
  --ink: #2E3A59; --muted: #8595B8; --line: #DCE5FB;
  --primary: #5B7BE5; --primary-deep: #3D58C6;
  --primary-soft: #EAEFFC; --primary-soft-2: #DCE5FB;
  --primary-shadow: 0 10px 24px rgba(91,123,229,.35);
  --on-primary: #fff;
}
[data-bs-theme="dark"] body.theme-admin {
  --bg: #1B1F30; --bg-2: #1F2438; --card: #262B42;
  --ink: #EEF1FA; --muted: #9CA3BD; --line: #333A57;
  --primary: #5B7BE5; --primary-deep: #3D58C6;
  --primary-soft: #2F3858; --primary-soft-2: #37426B;
  --primary-shadow: 0 10px 24px rgba(91,123,229,.30);
  --on-primary: #fff;
}

/* ── DEPT HEAD · maroon & white ── */
body.theme-dept {
  --bg: #FFFFFF; --bg-2: #FBF4F6; --card: #FFFFFF;
  --ink: #3A2230; --muted: #A38B92; --line: #F0E2E6;
  --primary: #7E2D40; --primary-deep: #641F30;
  --primary-soft: #F4E0E4; --primary-soft-2: #ECCFD6;
  --primary-shadow: 0 10px 24px rgba(126,45,64,.32);
  --on-primary: #fff;
}
[data-bs-theme="dark"] body.theme-dept {
  --bg: #1E141A; --bg-2: #2A1C23; --card: #2C1E25;
  --ink: #F4E8EC; --muted: #A98F97; --line: #45313A;
  --primary: #C96A80; --primary-deep: #B85870;
  --primary-soft: #3A2730; --primary-soft-2: #47303B;
  --primary-shadow: 0 10px 24px rgba(201,106,128,.3);
}

/* ── STAFF · light green & white ── */
body.theme-staff {
  --bg: #F2F8F3; --bg-2: #E6F1E8; --card: #FFFFFF;
  --ink: #21372B; --muted: #8AA293; --line: #DCEBDF;
  --primary: #43A877; --primary-deep: #338A60;
  --primary-soft: #E0F2E7; --primary-soft-2: #CDE9D8;
  --primary-shadow: 0 10px 24px rgba(67,168,119,.32);
}
[data-bs-theme="dark"] body.theme-staff {
  --bg: #141C17; --bg-2: #1D2A21; --card: #1F2D24;
  --ink: #E8F4EC; --muted: #8FA898; --line: #2F4537;
  --primary: #4FBE89; --primary-deep: #43A877;
  --primary-soft: #24382C; --primary-soft-2: #2C4536;
  --primary-shadow: 0 10px 24px rgba(79,190,137,.28);
}

/* ── STUDENT · peacock feather (teal/blue & white) ── */
body.student-theme {
  --bg: #EFF8F8; --bg-2: #DFF0F0; --card: #FFFFFF;
  --ink: #103A41; --muted: #74999E; --line: #D2E8E8;
  --primary: #0B7C8C; --primary-deep: #075C68;
  --primary-soft: #DDF0F2; --primary-soft-2: #C5E7EA;
  --primary-shadow: 0 10px 24px rgba(11,124,140,.30);
}
[data-bs-theme="dark"] body.student-theme {
  --bg: #0B1A1D; --bg-2: #102A2E; --card: #122E32;
  --ink: #E4F4F4; --muted: #8FB0B3; --line: #244247;
  --primary: #2BB7C4; --primary-deep: #0B7C8C;
  --primary-soft: #15363B; --primary-soft-2: #1B454B;
  --primary-shadow: 0 10px 24px rgba(43,183,196,.28);
}

/* ════════ base ════════ */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  transition: background .35s ease, color .35s ease;
}
h1,h2,h3,h4,h5,h6 { font-weight: 800; letter-spacing: -.01em; }
.text-muted { color: var(--muted) !important; }

@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none; } }
@keyframes pop { 0% { transform: scale(.92); opacity:0;} 100% { transform: scale(1); opacity:1;} }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0);} 50% { transform: translateY(-12px) rotate(8deg);} }
@keyframes pulse { 0%,100% { opacity:1;} 50% { opacity:.45;} }
@keyframes wiggle { 0%,100% { transform: rotate(0);} 30% { transform: rotate(-10deg);} 60% { transform: rotate(8deg);} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* tab panes animate in when shown */
.tab-pane:not(.d-none) { animation: fadeUp .35s ease; }

/* ════════ floating decorative shapes (fixed, never intercept clicks) ════════ */
.shape { position: absolute; pointer-events: none; opacity: .85; animation: floaty 7s ease-in-out infinite; z-index: 1; }
.shape.deco { position: fixed; opacity: .35; z-index: 0; }
.s-tri  { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 26px solid var(--primary); }
.s-circ { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); }
.s-ring { width: 26px; height: 26px; border-radius: 50%; border: 5px solid var(--red); background: transparent; }
.s-arc  { width: 34px; height: 17px; border-radius: 34px 34px 0 0; background: var(--red); }
.s-emoji { font-size: 1.5rem; background: none; border: none; opacity: .5; }

/* ════════ Login ════════ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; }
.login-card {
  max-width: 420px; width: 100%;
  margin: 0 auto;
  border: none; border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--card);
  animation: pop .45s ease;
  position: relative; z-index: 2;
}
.login-card .card-header {
  background: var(--primary);
  border: none; border-radius: 0 !important;
  padding: 2.1rem 1.75rem 3.4rem;
  text-align: center; color: var(--on-primary, #fff);
  position: relative;
}
.login-card .card-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 32px;
  background: var(--card); border-radius: 30px 30px 0 0;
}
.login-card .brand-icon { font-size: 2.5rem; filter: drop-shadow(0 6px 16px rgba(0,0,0,.18)); }
.login-card .card-body { padding: 1.2rem 1.75rem 2rem; }

/* ════════ Sidebar ════════ */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh; max-height: 100vh; overflow-y: auto;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  position: fixed; top: 0; left: 0;
  display: flex; flex-direction: column;
  z-index: 100;
  padding: 10px;
  transition: background .35s ease;
}
.sidebar .brand {
  padding: 1.2rem .8rem .9rem;
  color: var(--ink);
  font-size: 1.15rem; font-weight: 800;
  border-bottom: 2px solid var(--bg-2);
  margin-bottom: .4rem;
}
.sidebar .brand i { color: var(--primary); display: inline-block; }
.sidebar .brand:hover i { animation: wiggle .5s ease; }
.sidebar .brand::after { content: " ✦"; color: var(--orange); font-size: .8rem; vertical-align: top; }
.sidebar .nav-item.text-uppercase {
  color: var(--muted) !important;
  font-weight: 800; letter-spacing: .07em; font-size: .66rem;
}
.sidebar .nav-link {
  color: var(--muted);
  padding: .62rem .95rem;
  border-radius: 14px;
  margin: 2px 4px;
  font-size: .9rem; font-weight: 800;
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.sidebar .nav-link:hover {
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateX(3px);
}
.sidebar .nav-link.active {
  background: var(--primary);
  color: var(--on-primary, #fff);
  box-shadow: var(--primary-shadow);
}
.sidebar .nav-link i { width: 20px; }
.sidebar .nav-link .badge { font-size: .62rem; }
.sidebar .btn-outline-light {
  border: 2px solid var(--bg-2);
  color: var(--muted);
  border-radius: 999px; font-weight: 800;
  transition: .2s;
}
.sidebar .btn-outline-light:hover {
  background: var(--primary-soft); border-color: var(--primary-soft);
  color: var(--primary);
}

.main-content {
  margin-left: var(--sidebar-w);
  padding: 1.5rem 2rem;
  min-height: 100vh;
  /* positioned (z-index AUTO) so it paints above the fixed deco shapes by DOM
     order. Never give this a z-index: it would create a stacking context that
     traps the Bootstrap modals living inside it BELOW the body-level backdrop
     (dull frozen screen). */
  position: relative;
}

/* ════════ Topbar ════════ */
.topbar {
  background: var(--card);
  border-radius: 20px;
  padding: .8rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: flex-start; gap: .7rem;
  position: sticky; top: 14px; z-index: 50;
}
.topbar::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary); flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
.topbar #tabTitle { margin-right: auto; }
.topbar .badge {
  background: var(--orange-soft) !important;
  color: var(--orange-ink) !important;
  text-transform: uppercase; letter-spacing: .04em;
}
/* role chip emoji per theme */
body.theme-admin #roleLabel::before { content: "🛡️ "; }
body.theme-dept  #roleLabel::before { content: "🏛️ "; }
body.theme-staff #roleLabel::before { content: "👩‍🏫 "; }
body.student-theme #studentLabel::before { content: "🎓 "; }

/* ════════ Cards ════════ */
.card {
  background: var(--card);
  border: none;
  color: var(--ink);
  transition: background .35s ease, transform .25s ease, box-shadow .25s ease;
}
.stat-card, .section-card {
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.section-card { margin-bottom: 1.5rem; }
.section-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--primary-shadow); }
.section-card .card-header {
  background: var(--card);
  border-bottom: 2px solid var(--bg-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  font-weight: 800;
  padding: 1rem 1.25rem;
  color: var(--ink);
}
.section-card .card-header::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange); margin-right: 9px; vertical-align: middle;
}
.section-card .card-header i { color: var(--primary); }
.stat-card .stat-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}

/* ════════ Buttons ════════ */
.btn {
  border-radius: 999px;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }
.btn-primary {
  background: var(--primary); border-color: var(--primary);
  color: var(--on-primary, #fff);
  box-shadow: var(--primary-shadow);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-deep); border-color: var(--primary-deep);
  color: var(--on-primary, #fff);
  transform: translateY(-1px);
}
.btn-success { background: var(--green); border-color: var(--green); box-shadow: 0 8px 20px rgba(62,168,119,.3); }
.btn-success:hover { background: var(--green); border-color: var(--green); filter: brightness(.94); transform: translateY(-1px); }
.btn-danger { background: var(--red); border-color: var(--red); box-shadow: 0 8px 20px rgba(229,104,92,.32); }
.btn-danger:hover { background: var(--red); border-color: var(--red); filter: brightness(.94); transform: translateY(-1px); }
.btn-warning { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(242,169,59,.3); }
.btn-warning:hover { background: var(--orange); border-color: var(--orange); color: #fff; filter: brightness(.95); }
.btn-secondary { background: var(--muted); border-color: var(--muted); }

.btn-outline-primary { color: var(--primary); border: 2px solid var(--primary-soft); background: var(--primary-soft); }
.btn-outline-primary:hover { background: var(--primary-soft-2); border-color: var(--primary-soft-2); color: var(--primary); }
.btn-outline-secondary { color: var(--muted); border: 2px solid var(--line); background: transparent; }
.btn-outline-secondary:hover { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline-danger { color: var(--red); border: 2px solid var(--red-soft); background: var(--red-soft); }
.btn-outline-danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-outline-warning { color: var(--orange-ink); border: 2px solid var(--orange-soft); background: var(--orange-soft); }
.btn-outline-warning:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-outline-success { color: var(--green); border: 2px solid var(--green-soft); background: var(--green-soft); }
.btn-outline-success:hover { background: var(--green); border-color: var(--green); color: #fff; }

.btn-xs { padding: 0.18rem 0.6rem; font-size: 0.72rem; border-radius: 999px; }

/* ════════ Badges ════════ */
.badge { border-radius: 999px; font-weight: 800; padding: .32em .7em; }
.badge.bg-primary   { background: var(--primary-soft) !important; color: var(--primary) !important; }
.badge.bg-success   { background: var(--green-soft) !important;  color: var(--green) !important; }
.badge.bg-danger    { background: var(--red-soft) !important;    color: var(--red) !important; }
.badge.bg-warning   { background: var(--orange-soft) !important; color: var(--orange-ink) !important; }
.badge.bg-info      { background: var(--purple-soft) !important; color: var(--purple) !important; }
.badge.bg-secondary { background: var(--bg-2) !important;        color: var(--muted) !important; }
/* solid red for the sidebar notification pills so they stay loud */
.sidebar .badge.bg-danger { background: var(--red) !important; color: #fff !important; }
.badge-present { background: var(--green-soft); color: var(--green); }
.badge-absent  { background: var(--red-soft); color: var(--red); }

/* ════════ Tables ════════ */
.table { color: var(--ink); --bs-table-bg: transparent; --bs-table-color: var(--ink); }
.table thead.table-dark,
.table thead.table-dark th {
  --bs-table-bg: var(--bg-2);
  --bs-table-color: var(--muted);
  background: var(--bg-2); color: var(--muted);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 800; border: none;
}
.table thead.table-dark th:first-child { border-radius: 12px 0 0 12px; }
.table thead.table-dark th:last-child { border-radius: 0 12px 12px 0; }
.table td { border-color: var(--bg-2); font-weight: 600; vertical-align: middle; }
.table-hover tbody tr { transition: background .15s; }
.table-hover tbody tr:hover { --bs-table-hover-bg: var(--primary-soft); --bs-table-hover-color: var(--ink); }

/* ════════ Forms ════════ */
.form-control, .form-select {
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 14px;
  font-weight: 600;
  transition: border .2s, box-shadow .2s, background .35s;
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: var(--bg-2); }
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  background: var(--bg);
  color: var(--ink);
}
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background: var(--bg-2); }
.form-label { font-weight: 800; color: var(--muted); font-size: .8rem; }
.input-group-text {
  border: 2px solid var(--line); border-right: none;
  background: var(--bg-2); color: var(--muted); border-radius: 14px 0 0 14px;
}
.form-control::placeholder { color: var(--muted); }

/* ════════ Alerts ════════ */
.alert { border: none; border-radius: 16px; font-weight: 700; }
.alert-success { background: var(--green-soft); color: var(--green); }
.alert-danger  { background: var(--red-soft); color: var(--red); }
.alert-warning { background: var(--orange-soft); color: var(--orange-ink); }
.alert-info    { background: var(--primary-soft); color: var(--primary); }
.alert-light   { background: var(--bg-2); color: var(--muted); }

/* ════════ Modals ════════ */
.modal-content {
  background: var(--card);
  color: var(--ink);
  border: none; border-radius: 26px;
  box-shadow: var(--shadow);
}
.modal.fade .modal-dialog { transform: scale(.93) translateY(10px); transition: transform .25s ease; }
.modal.show .modal-dialog { transform: none; }
.modal-header { border-bottom: 2px solid var(--bg-2); }
.modal-footer { border-top: 2px solid var(--bg-2); }
.modal-header .btn-close { transition: transform .2s; }
.modal-header .btn-close:hover { transform: rotate(90deg); }

/* ════════ Toast ════════ */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; }
.toast {
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--shadow);
  animation: pop .3s ease;
}
.toast.text-bg-success { background: var(--green) !important; }
.toast.text-bg-danger  { background: var(--red) !important; }

/* ════════ Progress ════════ */
.progress { background: var(--bg-2); border-radius: 999px; }
.progress-bar { border-radius: 999px; transition: width .4s ease; }
.progress-bar.bg-success { background-color: var(--green) !important; }
.progress-bar.bg-danger  { background-color: var(--red) !important; }
.progress-bar.bg-warning { background-color: var(--orange) !important; }
.attendance-bar { height: 8px; border-radius: 99px; }

/* ════════ Webcam / face capture ════════ */
#webcam-feed, #capture-feed {
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(145deg, #27314f, #1a2238);
  aspect-ratio: 4/3;
  object-fit: cover;
  transform: scaleX(-1);   /* mirror */
}
.capture-thumb {
  width: 80px; height: 80px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px dashed var(--line);
  transition: border .3s, transform .2s;
}
.capture-thumb:hover { transform: scale(1.06); }
.capture-thumb.captured { border-style: solid; border-color: var(--green); }

/* ════════ QR ════════ */
#qr-img { max-width: 220px; border-radius: 18px; border: 8px solid var(--card); box-shadow: var(--shadow-sm); }

/* ════════ Misc ════════ */
.table-scroll { max-height: 420px; overflow: auto; border-radius: var(--r-md); }
/* every generated table is wrapped in .tbl-wrap → scrolls sideways when it can't fit */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-sm); }
.tbl-wrap > table { margin-bottom: 0; }
.list-group-item { background: var(--card); color: var(--ink); border-color: var(--bg-2); }
.spinner-border.text-primary { color: var(--primary) !important; }
a { color: var(--primary); }
hr { border-color: var(--line); opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ════════ Mobile: sidebar becomes a bottom nav bar ════════ */
@media (max-width: 768px) {
  .sidebar {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; min-height: 0; max-height: none;
    flex-direction: row; align-items: center;
    padding: 6px 8px;
    box-shadow: 0 -6px 24px rgba(46,58,89,.14);
    overflow-x: auto; overflow-y: hidden;
    border-radius: 20px 20px 0 0;
  }
  .sidebar .brand { display: none; }
  .sidebar .nav-item.text-uppercase { display: none; }
  .sidebar .nav.flex-column { flex-direction: row !important; flex-wrap: nowrap; margin-top: 0 !important; flex: 1; }
  .sidebar .nav-link { white-space: nowrap; font-size: .78rem; padding: .5rem .7rem; }
  .sidebar .nav-link:hover { transform: none; }
  .sidebar .p-3 { display: flex !important; flex-direction: row !important; padding: .4rem !important; gap: .4rem !important; }
  .sidebar .p-3 .btn { width: auto !important; font-size: .7rem; padding: .3rem .6rem; }
  .main-content { margin-left: 0; padding: 1rem 1rem 96px; }
  .topbar { top: 8px; }
  .shape.deco { display: none; }
}

/* ════════ Tablets / small laptops: slimmer sidebar, tighter gutters ════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  :root { --sidebar-w: 210px; }
  .main-content { padding: 1.25rem 1.25rem; }
  .sidebar .nav-link { font-size: .85rem; padding: .55rem .8rem; }
}

/* ════════ Phones: tidy spacing, wrap the topbar, keep toasts above the nav ════════ */
@media (max-width: 768px) {
  .topbar { flex-wrap: wrap; gap: .5rem; padding: .7rem 1rem; }
  .card-body { padding: 1rem; }
  .modal-dialog { margin: .6rem; }
  .toast-container { left: 1rem; right: 1rem; bottom: 92px; }
  .table-scroll { max-height: 60vh; }
}

/* ════════ Small phones ════════ */
@media (max-width: 480px) {
  .main-content { padding: .8rem .7rem 96px; }
  .topbar { top: 6px; padding: .6rem .8rem; }
  h2, .h2 { font-size: 1.3rem; }
  .btn { font-size: .85rem; }
  #qr-img { max-width: 180px; }
}