/* Klasso — design tokens on top of Bootstrap 5.3 */
:root {
  --em-brand: #022351;          /* sidebar; overridden per tenant */
  --em-accent: #ff7a03;
  --em-bg: #f4f6fa;
  --em-card: #ffffff;
  --em-border: #e3e8ef;
  --em-text: #0f172a;
  --em-muted: #5b6474;
  --bs-primary: #015cbd;
  --bs-primary-rgb: 1, 92, 189;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--em-text);
  --bs-body-bg: var(--em-bg);
  --bs-border-color: var(--em-border);
  --bs-border-radius: .6rem;
  --bs-link-color: #015cbd;
  --bs-link-color-rgb: 1, 92, 189;
  --sidebar-w: 248px;
}
[data-bs-theme="dark"] {
  --em-bg: #0b1220;
  --em-card: #111a2e;
  --em-border: #22304a;
  --em-text: #e6ebf3;
  --em-muted: #9aa6ba;
  --bs-body-color: var(--em-text);
  --bs-body-bg: var(--em-bg);
  --bs-border-color: var(--em-border);
  --bs-primary: #3b8bf0;
  --bs-primary-rgb: 59, 139, 240;
  --bs-link-color: #6aa8f5;
  --bs-link-color-rgb: 106, 168, 245;
}

body { background: var(--em-bg); font-size: .925rem; -webkit-font-smoothing: antialiased; }
h1, .h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; }
h3, .h3, .card-title { font-size: 1rem; font-weight: 700; }
.text-muted, .form-text { color: var(--em-muted) !important; }
.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: #014a99; --bs-btn-hover-border-color: #014a99; }
.btn { font-weight: 600; font-size: .875rem; }
.btn-light { --bs-btn-bg: var(--em-card); --bs-btn-border-color: var(--em-border); }
.form-control, .form-select { border-color: var(--em-border); font-size: .9rem; }
.form-label { font-weight: 600; font-size: .8rem; margin-bottom: .3rem; }
a { text-decoration: none; }
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* ---- shell */
.app-shell { display: flex; min-height: 100vh; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 2000; background: #fff; color: var(--em-text); padding: 8px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.skip-link:focus { top: 12px; }

/* Sidebar: header and footer pinned, only the menu scrolls */
.sidebar {
  --sb-w: var(--sidebar-w);
  width: var(--sb-w); background: var(--em-brand); color: #cfd8e8; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  transition: width .2s ease;
}
.sidebar-head { padding: 16px 14px 8px; flex-shrink: 0; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.15rem; padding: 2px 4px 14px; min-width: 0; }
.brand-text { white-space: nowrap; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--em-accent); color: #1b1300; display: inline-grid; place-items: center; font-weight: 800; font-size: .95rem; overflow: hidden; flex-shrink: 0; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-mark.logo { background: #fff; padding: 3px; }
.brand-mark.logo img { object-fit: contain; }
.sidebar-icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: #9fb0cc; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: background .15s, color .15s, transform .2s; }
.sidebar-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.inst-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; color: #fff; }
.inst-card small { color: #9fb0cc; font-size: .72rem; }
.inst-avatar { background: var(--em-accent); color: #1b1300; border-radius: 9px; }

.sidebar-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 12px;
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable;
  /* soft fade where the list scrolls under the pinned header/footer */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.sidebar-nav:hover, .sidebar-nav:focus-within { scrollbar-color: rgba(255,255,255,.25) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }

.sidebar .nav-link { position: relative; color: #cfd8e8; border-radius: 10px; padding: .55rem .7rem; margin: 1px 0; display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: .875rem; white-space: nowrap; transition: background .15s, color .15s; }
.sidebar .nav-link i { font-size: 1.1rem; opacity: .8; width: 20px; text-align: center; flex-shrink: 0; transition: opacity .15s; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link:hover i { opacity: 1; }
.sidebar .nav-link.active { background: rgba(255,255,255,.11); color: #fff; font-weight: 600; }
.sidebar .nav-link.active i { opacity: 1; color: var(--em-accent); }
.sidebar .nav-link.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--em-accent); }
.sidebar .nav-link:focus-visible { outline: 2px solid var(--em-accent); outline-offset: -2px; }
.sidebar .nav-section { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: #7f93b5; margin: 16px 10px 4px; font-weight: 700; white-space: nowrap; }
.sidebar .nav-badge { margin-left: auto; background: var(--em-accent); color: #1b1300; font-size: .68rem; font-weight: 700; border-radius: 99px; padding: 1px 7px; line-height: 1.5; }

.sidebar-foot { flex-shrink: 0; padding: 10px 14px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.plan-card { display: block; position: relative; background: linear-gradient(135deg, rgba(255,122,3,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; color: #fff; font-size: .78rem; transition: border-color .15s; }
.plan-card:hover { border-color: rgba(255,122,3,.55); color: #fff; }
.plan-card .progress { height: 5px; background: rgba(255,255,255,.15); margin: 6px 0 8px; }
.plan-card .progress-bar { background: var(--em-accent); }
.plan-link { color: var(--em-accent); font-weight: 700; }
.plan-icon { display: none; font-size: 1.15rem; color: var(--em-accent); }

/* Collapsed (desktop): icon rail with tooltips */
@media (min-width: 992px) {
  .sb-collapsed .sidebar { --sb-w: 76px; }
  .sb-collapsed .brand-text, .sb-collapsed .inst-text, .sb-collapsed .nav-text, .sb-collapsed .plan-full { display: none; }
  .sb-collapsed .sidebar-head { padding: 16px 10px 8px; }
  .sb-collapsed .sidebar-head > .d-flex { flex-direction: column; gap: 6px; }
  .sb-collapsed .sidebar .brand { padding: 2px 0 0; justify-content: center; }
  .sb-collapsed .sidebar-icon-btn { margin: 0 0 8px; transform: rotate(180deg); }
  .sb-collapsed .inst-card { justify-content: center; padding: 8px 0; }
  .sb-collapsed .sidebar-nav { padding: 4px 10px 12px; }
  .sb-collapsed .sidebar .nav-link { justify-content: center; padding: .6rem 0; }
  .sb-collapsed .sidebar .nav-section { margin: 12px 14px 6px; height: 1px; background: rgba(255,255,255,.1); }
  .sb-collapsed .sidebar .nav-section span { display: none; }
  .sb-collapsed .sidebar .nav-badge { position: absolute; top: 3px; right: 8px; padding: 0 5px; font-size: .6rem; }
  .sb-collapsed .sidebar-foot { padding: 10px; }
  .sb-collapsed .plan-card { display: flex; justify-content: center; padding: 10px 0; }
  .sb-collapsed .plan-icon { display: inline-block; }
}
.sidebar-backdrop { display: none; }

/* Thin, quiet scrollbars across the app */
html { scrollbar-width: thin; scrollbar-color: #c3ccd9 transparent; }
[data-bs-theme="dark"] { scrollbar-color: #33415c transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3ccd9; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #9aa6ba; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #33415c; }
::-webkit-scrollbar-track { background: transparent; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: var(--em-card); border-bottom: 1px solid var(--em-border); padding: 10px 24px; display: flex; gap: 12px; align-items: center; position: sticky; top: 0; z-index: 1020; }
.topbar .search { max-width: 420px; flex: 1; position: relative; }
.topbar .search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--em-muted); }
.topbar .search input { padding-left: 36px; background: var(--em-bg); }
.search-results { position: absolute; top: 110%; left: 0; right: 0; background: var(--em-card); border: 1px solid var(--em-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.12); display: none; max-height: 380px; overflow: auto; z-index: 1030; }
.search-results a { display: block; padding: 8px 12px; color: var(--em-text); border-bottom: 1px solid var(--em-border); }
.search-results a:hover { background: var(--em-bg); }
.content { padding: 24px; max-width: 1480px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.page-head p { margin: 2px 0 0; color: var(--em-muted); }

/* ---- cards & tiles */
.card { background: var(--em-card); border: 1px solid var(--em-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: transparent; border-bottom: 1px solid var(--em-border); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-body { padding: 18px; }
.kpi { padding: 16px 18px; }
.kpi .label { color: var(--em-muted); font-size: .8rem; font-weight: 600; }
.kpi .value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; }
.kpi .sub { font-size: .78rem; color: var(--em-muted); }
.kpi .sub.good { color: #16794c; } .kpi .sub.bad { color: #b42318; }
.kpi .progress { height: 5px; margin-top: 6px; }

.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-color: var(--em-border); vertical-align: middle; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--em-muted); font-weight: 700; background: var(--em-bg); }
.table-hover tbody tr:hover { --bs-table-hover-bg: rgba(1,92,189,.04); }
.cell-title { font-weight: 600; }
.cell-sub { font-size: .76rem; color: var(--em-muted); }

.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .75rem; flex-shrink: 0; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.av-0 { background: #fde7cf; color: #8a4b08; } .av-1 { background: #dbe8fb; color: #0b4aa2; } .av-2 { background: #e5def8; color: #5b35a8; }
.av-3 { background: #d9f2e6; color: #12663f; } .av-4 { background: #fbe0e0; color: #9b1c1c; } .av-5 { background: #e2e8f0; color: #334155; }

.badge-soft { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.badge-soft-success { background: #dcf3e6; color: #11663c; } .badge-soft-danger { background: #fde2e1; color: #a01d14; }
.badge-soft-warning { background: #fdeccd; color: #8a4b00; } .badge-soft-info { background: #dde9fb; color: #0b4aa2; }
.badge-soft-secondary { background: #e7ebf1; color: #3f4a5c; }
[data-bs-theme="dark"] .badge-soft-success { background: #12382a; color: #7ee2ae; } [data-bs-theme="dark"] .badge-soft-danger { background: #43191a; color: #ff9d97; }
[data-bs-theme="dark"] .badge-soft-warning { background: #3f2d0e; color: #ffcf7a; } [data-bs-theme="dark"] .badge-soft-info { background: #14305a; color: #9cc4ff; }
[data-bs-theme="dark"] .badge-soft-secondary { background: #243049; color: #c3cde0; }

.meter { height: 6px; border-radius: 99px; background: var(--em-border); width: 60px; display: inline-block; vertical-align: middle; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 99px; }
.tone-good { background: #015cbd; } .tone-mid { background: #e8830c; } .tone-bad { background: #b42318; }

.nav-tabs-lite { border-bottom: 1px solid var(--em-border); gap: 4px; }
.nav-tabs-lite .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--em-muted); font-weight: 600; padding: .6rem .8rem; border-radius: 0; }
.nav-tabs-lite .nav-link.active { color: var(--em-text); border-bottom-color: var(--bs-primary); background: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--em-border); background: var(--em-card); border-radius: 99px; padding: 4px 12px; font-size: .8rem; font-weight: 600; color: var(--em-text); }
.chip.active { background: var(--em-text); color: var(--em-card); border-color: var(--em-text); }
.chip .count { color: var(--em-muted); font-weight: 500; }
.chip.active .count { color: inherit; opacity: .75; }

/* timetable grid */
.tt-grid { display: grid; grid-template-columns: 64px repeat(6, minmax(130px, 1fr)); gap: 6px; min-width: 860px; }
.tt-head { text-align: center; font-weight: 700; font-size: .8rem; padding: 6px; border-radius: 8px; color: var(--em-muted); }
.tt-head.today { background: rgba(1,92,189,.1); color: var(--bs-primary); }
.tt-time { font-size: .75rem; color: var(--em-muted); padding-top: 6px; }
.tt-cell { min-height: 84px; }
.tt-slot { border-radius: 8px; padding: 7px 9px; font-size: .75rem; margin-bottom: 5px; border-left: 3px solid; background: #eef4fd; border-color: #015cbd; color: var(--em-text); display: block; }
.tt-slot b { display: block; font-size: .78rem; }
.tt-slot.cat-1 { background: #e7f5ee; border-color: #16794c; } .tt-slot.cat-2 { background: #fdf1e2; border-color: #e8830c; }
.tt-slot.cat-3 { background: #f0ebfb; border-color: #6d4ac2; } .tt-slot.cat-4 { background: #fbe9ec; border-color: #c2334d; }
[data-bs-theme="dark"] .tt-slot { background: #14264a; } [data-bs-theme="dark"] .tt-slot.cat-1 { background: #11342a; }
[data-bs-theme="dark"] .tt-slot.cat-2 { background: #3a2a12; } [data-bs-theme="dark"] .tt-slot.cat-3 { background: #2a2248; } [data-bs-theme="dark"] .tt-slot.cat-4 { background: #3b1a24; }

/* attendance toggles */
.roll-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--em-border); }
.roll-row .num { width: 26px; color: var(--em-muted); font-size: .8rem; }
.btn-check + .btn-att { min-width: 76px; }

/* kanban */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: rgba(148,163,184,.12); border-radius: 12px; padding: 10px; min-height: 420px; }
.kanban-col h6 { font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; padding: 4px 4px 10px; margin: 0; }
.kanban-col .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kcard { background: var(--em-card); border: 1px solid var(--em-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; font-size: .82rem; }
.kcard.dragging { opacity: .5; }
.kanban-col.drop-hover { outline: 2px dashed var(--bs-primary); }
.tag { display: inline-block; font-size: .68rem; font-weight: 600; background: var(--em-bg); border: 1px solid var(--em-border); border-radius: 6px; padding: 1px 6px; margin: 2px 2px 0 0; }

/* auth pages */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: var(--em-brand); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-side h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.15; max-width: 460px; }
.auth-side ul { list-style: none; padding: 0; margin-top: 24px; }
.auth-side li { margin: 10px 0; display: flex; gap: 10px; color: #d8e1f0; }
.auth-side li i { color: var(--em-accent); }
.auth-main { display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 420px; }

/* receipt / printable */
.printable { max-width: 780px; margin: 0 auto; }
@media print {
  .sidebar, .topbar, .no-print, .toast-container { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
  .card { border: 0; box-shadow: none; }
}

/* student portal */
.portal-hero { background: var(--em-brand); color: #fff; border-radius: 0 0 20px 20px; padding: 20px 20px 56px; }
.portal-wrap { max-width: 760px; margin: 0 auto; }
.portal-nav { position: sticky; bottom: 0; background: var(--em-card); border-top: 1px solid var(--em-border); display: flex; justify-content: space-around; padding: 6px 0; z-index: 10; }
.portal-nav a { color: var(--em-muted); font-size: .7rem; text-align: center; flex: 1; padding: 4px; }
.portal-nav a i { display: block; font-size: 1.2rem; }
.portal-nav a.active { color: var(--bs-primary); font-weight: 700; }
.lift { margin-top: -40px; }
.exam-q { font-size: 1rem; }
.exam-opt { display: block; border: 1px solid var(--em-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; }
.exam-opt:has(input:checked) { border-color: var(--bs-primary); background: rgba(1,92,189,.08); }

/* responsive */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: 0; z-index: 1045; transform: translateX(-100%); transition: transform .22s ease; width: min(86vw, 280px); }
  .sidebar.show { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(2, 35, 81, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar.show + .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  body.sb-open { overflow: hidden; }
  .content { padding: 16px; }
  .topbar { padding: 10px 16px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Full Klasso logo has navy lettering: give it a white backing on dark surfaces */
[data-bs-theme="dark"] img[src*="klasso-logo"] { background: #fff; border-radius: 8px; padding: 4px 8px; }
img[src*="klasso-logo"] { width: auto; align-self: flex-start; object-fit: contain; }

/* Top bar lifts once the page scrolls */
.topbar { transition: box-shadow .2s; }
.topbar.scrolled { box-shadow: 0 4px 18px rgba(2, 35, 81, .08); }
[data-bs-theme="dark"] .topbar.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .4); }

/* Busy state for submit buttons (prevents double submits) */
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy .spinner-border { width: .9em; height: .9em; border-width: .15em; vertical-align: -.1em; margin-right: .4em; }

/* Gentle interaction polish */
.btn, .form-control, .form-select, .card, .chip { transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
a.card:hover { border-color: rgba(1, 92, 189, .35); box-shadow: 0 6px 20px rgba(2, 35, 81, .07); }
.form-control:focus, .form-select:focus { border-color: #5b9be0; box-shadow: 0 0 0 .2rem rgba(1, 92, 189, .15); }

/* Empty states */
.empty-state { text-align: center; padding: 40px 16px; }
.empty-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: var(--bs-primary); background: rgba(1, 92, 189, .08); }
[data-bs-theme="dark"] .empty-icon { background: rgba(59, 139, 240, .15); }

/* Phone bottom bar for staff */
.mobile-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: var(--em-card); border-top: 1px solid var(--em-border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(2, 35, 81, .06); }
.mobile-tabbar a, .mobile-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: 0; background: none; color: var(--em-muted); font-size: .68rem; font-weight: 600; border-radius: 10px; }
.mobile-tabbar i { font-size: 1.2rem; }
.mobile-tabbar a.active { color: var(--bs-primary); background: rgba(1, 92, 189, .07); }
@media (max-width: 991.98px) { .main .content { padding-bottom: 88px; } }

/* Chart placeholders: shimmer until Chart.js has drawn */
canvas[role="img"]:not(.chart-ready) { border-radius: 10px; background: linear-gradient(90deg, rgba(148,163,184,.12) 25%, rgba(148,163,184,.24) 37%, rgba(148,163,184,.12) 63%); background-size: 400% 100%; animation: em-shimmer 1.4s ease infinite; }
@keyframes em-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { canvas[role="img"]:not(.chart-ready) { animation: none; } }

/* Search: keyboard hint */
.topbar .search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .68rem; color: var(--em-muted); background: var(--em-card); border: 1px solid var(--em-border); border-radius: 6px; padding: 1px 6px; pointer-events: none; }
.topbar .search input:focus ~ kbd, .topbar .search input:not(:placeholder-shown) ~ kbd { display: none; }
@media (max-width: 575.98px) { .topbar .search kbd { display: none; } }