:root {
  --bg: #0b0f14;
  --surface: #121821;
  --surface-2: #192433;
  --line: #29354a;
  --line-soft: rgba(255, 255, 255, 0.12);
  --text: #f2f5fa;
  --muted: #95a0ad;
  --accent: #f5a623;
  --green: #4cd964;
  --danger: #ff6a6a;
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

body,
button,
input,
textarea,
select {
  outline: none;
}

button {
  cursor: pointer;
}

.appShell {
  min-height: 100vh;
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 12px clamp(12px, 2vw, 22px) 24px;
  position: relative;
}

.drawerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

body.settings-open .drawerBackdrop,
body.sidebar-open .drawerBackdrop,
body.feature-open .drawerBackdrop,
body.library-open .drawerBackdrop {
  opacity: 1;
  pointer-events: auto;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 320px;
  background: #0f141a;
  border-right: 1px solid var(--line);
  padding: 14px 12px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(0);
  transition: transform 0.18s ease;
}

body.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
}

body:not(.sidebar-open) .sidebar {
  pointer-events: auto;
}

.sideTop,
.sideNav,
.sideSection,
.sideProfile,
.sideChatRow,
.sideChat,
.sideRow,
.sideSearchBox,
#chatHistoryList {
  position: relative;
}

.sideTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sideProduct {
  font-size: 16px;
  font-weight: 700;
}

.sideProduct span {
  color: var(--accent);
  margin-left: 6px;
}

.sideItem,
.sideRow,
.sideChat,
.toolButton,
.voiceButton,
.modeButton,
.iconButton,
.tinyButton,
.ghostButton,
button:not(.avatar):not(.sideCollapse) {
  border: 1px solid transparent;
}

.sideItem,
.sideRow,
.chatHistoryList .sideChat {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border-radius: 10px;
  padding: 10px 10px;
  background: transparent;
  color: #dde6f2;
  border-color: rgba(255, 255, 255, 0.08);
}

.sideItem.active,
.sideItem:hover,
.sideRow:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sideSection h2 {
  margin: 6px 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.sideSection {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.chatHistoryList {
  display: grid;
  gap: 6px;
}

.sideChatRow {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.sideChatRow .sideChat {
  flex: 1;
}

.sideChatActions {
  display: inline-flex;
  gap: 4px;
}

.sideChatActions button {
  min-width: 28px;
  min-height: 28px;
  border-radius: 8px;
  background: #182330;
  border-color: #34415a;
}

.sideProfile {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profileDot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #111;
  font-weight: 750;
}

.topbar {
  min-height: 52px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.iconButton,
.tinyButton,
.toolButton,
.voiceButton,
.avatar,
.modeButton {
  border: 1px solid transparent;
  background: transparent;
  color: #d9e1ec;
}

.iconButton,
.tinyButton,
.toolButton,
.voiceButton,
.avatar {
  border-radius: 999px;
}

.iconButton {
  width: 34px;
  height: 34px;
}

.modelTitle {
  min-width: 0;
}

.modelLine {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modelSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.topActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.syncDot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px dashed #a2afbf;
  opacity: 0.8;
}

.avatar {
  width: 30px;
  height: 30px;
  background: #22314a;
  font-weight: 700;
}

.chatHero {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  min-height: min(74vh, 700px);
}

.welcomeTitle {
  margin: 8px 0 2px;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.composerCard {
  border: 1px solid var(--line);
  background: #161e27;
  border-radius: 999px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.22);
}

#query {
  min-height: 36px;
  max-height: 160px;
  border: 0;
  background: transparent;
  resize: none;
  color: var(--text);
  padding: 8px 4px 8px 2px;
  line-height: 1.4;
}

#query::placeholder {
  color: #7f8b99;
}

.composerTools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modeButton {
  min-width: 96px;
  height: 36px;
  border-radius: 999px;
  background: #202a39;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: rgba(255, 255, 255, 0.12);
  color: #bfc8d6;
}

.modeButton span {
  display: inline-block;
}

.toolButton {
  width: 33px;
  height: 33px;
}

.voiceButton {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 700;
}

.suggestions {
  width: min(860px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.suggestTitle {
  color: #9eb1c5;
  font-size: 12px;
}

.suggestion {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #181f29;
  color: #dfe7f3;
}

.suggestion:hover,
.suggestion:focus-visible {
  background: #1f2938;
}

.suggestion strong {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}

.suggestion span {
  color: var(--muted);
  font-size: 13px;
}

.statusStrip {
  margin: 4px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.statusStrip span,
.panelState {
  font-size: 12px;
  color: #a5b0bc;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
}

.outputPanel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #151d28;
  min-height: 180px;
  overflow: hidden;
}

.outputHead {
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
}

pre {
  margin: 0;
  min-height: 160px;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.toolDock {
  margin-top: 8px;
  display: grid;
  gap: 10px;
}

.toolPanel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  background: #1a2535;
}

.toolPanel summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 12px;
  border-bottom: 1px solid transparent;
}

.toolPanel summary::-webkit-details-marker {
  display: none;
}

.toolPanel[open] summary {
  border-bottom-color: var(--line-soft);
}

.toolPanel > :not(summary) {
  margin: 0 12px 12px;
}

.settingsRows,
.panelGrid {
  display: grid;
  gap: 10px;
}

label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: #d5dbe5;
}

input,
select,
textarea,
button,
#chatSearchInput,
#query {
  background: #131d2c;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 10px;
}

input:focus,
textarea:focus,
#query:focus {
  border-color: #5b6c85;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2);
}

.settingsRail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settingsRailItem {
  background: #131d2a;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 9px 12px;
  color: #dbe6f2;
}

.settingsRailItem.active,
.settingsRailItem:hover {
  border-color: var(--accent);
}

.settingsPane {
  display: none;
}

.settingsPane.active {
  display: grid;
  gap: 12px;
}

.settingsRows {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.settingsRow,
.settingsSubhead,
.toggles .toggle,
.settingsSwitch {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #151f2f;
  color: #dee6f1;
}

.settingsRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.settingsRow.tall {
  align-items: flex-start;
  flex-direction: column;
}

.settingsRow strong {
  display: block;
}

.settingsRow em,
.settingsSwitch em {
  color: #93a2b3;
  font-style: normal;
  font-size: 12px;
}

.ghostButton,
.actionButton,
button.ghost {
  background: transparent !important;
  border-color: #34445a !important;
  color: #eff3f8 !important;
}

button[data-role='danger'],
button.delete {
  background: rgba(255, 106, 106, 0.12) !important;
  border-color: rgba(255, 106, 106, 0.36) !important;
  color: #ffacac !important;
}

#intelligenceMenu,
#profileMenu {
  position: fixed;
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: #1f2837;
  min-width: 250px;
  padding: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

#intelligenceMenu[hidden],
#profileMenu[hidden] {
  display: none;
}

#intelligenceMenu.mibki-menu-open,
#profileMenu.mibki-menu-open,
body.settings-open #intelligenceMenu,
body.profile-open #profileMenu {
  display: block;
}

.intelligenceMenu,
.profileMenu,
#intelligenceMenu {
  pointer-events: auto;
}

.menuLabel {
  font-size: 12px;
  color: #aebadd;
  margin: 4px 6px 8px;
}

.intelligenceOption,
.profileMenuItem,
.profileMenuUser {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f3f6fa;
  min-height: 42px;
  padding: 8px 10px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.intelligenceOption:hover,
.profileMenuItem:hover {
  background: rgba(255, 255, 255, 0.09);
}

.intelligenceOption strong,
.profileMenuItem strong {
  color: #fff;
}

.intelligenceOption.selected,
.profileMenuItem.selected {
  background: rgba(245, 166, 35, 0.16);
  border-color: rgba(245, 166, 35, 0.45);
}

#mobileMenuRescue {
  display: none;
}

@media (max-width: 1100px) {
  .sidebar {
    width: clamp(260px, 72vw, 320px);
  }

  body:not(.sidebar-open):not(.mobile-sidebar-open) .drawerBackdrop {
    pointer-events: none;
    opacity: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --app-mobile-gap: 10px;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  body.sidebar-open .sidebar,
  body.mobile-sidebar-open .sidebar {
    transform: translateX(0);
  }

  #mobileMenuRescue {
    display: inline-flex;
    position: fixed;
    top: 8px;
    left: 8px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #1f2a3b;
    z-index: 120;
  }

  .appShell {
    width: 100%;
    padding: 10px 10px 18px;
    margin-left: 0;
  }

  .topbar {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .modelLine {
    font-size: 18px;
  }

  .modelSub {
    display: none;
  }

  .composerCard {
    border-radius: 20px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .modeButton {
    min-width: 84px;
    height: 34px;
    font-size: 14px;
  }

  .toolButton {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }

  .voiceButton {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .welcomeTitle {
    font-size: clamp(26px, 12vw, 48px);
    margin-top: 0;
  }

  #query {
    min-height: 34px;
  }

  .statusStrip,
  .suggestions,
  .outputPanel,
  .toolDock {
    width: 100%;
  }

  .settingsRailItem {
    flex: 1 1 auto;
    justify-content: center;
  }

  .outputPanel {
    margin-top: 8px;
  }

  pre {
    min-height: 140px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .modelLine {
    font-size: 16px;
  }

  .composerTools {
    gap: 6px;
  }

  .modeButton {
    min-width: 80px;
  }

  .welcomeTitle {
    font-size: 31px;
  }

  .suggestion strong {
    font-size: 14px;
  }
}



/* MIB_WORKSPACE_TOOLS_V1: native, flach, im bestehenden MIB-KI-Design */
.mibWorkspacePanel {
  position: fixed;
  z-index: 42;
  inset: 0 0 0 320px;
  overflow: auto;
  padding: 78px 28px 120px;
  color: var(--text, #f4f4f5);
  background: var(--bg, #101010);
}
.mibWorkspacePanel.hidden { display: none; }
.mibWorkspaceHeader, .mibWorkspaceHeaderActions, .mibWorkspaceTabs, .mibMailToolbar, .mibCalendarToolbar, .mibCalendarViews, .mibNativeActions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mibWorkspaceHeader { justify-content: space-between; margin: 0 auto 16px; max-width: 1180px; }
.mibWorkspaceLabel, .mibNativeSectionTitle { margin: 0 0 6px; color: var(--muted, #a1a1aa); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mibWorkspaceHeader h1 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -.03em; }
.mibWorkspaceHeader p:last-child { margin: 6px 0 0; color: var(--muted, #a1a1aa); }
.mibWorkspaceHeaderActions button, .mibWorkspaceTabs button, .mibMailToolbar button, .mibNativeActions button, .mibCalendarToolbar button, .mibEventForm button, .mibNativeMeta button, .mibFritzStatus button, .mibNativeFritz button {
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 12px;
  background: var(--surface-2, rgba(255,255,255,.06));
  color: inherit;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
  font: inherit;
}
.mibWorkspaceTabs { max-width: 1180px; margin: 0 auto 18px; border-bottom: 1px solid var(--line, rgba(255,255,255,.1)); }
.mibWorkspaceTabs button { border: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--muted, #a1a1aa); }
.mibWorkspaceTabs button.active { color: var(--text, #fff); background: var(--surface, rgba(255,255,255,.07)); }
.mibWorkspaceContent { max-width: 1180px; margin: 0 auto; }
.mibNativeLoading, .mibMailEmpty, .mibMailReader, .mibCompose, .mibNativeMeta, .mibCalendarMain, .mibCalendarSide section, .mibFritzStatus, .mibFritzGrid section {
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 16px;
  background: var(--surface, rgba(255,255,255,.045));
}
.mibNativeLoading { padding: 24px; color: var(--muted, #a1a1aa); }
.mibNativeMail { display: grid; grid-template-columns: 190px minmax(300px, 1fr) minmax(340px, .9fr); gap: 14px; align-items: start; }
.mibMailFolders, .mibMailList, .mibMailRight, .mibAgendaList, .mibFritzGrid, .mibFritzGrid section { display: grid; gap: 10px; }
.mibMailFolders { border-right: 1px solid var(--line, rgba(255,255,255,.08)); padding-right: 12px; }
.mibMailFolders button, .mibMailRow {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
  font: inherit;
}
.mibMailFolders button { display: flex; justify-content: space-between; color: var(--muted, #a1a1aa); }
.mibMailFolders button.active, .mibMailRow.active { background: var(--surface-2, rgba(255,255,255,.08)); color: var(--text, #fff); }
.mibMailToolbar { margin-bottom: 12px; }
.mibMailToolbar input, .mibCompose input, .mibCompose textarea, .mibEventForm input, .mibEventForm textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  color: inherit;
  min-height: 40px;
  padding: 10px 12px;
  font: inherit;
}
.mibMailToolbar input { flex: 1; }
.mibMailRow { border: 1px solid var(--line, rgba(255,255,255,.08)); background: var(--surface, rgba(255,255,255,.035)); margin-bottom: 8px; }
.mibMailRow strong, .mibMailRow span, .mibMailRow em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mibMailRow span, .mibMailRow em, .mibMailReader p, .mibMailReader dd, .mibMailBody, .mibNativeMeta span, .mibMailEmpty span, .mibAgendaList span, .mibFritzGrid span, .mibFritzStatus span { color: var(--muted, #a1a1aa); }
.mibMailRow em { font-style: normal; margin-top: 4px; }
.mibMailRow.unread { border-color: rgba(245,166,35,.45); }
.mibMailEmpty { padding: 18px; }
.mibMailEmpty strong, .mibMailEmpty span { display: block; }
.mibMailReader, .mibCompose, .mibNativeMeta { padding: 16px; }
.mibMailReader h2 { margin: 0 0 12px; font-size: 20px; }
.mibMailReader dl { display: grid; grid-template-columns: 48px 1fr; gap: 6px 10px; margin: 0 0 12px; }
.mibMailReader dt { color: var(--muted, #a1a1aa); }
.mibMailBody { min-height: 88px; white-space: pre-wrap; }
.mibCompose { display: grid; gap: 8px; }
.mibCompose textarea, .mibEventForm textarea { min-height: 96px; resize: vertical; }
.mibNativeMeta { display: flex; flex-wrap: wrap; gap: 8px; }
.mibNativeMeta .mibNativeSectionTitle { flex-basis: 100%; }
.mibNativeMeta span { display: inline-flex; border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 999px; padding: 7px 10px; }
.mibNativeCalendar { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; }
.mibCalendarMain, .mibCalendarSide section { padding: 16px; }
.mibCalendarToolbar { justify-content: space-between; margin-bottom: 14px; }
.mibCalendarToolbar strong { text-transform: capitalize; }
.mibCalendarViews button.active { background: var(--text, #fff); color: var(--bg, #111); }
.mibWeekdays, .mibCalendarGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mibWeekdays { color: var(--muted, #a1a1aa); font-size: 12px; margin-bottom: 8px; }
.mibCalCell {
  min-height: 98px;
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  color: inherit;
  padding: 9px;
  text-align: left;
  font: inherit;
}
.mibCalCell.blank { opacity: .25; pointer-events: none; }
.mibCalCell b, .mibCalCell span { display: block; }
.mibCalCell span { margin-top: 5px; padding: 4px 6px; border-radius: 8px; background: rgba(245,166,35,.14); color: #f6c177; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mibAgendaList article, .mibFritzGrid article {
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.14);
}
.mibAgendaList b, .mibAgendaList span, .mibFritzGrid b, .mibFritzGrid span { display: block; }
.mibEventForm { display: grid; gap: 8px; }
.mibNativeFritz { display: grid; gap: 14px; }
.mibFritzStatus { padding: 18px; }
.mibFritzStatus p { margin: 0 0 6px; color: var(--muted, #a1a1aa); }
.mibFritzStatus h2 { margin: 0 0 8px; }
.mibFritzStatus.ok { border-color: rgba(48,209,88,.35); }
.mibFritzStatus.wait { border-color: rgba(255,204,0,.25); }
.mibFritzGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mibFritzGrid section { padding: 16px; }
.mibWorkspaceToast {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 90;
  opacity: 0;
  transform: translateY(8px);
  transition: .18s ease;
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 12px;
  background: var(--surface-2, #222);
  color: var(--text, #fff);
  padding: 10px 12px;
}
.mibWorkspaceToast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 980px) {
  .mibWorkspacePanel { inset: 0; padding: 74px 14px 110px; z-index: 58; }
  .mibWorkspaceHeader { align-items: flex-start; }
  .mibWorkspaceHeaderActions { flex-wrap: wrap; justify-content: flex-end; }
  .mibNativeMail, .mibNativeCalendar, .mibFritzGrid { grid-template-columns: 1fr; }
  .mibMailFolders { display: flex; overflow-x: auto; border-right: 0; padding-right: 0; padding-bottom: 4px; }
  .mibMailFolders button { min-width: max-content; }
  .mibCalendarToolbar { align-items: flex-start; flex-direction: column; }
  .mibCalCell { min-height: 64px; }
  .mibCalCell span { display: none; }
}
@media (max-width: 560px) {
  .mibWorkspaceHeader { display: block; }
  .mibWorkspaceHeaderActions { margin-top: 12px; }
  .mibWorkspaceTabs { overflow-x: auto; }
  .mibMailToolbar { display: grid; grid-template-columns: 1fr; }
  .mibWeekdays, .mibCalendarGrid { gap: 4px; }
  .mibCalCell { border-radius: 9px; padding: 6px; }
}