/* Company Leave Calendar - app styles. --brand / --brand-text are set per company in Settings. */
:root {
  --ink: #1d2733;
  --muted: #5f6b78;
  --paper: #f3f5f7;
  --surface: #ffffff;
  --line: #dde3e9;
  --approved: #2e9e5b;
  --pending: #e08a00;
  --rejected: #c8463d;
  --cancelled: #8a96a3;
  --holiday: #7b61c4;
  --brand-soft: color-mix(in srgb, var(--brand) 10%, white);
  --brand-mid: color-mix(in srgb, var(--brand) 22%, white);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 248px;
  --tabbar-h: 64px;
  --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--line);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: color-mix(in srgb, var(--brand) 80%, black);
  --bs-link-color-rgb: 30, 111, 217;
  --bs-focus-ring-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
html { -webkit-text-size-adjust: 100%; }
body { font-size: 15px; line-height: 1.5; background: var(--paper); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
a { color: var(--brand); }
.text-muted, .muted { color: var(--muted) !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Buttons & form controls take the brand colour */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: .55rem 1rem; }
.btn-sm { padding: .35rem .7rem; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--brand-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 86%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 86%, black); --bs-btn-hover-color: var(--brand-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 78%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 78%, black); --bs-btn-active-color: var(--brand-text);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-disabled-color: var(--brand-text);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--brand-text);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-active-color: var(--brand-text);
}
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--paper); --bs-btn-hover-border-color: var(--line); }
.btn-approve { --bs-btn-bg: var(--approved); --bs-btn-border-color: var(--approved); --bs-btn-color: #fff; --bs-btn-hover-bg: #258049; --bs-btn-hover-border-color: #258049; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #1f6d3e; --bs-btn-active-color: #fff; }
.btn-reject { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--rejected); --bs-btn-color: var(--rejected); --bs-btn-hover-bg: var(--rejected); --bs-btn-hover-border-color: var(--rejected); --bs-btn-hover-color: #fff; --bs-btn-active-bg: #a73a32; --bs-btn-active-color: #fff; }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line); padding: .6rem .8rem; font-size: 15px; }
.form-select { padding-right: 2.4rem; }
.form-select-sm { padding: .4rem 2.2rem .4rem .7rem; font-size: 14px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-label { font-weight: 600; font-size: 14px; margin-bottom: .35rem; }
.form-text { color: var(--muted); }
.alert { border-radius: var(--radius-sm); border: 0; }
@media (max-width: 575.98px) { .form-control, .form-select { font-size: 16px; } } /* stops iOS zooming into inputs */

/* ---------- Shell ---------- */
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 2000; background: var(--surface); padding: 8px 12px; border-radius: 8px; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
@media (min-width: 992px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1030; }
  .main { margin-left: var(--sidebar-w); }
}
@media (max-width: 991.98px) { .sidebar { --bs-offcanvas-width: 290px; } }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.brand img { max-height: 46px; max-width: 190px; display: block; }
.sidebar-nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-item-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; position: relative; }
.nav-item-link .bi { font-size: 1.15rem; color: var(--muted); }
.nav-item-link:hover { background: var(--paper); color: var(--ink); }
.nav-item-link.active { background: var(--brand-soft); color: color-mix(in srgb, var(--brand) 75%, black); font-weight: 700; }
.nav-item-link.active .bi { color: var(--brand); }
.nav-item-link.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.count-pill { margin-left: auto; background: var(--pending); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.sidebar-foot { border-top: 1px solid var(--line); padding: 12px; }
.me-link { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.me-link:hover, .me-link.active { background: var(--paper); color: var(--ink); }
.me-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.me-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text small { color: var(--muted); font-size: 12.5px; }
.company-line { font-size: 12px; color: var(--muted); margin: 8px 12px 0; }

.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.topbar .brand img { max-height: 34px; max-width: 170px; }

.page { padding: 28px 32px 48px; max-width: 1240px; }
@media (max-width: 991.98px) {
  .page { padding: 18px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
}

/* Bottom tab bar (phones / installed app) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; padding: 6px 0; }
.tabbar .bi { font-size: 1.3rem; line-height: 1; }
.tabbar a.active { color: var(--brand); }
.tabbar .tab-primary { justify-self: center; width: 52px; height: 52px; border-radius: 16px; background: var(--brand); color: var(--brand-text); justify-content: center; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent); margin-top: -18px; }
.tabbar .tab-primary .bi { font-size: 1.6rem; }
.tabbar .tab-primary.active { color: var(--brand-text); }
.tab-dot { position: absolute; top: 0; left: calc(50% + 6px); background: var(--pending); color: #fff; font-size: 10.5px; border-radius: 999px; padding: 0 6px; line-height: 17px; }

/* ---------- Page furniture ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: 1.75rem; margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 575.98px) { .page-head h1 { font-size: 1.45rem; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel + .panel { margin-top: 20px; }
.panel-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title a { font-size: 14px; font-weight: 600; text-decoration: none; }
@media (max-width: 575.98px) { .panel { padding: 16px; border-radius: 10px; } }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.empty .bi { font-size: 2rem; display: block; margin-bottom: 6px; color: var(--line); }

/* Avatars */
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 88px; height: 88px; font-size: 1.6rem !important; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-mid); color: color-mix(in srgb, var(--brand) 70%, black); font-weight: 700; font-size: 14px; }

/* Status pills */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-approved { color: #1f7444; background: #e3f4ea; }
.status-pending { color: #9a5d00; background: #fdf0d9; }
.status-rejected { color: #a3362e; background: #fbe6e4; }
.status-cancelled { color: #5f6b78; background: #edf0f3; }

/* Date tile: the small calendar page used wherever leave is listed */
.date-tile { width: 54px; flex: none; display: inline-flex; flex-direction: column; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; line-height: 1; box-shadow: 0 1px 0 var(--line); }
.date-tile .dt-m { align-self: stretch; text-align: center; background: var(--brand); color: var(--brand-text); font-size: 11px; font-weight: 700; padding: 4px 0 3px; }
.date-tile .dt-d { font-size: 22px; font-weight: 800; padding: 5px 0 1px; }
.date-tile .dt-w { font-size: 10.5px; color: var(--muted); padding-bottom: 5px; }
.date-tile.is-pending .dt-m { background: var(--pending); color: #fff; }
.date-tile.is-rejected .dt-m, .date-tile.is-cancelled .dt-m { background: var(--cancelled); color: #fff; }

/* Leave lists */
.leave-list { list-style: none; margin: 0; padding: 0; }
.leave-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.leave-row:first-child { border-top: 0; padding-top: 2px; }
.leave-row .lr-body { flex: 1; min-width: 0; }
.leave-row .lr-title { font-weight: 700; display: block; color: var(--ink); text-decoration: none; }
a.lr-title:hover { color: var(--brand); }
.leave-row .lr-meta { font-size: 13.5px; color: var(--muted); }
.leave-row .lr-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.leave-row .lr-days { font-size: 13px; color: var(--muted); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Balance strip */
.balance { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.balance > div { padding: 16px 18px; border-left: 1px solid var(--line); }
.balance > div:first-child { border-left: 0; }
.balance .b-num { font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.balance .b-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.balance .b-remaining { background: var(--brand-soft); }
.balance .b-remaining .b-num { color: color-mix(in srgb, var(--brand) 80%, black); }
.balance .b-neg .b-num { color: var(--rejected); }
.balance-bar { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; display: flex; margin-top: 12px; }
.balance-bar span { display: block; height: 100%; }
@media (max-width: 575.98px) {
  .balance { grid-template-columns: repeat(2, 1fr); }
  .balance > div:nth-child(3) { border-left: 0; }
  .balance > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .balance .b-num { font-size: 1.55rem; }
}

/* Tables */
.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: .75rem .6rem; border-color: var(--line); vertical-align: middle; }
.table thead th { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Employees */
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.emp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.emp-card.inactive { opacity: .6; }
.emp-card .emp-top { display: flex; gap: 12px; align-items: center; }
.emp-card .emp-name { font-weight: 700; margin: 0; }
.emp-card .emp-role { font-size: 13px; color: var(--muted); }
.emp-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; background: var(--paper); border-radius: var(--radius-sm); }
.emp-stats div { padding: 8px 4px; }
.emp-stats b { display: block; font-size: 1.2rem; }
.emp-stats span { font-size: 12px; color: var(--muted); }
.role-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--brand-soft); color: color-mix(in srgb, var(--brand) 75%, black); }

/* Overlap timeline on the review page */
.timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.timeline table { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.timeline th { font-weight: 600; color: var(--muted); text-align: center; min-width: 26px; }
.timeline th.wk, .timeline td.wk { opacity: .55; }
.timeline td.name { white-space: nowrap; padding-right: 10px; font-weight: 600; font-size: 13px; }
.timeline td.cell { height: 22px; background: var(--paper); border-radius: 4px; }
.timeline td.cell.on-approved { background: var(--approved); }
.timeline td.cell.on-pending { background: repeating-linear-gradient(45deg, var(--pending), var(--pending) 4px, #f3b54d 4px, #f3b54d 8px); }
.timeline td.cell.this { box-shadow: inset 0 0 0 2px var(--ink); }
.timeline th.range, .timeline td.range { background-color: var(--brand-soft); }
.timeline td.cell.hol { background: color-mix(in srgb, var(--holiday) 25%, white); }

/* Notes history */
.notes { list-style: none; padding: 0; margin: 0; }
.notes li { padding: 10px 0 10px 18px; border-left: 2px solid var(--line); position: relative; }
.notes li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.notes small { color: var(--muted); }

/* Settings */
.settings-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 22px; scrollbar-width: none; }
.settings-tabs a { padding: 10px 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.settings-tabs a.active { color: var(--ink); border-bottom-color: var(--brand); }
.logo-preview { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 16px; display: flex; align-items: center; justify-content: center; min-height: 96px; }
.logo-preview img { max-height: 64px; max-width: 100%; }
.icon-preview img { width: 64px; height: 64px; border-radius: 14px; }
.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.brand-preview { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.brand-preview .bp-bar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px; }
.brand-preview .bp-body { padding: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.form-control-color { width: 56px; height: 42px; padding: 4px; }

/* ---------- Calendar ---------- */
.cal-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-title { font-size: 1.25rem; font-weight: 700; margin: 0; min-width: 10ch; }
.view-switch .btn { padding: .4rem .85rem; }
.view-switch .btn.active { background: var(--brand); color: var(--brand-text); border-color: var(--brand); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-top: 12px; }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fc { --fc-border-color: var(--line); --fc-today-bg-color: var(--brand-soft); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--paper); font-size: 14px; }
.fc .fc-col-header-cell-cushion { color: var(--muted); font-weight: 600; text-decoration: none; padding: 8px 4px; }
.fc .fc-daygrid-day-number { color: var(--ink); text-decoration: none; font-weight: 600; padding: 6px 8px; }
.fc .fc-day-today .fc-daygrid-day-number { background: var(--brand); color: var(--brand-text); border-radius: 999px; min-width: 28px; text-align: center; margin: 3px; padding: 3px 6px; }
.fc .fc-event { border-radius: 6px; font-weight: 600; font-size: 12.5px; padding: 1px 4px; cursor: pointer; }
.fc .ev-approved { background: var(--approved); border-color: var(--approved); color: #fff; }
.fc .ev-pending { background: repeating-linear-gradient(45deg, #fdf0d9, #fdf0d9 6px, #fbe3b8 6px, #fbe3b8 12px); border: 1px dashed var(--pending); color: #7a4a00; }
.fc .ev-pending .fc-event-title, .fc .ev-pending .fc-event-main { color: #7a4a00; }
.fc .ev-mine { box-shadow: inset 3px 0 0 var(--ink); }
.fc .ev-count { background: var(--brand-soft); border-color: var(--brand-mid); color: color-mix(in srgb, var(--brand) 75%, black); }
.fc .ev-count .fc-event-main { color: inherit; }
.fc .ev-holiday { background: color-mix(in srgb, var(--holiday) 14%, white); border-color: transparent; color: #4b3590; font-weight: 600; cursor: default; }
.fc .ev-holiday .fc-event-main { color: #4b3590; }
.fc .fc-bg-event.ev-holiday-bg { background: color-mix(in srgb, var(--holiday) 30%, white); opacity: .4; }
.fc .fc-multimonth { border: 0; }
.fc .fc-multimonth .fc-bg-event { opacity: 1; border-radius: 0; box-shadow: none; }
.fc .fc-multimonth .fc-bg-event .fc-event-title { display: none; }
.fc .fc-multimonth .fc-bg-event.ev-approved { background: color-mix(in srgb, var(--approved) 55%, white); }
.fc .fc-multimonth .fc-bg-event.ev-pending { background: color-mix(in srgb, var(--pending) 45%, white); }
.fc .fc-multimonth .fc-bg-event.ev-count { background: var(--brand-mid); }
.fc .fc-multimonth .fc-bg-event.ev-holiday { background: color-mix(in srgb, var(--holiday) 35%, white); }
.fc .fc-multimonth .fc-bg-event.ev-holiday-bg { display: none; }
.fc .fc-multimonth .fc-daygrid-day { cursor: pointer; }
.fc .fc-multimonth .fc-daygrid-day-frame { min-height: 0; }
.fc .fc-multimonth-title { font-size: 1rem; font-weight: 700; padding: 10px 0 6px; }
.fc .fc-multimonth-month { padding: 0 6px; }
.fc-theme-standard .fc-list { border-radius: var(--radius-sm); }
.fc .fc-list-day-cushion { background: var(--paper); }
.fc .fc-list-day-cushion a { color: var(--ink); text-decoration: none; font-weight: 700; }
.fc .fc-list-event { background: var(--surface) !important; border: 0; box-shadow: none; color: var(--ink); }
.fc .fc-list-event td { background: var(--surface); }
.fc .fc-list-event .fc-list-event-title, .fc .fc-list-event a { color: var(--ink); font-weight: 600; text-decoration: none; }
.fc .fc-list-event-dot { border-color: var(--approved); }
.fc .fc-list-event.ev-pending .fc-list-event-dot { border-color: var(--pending); }
.fc .fc-list-event.ev-count .fc-list-event-dot { border-color: var(--brand); }
.fc .fc-list-event.ev-holiday .fc-list-event-dot { border-color: var(--holiday); }
.fc .fc-list-event.ev-pending .fc-list-event-title::after { content: ""; }
.fc .fc-list-event:hover td { background: var(--brand-soft); }
@media (max-width: 575.98px) {
  .fc { font-size: 12.5px; }
  .fc .fc-event { font-size: 11px; padding: 0 2px; }
  .fc .fc-daygrid-day-number { padding: 3px 4px; }
  .cal-toolbar { gap: 8px; }
  .view-switch { width: 100%; display: grid !important; grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Sign-in & setup pages ---------- */
.auth-main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background:
  linear-gradient(180deg, var(--brand-soft), var(--paper) 55%); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; }
.auth-card.wide { max-width: 640px; }
.auth-logo { display: block; max-height: 64px; max-width: 260px; margin: 0 auto 22px; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: 6px; text-align: center; }
.auth-card .lead-text { text-align: center; color: var(--muted); margin-bottom: 22px; }
.auth-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px; }
.install-hint { display: none; }
.pw-wrap { position: relative; }
.pw-wrap .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: 6px 8px; }

/* Install-app prompt */
.install-banner { display: none; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; }
.install-banner.show { display: flex; }
.install-banner img { width: 40px; height: 40px; border-radius: 10px; }
.install-banner p { margin: 0; font-size: 14px; flex: 1; }