:root {
    --mobile-bg: #eef5f0;
    --mobile-card: rgba(255, 255, 255, .94);
    --mobile-line: #d9e6db;
    --mobile-text: #19382b;
    --mobile-muted: #66796d;
    --mobile-primary: #1e7147;
    --mobile-primary-dark: #155434;
    --mobile-secondary: #deeee4;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(30, 113, 71, .12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(201, 137, 35, .14), transparent 26%),
        linear-gradient(180deg, #f8fbf9 0%, var(--mobile-bg) 100%);
    color: var(--mobile-text);
    font-family: "Segoe UI", Tahoma, sans-serif;
}

.mobile-shell {
    width: min(100%, 460px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 12px 10px 24px;
    overflow-x: clip;
}

.mobile-shell [hidden] {
    display: none !important;
}

.mobile-shell .brand {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 16px 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(30, 113, 71, .22);
    text-align: center;
}

.mobile-shell .brand h1 {
    margin: 0;
    color: var(--mobile-text);
    font-size: 14px;
    line-height: 1.1;
}

.mobile-shell .brand-logo-frame {
    width: min(86vw, 330px);
    aspect-ratio: 5 / 1;
    overflow: hidden;
}

.mobile-shell .brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    transform: translateX(18%);
}

.mobile-shell .eyebrow {
    color: var(--mobile-primary);
    font-family: "Segoe UI", Tahoma, sans-serif;
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.mobile-shell .brand .service-status {
    margin: 0;
    font-size: 14px;
}

.mobile-shell .panel {
    display: grid;
    gap: 8px;
    padding: 13px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--mobile-line);
    border-radius: 18px;
    background: var(--mobile-card);
    box-shadow: 0 8px 20px rgba(25, 56, 43, .08);
}

.mobile-shell .panel p {
    margin: 0;
}

.mobile-shell h2 {
    margin-bottom: 0;
    font-size: 20px;
    color: var(--mobile-text);
}

.mobile-shell .account-panel {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.mobile-shell .grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.mobile-shell .grid .panel {
    min-height: 0;
}

.mobile-shell label {
    gap: 6px;
    color: var(--mobile-muted);
    font-size: 13px;
    font-weight: 700;
}

.mobile-shell input,
.mobile-shell textarea,
.mobile-shell select {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mobile-line);
    border-radius: 14px;
    background: #fff;
    color: var(--mobile-text);
}

.mobile-shell button {
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mobile-primary) 0%, #3f9567 100%);
    color: #fff;
    font-family: inherit;
}

.mobile-shell button.secondary {
    border: 1px solid var(--mobile-line);
    background: transparent;
    color: var(--mobile-text);
}

.mobile-shell .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 112px));
}

.mobile-shell .summary {
    gap: 7px 12px;
    padding: 10px;
    border: 1px solid var(--mobile-line);
    border-radius: 16px;
    background: #fbfdfb;
}

.mobile-shell .leave-form {
    grid-template-columns: 1fr;
}

.mobile-shell .leave-form .wide,
.mobile-shell .leave-form button {
    grid-column: auto;
}

.mobile-shell .message {
    margin: 0 4px;
    color: #9f3f2a;
}

.mobile-shell .mobile-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-shell .mobile-panel-heading > div {
    display: grid;
    gap: 4px;
}

.mobile-shell .mobile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(30, 113, 71, .1);
    color: var(--mobile-primary-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mobile-shell .mobile-menu-panel {
    gap: 10px;
    padding: clamp(10px, 2.8vw, 14px);
    background: linear-gradient(180deg, #fff 0%, #f7fbf8 100%);
}

.mobile-shell .mobile-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 2vw, 10px);
}

.mobile-shell .mobile-menu-button {
    display: grid;
    grid-template-rows: auto auto;
    gap: 2px;
    align-content: center;
    justify-items: start;
    min-height: 0;
    min-height: 64px;
    padding: clamp(10px, 2.8vw, 14px) clamp(10px, 2.6vw, 12px);
    border: 1px solid color-mix(in srgb, var(--mobile-line) 88%, #cfe3d6);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,251,247,.96) 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 16px rgba(16, 56, 34, 0.04);
    color: var(--mobile-text);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.mobile-shell .mobile-menu-button:active {
    transform: scale(0.985);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 3px 10px rgba(16, 56, 34, 0.05);
}

.mobile-shell .mobile-menu-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mobile-primary-dark) 55%, white);
    outline-offset: 2px;
}

/* no initials / badge icons */
.mobile-shell .mobile-menu-button > span { display: none !important; }

.mobile-shell .mobile-menu-button strong {
    color: var(--mobile-primary-dark);
    font-size: clamp(13px, 3.7vw, 15px);
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.mobile-shell .mobile-menu-button small {
    color: var(--mobile-muted);
    font-size: clamp(10px, 2.9vw, 11.5px);
    line-height: 1.25;
    font-weight: 500;
}

/* third card full width on 2-col grid for balanced home */
.mobile-shell .mobile-app-grid .mobile-menu-button:last-child {
    grid-column: 1 / -1;
}

/* very narrow phones */
@media (max-width: 360px) {
    .mobile-shell .mobile-app-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .mobile-shell .mobile-app-grid .mobile-menu-button:last-child {
        grid-column: auto;
    }
    .mobile-shell .mobile-menu-button {
        min-height: 56px;
        padding: 10px 12px;
    }
}

/* comfortable phones / large */
@media (min-width: 420px) {
    .mobile-shell .mobile-menu-button {
        min-height: 70px;
    }
}

/* tablet-ish mobile shell */
@media (min-width: 600px) {
    .mobile-shell .mobile-app-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    .mobile-shell .mobile-app-grid .mobile-menu-button:last-child {
        grid-column: auto;
    }
}
.mobile-shell .mobile-back-button { min-height: 38px; padding: 8px 12px; font-size: 12px; }

.mobile-shell .mobile-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mobile-shell .mobile-metric { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--mobile-line); border-radius: 14px; background: #fbfdfb; }
.mobile-shell .mobile-metric span { color: var(--mobile-muted); font-size: 10px; }
.mobile-shell .mobile-metric strong { color: var(--mobile-primary-dark); font-size: 17px; }
.mobile-shell .mobile-history { display: grid; gap: 8px; }
.mobile-shell .mobile-history-item { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--mobile-line); border-radius: 14px; background: #fbfdfb; }
.mobile-shell .mobile-history-item strong { font-size: 13px; }
.mobile-shell .mobile-history-item small { color: var(--mobile-muted); font-size: 11px; }

.mobile-shell .table-wrap {
    margin: 0 -4px;
    padding: 0 4px;
}

.mobile-shell table {
    min-width: 540px;
}

@media (min-width: 800px) {
    .mobile-shell {
        width: min(100% - 32px, 760px);
        padding-top: 32px;
    }

    .mobile-shell .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* mobile-pontaj-history-v1 */
.mobile-shell .mobile-panel-sub {
  margin: 4px 0 0;
  color: var(--mobile-muted, #5b7264);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.mobile-shell .mobile-panel-heading-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
  align-content: start;
}
.mobile-shell .mobile-month-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e8f5ec;
  color: #1c7147;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}
.mobile-shell .mobile-pontaj-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.mobile-shell .mobile-metric {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--mobile-line, #d7e3da);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(23, 56, 40, 0.04);
}
.mobile-shell .mobile-metric-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5b7264;
}
.mobile-shell .mobile-metric strong {
  font-size: 22px;
  line-height: 1.1;
  color: #173828;
  font-variant-numeric: tabular-nums;
}
.mobile-shell .mobile-metric-hint {
  font-size: 11px;
  color: var(--mobile-muted, #6b7f72);
  font-weight: 600;
}
.mobile-shell .mobile-metric.tone-work { background: linear-gradient(180deg, #f3fbf5 0%, #fff 100%); border-color: #b9dfc6; }
.mobile-shell .mobile-metric.tone-days { background: linear-gradient(180deg, #f4f8fd 0%, #fff 100%); border-color: #c5d8ef; }
.mobile-shell .mobile-metric.tone-ot { background: linear-gradient(180deg, #fff8ef 0%, #fff 100%); border-color: #f0d39a; }
.mobile-shell .mobile-metric.tone-avg { background: linear-gradient(180deg, #fbfdfb 0%, #fff 100%); }

.mobile-shell .mobile-pontaj-history {
  display: grid;
  gap: 10px;
}
.mobile-shell .mobile-history-empty {
  padding: 18px 14px;
  border: 1px dashed var(--mobile-line, #d7e3da);
  border-radius: 16px;
  text-align: center;
  color: var(--mobile-muted, #5b7264);
  font-weight: 650;
  background: #f7faf7;
}
.mobile-shell .mobile-history-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--mobile-line, #d7e3da);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 56, 40, 0.05);
}
.mobile-shell .mobile-history-card.is-open { border-color: #f0d39a; background: linear-gradient(180deg, #fffaf0 0%, #fff 70%); }
.mobile-shell .mobile-history-card.is-overtime { border-color: #f0d39a; }
.mobile-shell .mobile-history-card.is-under { border-color: #f0c7c2; }
.mobile-shell .mobile-history-card.is-ok { border-color: #cfe6d7; }
.mobile-shell .mobile-history-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mobile-shell .mobile-history-date {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #173828;
  line-height: 1.25;
}
.mobile-shell .mobile-history-interval {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: #456353;
  font-variant-numeric: tabular-nums;
}
.mobile-shell .mobile-history-hours {
  text-align: right;
  min-width: 64px;
}
.mobile-shell .mobile-history-hours strong {
  display: block;
  font-size: 20px;
  line-height: 1;
  color: #1c7147;
  font-variant-numeric: tabular-nums;
}
.mobile-shell .mobile-history-hours span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #5b7264;
}
.mobile-shell .mobile-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mobile-shell .mobile-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
}
.mobile-shell .mobile-pill.is-ok { background: #e4f4e8; color: #1c7147; border-color: #b9dfc6; }
.mobile-shell .mobile-pill.is-open { background: #fff3dc; color: #8a5a00; border-color: #f0d39a; }
.mobile-shell .mobile-pill.is-overtime { background: #fff3dc; color: #8a5a00; border-color: #f0d39a; }
.mobile-shell .mobile-pill.is-under { background: #fde9e7; color: #a33b32; border-color: #f0c7c2; }
.mobile-shell .mobile-pill.is-missing,
.mobile-shell .mobile-pill.is-absent { background: #eef2f0; color: #5b7264; border-color: #d7e0d9; }
.mobile-shell .mobile-pill.is-ot { background: #1c7147; color: #fff; border-color: #1c7147; }
.mobile-shell .mobile-pill.source.is-mobile { background: #eef6ff; color: #1d4f91; border-color: #c5d8ef; }
.mobile-shell .mobile-pill.source.is-manual { background: #f4eefe; color: #6b3fa0; border-color: #d8c7ef; }
.mobile-shell .mobile-pill.source.is-other { background: #eef2f0; color: #456353; border-color: #d7e0d9; }
.mobile-shell .mobile-history-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 2px;
  border-top: 1px solid #e7eee9;
}
.mobile-shell .mobile-history-details > div {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #f7faf7;
}
.mobile-shell .mobile-history-details span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7f72;
}
.mobile-shell .mobile-history-details strong {
  font-size: 13px;
  font-weight: 800;
  color: #173828;
  font-variant-numeric: tabular-nums;
}


/* mobile-duration-hm */
.mobile-shell .mobile-history-hours {
  min-width: 78px;
}
.mobile-shell .mobile-history-hours strong {
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mobile-shell .mobile-metric strong {
  font-size: 18px;
  letter-spacing: -0.01em;
}
.mobile-shell .mobile-history-details strong {
  font-size: 12.5px;
  white-space: nowrap;
}


/* mobile-history-net-work */
.mobile-shell .mobile-history-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-shell .mobile-history-detail-wide {
  grid-column: 1 / -1;
  background: #eef7f1 !important;
}
.mobile-shell .mobile-history-detail-wide strong {
  color: #1c7147;
}


/* mobile-history-punches */
.mobile-shell .mobile-history-punches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mobile-shell .mobile-history-punches > div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f3f7f4;
  border: 1px solid #dce8e0;
}
.mobile-shell .mobile-history-punches span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7f72;
}
.mobile-shell .mobile-history-punches strong {
  font-size: 18px;
  font-weight: 800;
  color: #173828;
  font-variant-numeric: tabular-nums;
}
.mobile-shell .mobile-history-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff8e8;
  color: #7a5a10;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.35;
}


/* mobile-ot-note */
.mobile-shell .mobile-history-note.is-ot-note {
  background: #eef7f1;
  color: #1c7147;
}


/* mobile-month-card-v1 */
.mobile-shell .mobile-month-card {
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbf8 0%, #ffffff 48%);
  box-shadow: 0 10px 24px rgba(23, 56, 40, 0.05);
}
.mobile-shell .mobile-month-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mobile-shell .mobile-month-card .eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.mobile-shell .mobile-month-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 800;
  color: #173828;
  text-transform: capitalize;
}
.mobile-shell .mobile-month-ot-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #1c7147;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.mobile-shell .mobile-month-ot-badge.is-zero {
  background: #e8f0ea;
  color: #5b7264;
}
.mobile-shell .mobile-month-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mobile-shell .mobile-month-stat {
  display: grid;
  gap: 2px;
  padding: 8px 8px 9px;
  border-radius: 12px;
  border: 1px solid #dce8e0;
  background: #fff;
  min-width: 0;
}
.mobile-shell .mobile-month-stat.is-wide {
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(90deg, #fff8ef 0%, #fff 70%);
  border-color: #f0d39a;
}
.mobile-shell .mobile-month-stat span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7f72;
}
.mobile-shell .mobile-month-stat strong {
  font-size: 16px;
  line-height: 1.1;
  font-weight: 800;
  color: #173828;
  font-variant-numeric: tabular-nums;
}
.mobile-shell .mobile-month-stat.is-wide strong {
  font-size: 18px;
  color: #8a5a00;
}
.mobile-shell .mobile-month-stat.tone-done {
  border-color: #cfe6d7;
  background: #f3fbf5;
}
.mobile-shell .mobile-month-stat.tone-open {
  border-color: #f0d39a;
  background: #fffaf0;
}
.mobile-shell .mobile-month-stat.tone-in {
  border-color: #c5d8ef;
  background: #f5f9fd;
}
.mobile-shell .mobile-month-stat.tone-muted strong {
  color: #5b7264;
}
.mobile-shell .mobile-month-stat.tone-ot.is-wide {
  background: linear-gradient(90deg, #fff3dc 0%, #fff 75%);
}


/* ===== Mobile Zile legale (compact + no overflow) ===== */
.mobile-shell .mobile-holiday-module {
  overflow-x: hidden;
  max-width: 100%;
}

.mobile-shell .mobile-holiday-module .mobile-panel-heading {
  gap: 8px;
  align-items: flex-start;
}

.mobile-shell .mobile-holiday-module .mobile-panel-heading h2 {
  font-size: clamp(17px, 4.6vw, 20px);
  line-height: 1.2;
}

.mobile-shell .mobile-holiday-module .mobile-module-lead {
  margin: 2px 0 0;
  color: var(--mobile-muted);
  font-size: clamp(10px, 2.8vw, 11.5px);
  line-height: 1.3;
}

.mobile-shell .mobile-holiday-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
}

.mobile-shell .mobile-holiday-metrics .mobile-metric {
  min-width: 0;
  min-height: 0;
  padding: 8px 9px;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

.mobile-shell .mobile-holiday-metrics .mobile-metric-label {
  font-size: 9px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-shell .mobile-holiday-metrics .mobile-metric strong {
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell .mobile-holiday-metrics .mobile-metric-hint {
  font-size: 9.5px;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mobile-shell .mobile-holiday-meta {
  margin: 6px 1px 0;
  color: var(--mobile-muted);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mobile-shell .mobile-holiday-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
}

.mobile-shell .mobile-holiday-month {
  margin: 6px 1px 0;
  padding: 0 1px;
  color: var(--mobile-primary-dark);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.mobile-shell .mobile-holiday-month:first-child {
  margin-top: 0;
}

.mobile-shell .mobile-holiday-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--mobile-line) 90%, #c9dfd1);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f8fcf9 100%);
  box-shadow: none;
  overflow: hidden;
}

.mobile-shell .mobile-holiday-card.is-today {
  border-color: #9fd0ae;
  background: linear-gradient(180deg, #eef9f1 0%, #fff 72%);
}

.mobile-shell .mobile-holiday-card.is-past {
  opacity: 0.7;
}

.mobile-shell .mobile-holiday-card.is-upcoming {
  border-color: #d7e8dc;
}

.mobile-shell .mobile-holiday-card-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.mobile-shell .mobile-holiday-date {
  color: var(--mobile-primary-dark);
  font-size: clamp(12px, 3.3vw, 13.5px);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell .mobile-holiday-name {
  color: var(--mobile-muted);
  font-size: clamp(10.5px, 2.9vw, 12px);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell .mobile-holiday-card-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  flex-shrink: 0;
}

.mobile-shell .mobile-holiday-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 9px;
  background: #eef6f0;
  color: var(--mobile-primary-dark);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mobile-shell .mobile-holiday-card.is-today .mobile-holiday-daynum {
  background: #d9f0e0;
}

.mobile-shell .mobile-holiday-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.mobile-shell .mobile-holiday-badge.is-auto {
  background: #eef5ff;
  color: #2f5f9a;
}

.mobile-shell .mobile-holiday-badge.is-manual {
  background: #fff4df;
  color: #8a5a12;
}

.mobile-shell .mobile-holiday-empty {
  padding: 14px 10px;
  text-align: center;
  border: 1px dashed var(--mobile-line);
  border-radius: 12px;
  background: #fbfdfb;
  color: var(--mobile-muted);
  font-size: 12px;
}

/* never force 4 columns on phone widths */
@media (min-width: 720px) {
  .mobile-shell .mobile-holiday-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}