:root {
  --color-primary: #1a365d;
  --color-primary-light: #2c5282;
  --color-primary-dark: #0f2744;
  --color-accent: #b8860b;
  --color-accent-muted: rgba(184, 134, 11, 0.15);
  --color-bg: #f2f2f7;
  --color-bg-card: #ffffff;
  --color-bg-header: #1a365d;
  --color-text: #1c1c1e;
  --color-text-muted: #8e8e93;
  --color-border: rgba(60,60,67,.12);
  --color-border-focus: #007aff;
  --color-success-bg: rgba(52,199,89,.14);
  --color-success: #248a3d;
  --color-error-bg: rgba(255,59,48,.12);
  --color-error: #d70015;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06);
  --radius: 12px;
  --radius-lg: 16px;
  --ios-blur: blur(20px) saturate(1.4);
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-bg-card: #1c1c1e;
  --color-bg-header: #1c1c1e;
  --color-text: #f5f5f7;
  --color-text-muted: #98989d;
  --color-border: rgba(84,84,88,.45);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Global subtle watermark bottom-left */
body::after {
  content: "";
  position: fixed;
  left: 10px;
  bottom: 8px;
  width: min(22vw, 220px);
  height: min(22vw, 220px);
  background: url("/assets/hestia_bg.avif") no-repeat left bottom / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] body::after {
  opacity: 0.05;
}

.skipLink {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 9999;
  background: var(--color-primary);
  color: #fff;
  padding: 0.6rem 0.8rem;
  border-radius: 0 8px 8px 0;
}
.skipLink:focus { left: 0; }

.main-header {
  background: rgba(26,54,93,.82);
  backdrop-filter: var(--ios-blur);
  -webkit-backdrop-filter: var(--ios-blur);
  color: #fff;
  box-shadow: 0 0.5px 0 rgba(0,0,0,.15);
  position: sticky;
  top: 0;
  z-index: 100;
}
[data-theme="dark"] .main-header {
  background: rgba(28,28,30,.78);
  box-shadow: 0 0.5px 0 rgba(255,255,255,.08);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  transition: opacity .15s ease;
}
.logo:hover { opacity: .85; }
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-accent);
}
.logo-img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 10px;
}
.logo-text { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

/* Avatar presentation: always round and distortion-free */
.headerAvatar,
.avatarList {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
  display: inline-block;
}
.headerAvatar.avatarPhWrap,
.avatarList.avatarPhWrap {
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  overflow: hidden;
}
.avatarZoomWrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 50%;
}
.avatarZoomable {
  cursor: zoom-in;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.avatarZoomWrap:hover .avatarZoomable {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.22);
  filter: saturate(1.04);
}
.avatarZoomIcon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(15, 23, 42, 0.68);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.avatarZoomWrap:hover .avatarZoomIcon {
  opacity: 1;
  transform: translateY(0);
}
.avatarLightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(8, 12, 20, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.avatarLightbox.isOpen {
  display: flex;
}
.avatarLightboxInner {
  position: relative;
  max-width: min(86vw, 900px);
  max-height: 86vh;
}
.avatarLightboxImg {
  max-width: 100%;
  max-height: 86vh;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: block;
}
.avatarLightboxClose {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(120,120,128,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.avatarLightboxClose:hover {
  background: rgba(120,120,128,.7);
  transform: scale(1.08);
}
.btnIconOnly {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.residentModal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(8, 12, 20, 0.66);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.residentModal.isOpen {
  display: flex;
}
.residentModalPanel {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  background: var(--color-bg-card);
  border: none;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.08);
  padding: 16px;
}
[data-theme="dark"] .residentModalPanel {
  background: #2c2c2e;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.participantSaveDock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.participantSaveDock .btn {
  padding: 12px 32px;
  font-size: 15px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.participantSaveSpacer {
  height: 78px;
}

/* ── Medizin-Seite: 2-spaltig mit Sidebar rechts ────────── */
.medPageLayout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
}
.medPageContent {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
}
.medSection {
  scroll-margin-top: 24px;
  margin-bottom: 18px;
}
.medSideNav {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(244, 244, 248, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 8px;
}
[data-theme="dark"] .medSideNav {
  background: rgba(44, 44, 46, 0.8);
}
.medSideNavItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #3c3c43;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s ease;
  cursor: pointer;
}
[data-theme="dark"] .medSideNavItem {
  color: #e5e5ea;
}
.medSideNavItem:hover {
  background: rgba(120, 120, 128, 0.12);
}
.medSideNavItem.isActive {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  font-weight: 600;
  color: #007aff;
}
[data-theme="dark"] .medSideNavItem.isActive {
  background: rgba(120, 120, 128, 0.24);
  color: #0a84ff;
}
.medSideNavIcon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.medSideNavLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .medPageLayout {
    grid-template-columns: 1fr;
  }
  .medSideNav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding: 4px;
    border-radius: 12px;
    order: -1;
  }
  .medSideNavItem {
    padding: 8px 10px;
    font-size: 12px;
    gap: 6px;
    flex-shrink: 0;
  }
  .medSideNavLabel {
    display: none;
  }
  .medSideNavIcon {
    font-size: 20px;
  }
}

/* ── Konten / Kontoauszug ─────────────────────────────── */
.accountBalanceCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(26, 54, 93, 0.25);
}
[data-theme="dark"] .accountBalanceCard {
  background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.accountBalanceInner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.accountBalanceLabel {
  font-size: 13px;
  font-weight: 500;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.accountBalanceAmount {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.accountBalanceAmount.txNeg { color: #fca5a5; }
.accountBalanceAmount.txPos { color: #86efac; }
.accountAddBtn {
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.accountBalanceCardInline {
  border-radius: 0;
  box-shadow: none;
  padding: 20px 24px;
  margin: 0;
}
.accountStatement {
  padding: 0;
  overflow: hidden;
}
.accountTxTable {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.accountTxTable thead th {
  background: rgba(244, 244, 248, 0.95);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #8e8e93;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 2;
}
[data-theme="dark"] .accountTxTable thead th {
  background: rgba(44, 44, 46, 0.95);
  color: #98989d;
}
.accountTxRow {
  border-bottom: 1px solid var(--color-border);
  transition: background .15s ease;
}
.accountTxRow:hover {
  background: rgba(0, 122, 255, 0.04);
}
.accountTxRow td {
  padding: 12px 14px;
  font-size: 14px;
  vertical-align: middle;
}
.accountTxDate {
  white-space: nowrap;
  color: #8e8e93;
  font-size: 13px !important;
  width: 95px;
}
.accountTxPurpose {
  font-weight: 500;
}
.accountTxAmount {
  white-space: nowrap;
  font-weight: 600;
  text-align: right;
  width: 120px;
}
.accountTxSaldo {
  white-space: nowrap;
  font-weight: 600;
  text-align: right;
  width: 120px;
  color: #3c3c43;
}
[data-theme="dark"] .accountTxSaldo { color: #e5e5ea; }
.accountTxUser {
  text-align: center;
  width: 60px;
  font-size: 12px;
  font-weight: 700;
  color: #8e8e93;
  letter-spacing: .3px;
}
.txPos { color: #248a3d; }
.txNeg { color: #d70015; }
[data-theme="dark"] .txPos { color: #30d158; }
[data-theme="dark"] .txNeg { color: #ff453a; }
.txReceiptLink {
  margin-left: 6px;
  text-decoration: none;
  font-size: 15px;
  opacity: .7;
  transition: opacity .15s;
}
.txReceiptLink:hover { opacity: 1; }
.accountTxTypeRow {
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--color-border);
  margin-bottom: 4px;
}
.accountTxTypeBtn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all .2s ease;
  color: #8e8e93;
}
.accountTxTypeBtn.isActive[data-type="expense"] {
  background: #fee2e2;
  color: #d70015;
}
.accountTxTypeBtn.isActive[data-type="income"] {
  background: #dcfce7;
  color: #248a3d;
}
.accountTxTypeBtn:hover:not(.isActive) {
  background: rgba(120, 120, 128, 0.08);
}
@media (max-width: 640px) {
  .accountBalanceCard {
    padding: 18px 20px;
  }
  .accountBalanceAmount {
    font-size: 26px;
  }
  .accountTxRow td {
    padding: 10px 8px;
    font-size: 13px;
  }
  .accountTxSaldo {
    display: none;
  }
}

.main-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 200px;
  flex-wrap: wrap;
  align-items: center;
}
.main-nav a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
.main-nav a:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.main-nav a[aria-current="page"] {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
}

.header-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.header-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-weight: 600; font-size: 14px; }
.user-role-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  padding: 2px 8px;
}

/* === iOS-style Subnav (2nd level) === */
.dashboard-subnav {
  background: rgba(242,242,247,.78);
  backdrop-filter: var(--ios-blur);
  -webkit-backdrop-filter: var(--ios-blur);
  border-bottom: 0.5px solid rgba(60,60,67,.12);
}
[data-theme="dark"] .dashboard-subnav {
  background: rgba(28,28,30,.72);
  border-bottom-color: rgba(84,84,88,.35);
}
.subnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dashboard-subnav a {
  text-decoration: none;
  color: var(--color-text);
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
.dashboard-subnav a:hover {
  background: rgba(60,60,67,.08);
}
.dashboard-subnav a.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(26,54,93,.2);
}
[data-theme="dark"] .dashboard-subnav a:hover {
  background: rgba(120,120,128,.16);
}
[data-theme="dark"] .dashboard-subnav a.active {
  background: rgba(10,132,255,.28);
  color: #fff;
  box-shadow: none;
}

.main-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
}

.settingsShell {
  display: grid;
  gap: 1rem;
}
.settingsShellParticipant {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.settingsShellParticipant .settingsNav {
  display: grid;
  gap: 8px;
  position: sticky;
  top: 24px;
}
.settingsShellParticipant .settingsNav a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  font-weight: 600;
}
.settingsShellParticipant .settingsNav a:hover {
  border-color: rgba(26, 54, 93, 0.32);
  background: #f8fafc;
}
[data-theme="dark"] .settingsShellParticipant .settingsNav a:hover {
  background: #2d3748;
}
/* ── Participant Tab Bar (iOS Segmented Control) ── */
.participantTabBar {
  display: flex;
  gap: 0;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 10px;
  padding: 2px;
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
}
[data-theme="dark"] .participantTabBar {
  background: rgba(118, 118, 128, 0.24);
}
.participantTab {
  flex: 1;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  border-radius: 8px;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
  letter-spacing: -0.01em;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}
.participantTab:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .participantTab:hover {
  background: rgba(255, 255, 255, 0.06);
}
.participantTabActive {
  background: var(--color-bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}
.participantTabActive:hover {
  background: var(--color-bg-card);
  color: var(--color-text);
}
[data-theme="dark"] .participantTabActive {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .participantTabActive:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-text);
}
.participantTabContent {
  max-width: none;
  margin-top: 10px;
}
.participantTabPane {
  display: none;
  animation: ptFadeIn .25s ease;
}
.participantTabPane.isActive {
  display: block;
}
@keyframes ptFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.participantScroll {
  display: grid;
  gap: 20px;
}
.participantScroll .card {
  margin-bottom: 0;
}
.participantSection {
  scroll-margin-top: 110px;
  display: grid;
  gap: 20px;
}
.participantSection .card {
  margin-bottom: 0;
}
.settingsMain {
  max-width: 900px;
}
.settingsShellParticipant .settingsMain {
  max-width: none;
}

.formCardNarrow {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 28px;
}
.formGrid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (min-width: 901px) {
  .formGrid2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .formGrid2 .formColFull {
    grid-column: 1 / -1;
  }
}
.formGrid2 .formColFull {
  grid-column: 1 / -1;
}
.formHelperText {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.formHelperTextTight {
  margin-top: -8px;
}
.formActionsEnd {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.avatarDrop {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 0.65rem 0.8rem;
  color: var(--color-text-muted);
  background: rgba(26, 54, 93, 0.03);
}
.avatarDrop.isDrag {
  border-color: var(--color-primary);
  background: rgba(26, 54, 93, 0.08);
}
.avatarUploaderCard {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 24px;
}
.avatarEditorForm {
  display: grid;
  gap: 12px;
}
.avatarEditorPanel {
  display: grid;
  grid-template-columns: 320px minmax(220px, 1fr);
  gap: 24px;
  align-items: start;
}
.avatarEditorCanvasWrap {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #111827;
}
.avatarEditorCanvasWrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.avatarEditorCanvasWrap canvas:active { cursor: grabbing; }
.avatarEditorOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 58%, rgba(0,0,0,0.38) 59%);
}
.avatarEditorControls {
  display: grid;
  gap: 12px;
}
.avatarEditorControls .row { justify-content: flex-start; }
.avatarPreviewSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.avatarPreviewPair {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.avatarPreviewCircle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: #e5e7eb;
  background-size: cover;
  background-position: center;
}
.avatarPreviewGhost {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px dashed var(--color-border);
  background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 8px, #e2e8f0 8px, #e2e8f0 16px);
}
.avatarActions {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

.card {
  background: var(--color-bg-card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 14px;
}
[data-theme="dark"] .card {
  background: rgba(44,44,46,.6);
  box-shadow: none;
}

h1, h2, h3 { color: var(--color-text); margin-top: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
.card h2 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.muted { color: var(--color-text-muted); }

.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.tableWrap, .table-responsive { width: 100%; overflow-x: auto; border-radius: var(--radius); }
table, .data-table {
  width: 100%;
  border-collapse: collapse;
}
th, td, .data-table th, .data-table td {
  border-bottom: 0.5px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
}
th, .data-table th {
  color: var(--color-text-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-theme="dark"] th,
[data-theme="dark"] .data-table th { background: transparent; }

label {
  display: grid;
  gap: 5px;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-muted);
}
input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 14px;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
  background: rgba(120,120,128,.08);
  transition: background .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  background: rgba(120,120,128,.12);
  box-shadow: 0 0 0 3px rgba(0,122,255,.2);
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: rgba(120,120,128,.16);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background: rgba(120,120,128,.22);
  box-shadow: 0 0 0 3px rgba(10,132,255,.25);
}

.btn,
.btn-default,
.btnGhost,
.btn-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
.btn-sm { padding: 6px 14px; font-size: 13px; }

.btn-highlight,
.btn {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(26,54,93,.18);
}
.btn-highlight:hover,
.btn:hover {
  background: var(--color-primary-light);
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(26,54,93,.22);
}
.btn-highlight:active,
.btn:active {
  transform: scale(.97);
}
.btn-default,
.btnGhost {
  background: rgba(120,120,128,.08);
  color: var(--color-text);
}
.btn-default:hover,
.btnGhost:hover {
  background: rgba(120,120,128,.14);
}
.rolesChecks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}
.rolesChecks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.rolesChecks input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
}
.rolePermsCard {
  padding: 10px;
}
.rolePermsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.rolePermItem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 4px 2px;
}
.rolePermItem input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin-top: 2px;
  accent-color: var(--color-primary-light);
}
.rolePermTitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.rolePermDesc {
  font-size: 12px;
  line-height: 1.3;
  margin-top: 1px;
}
.kvSubtle .k {
  font-size: 12px;
  color: var(--color-text-muted);
}
.kvSubtle div:not(.k) {
  color: var(--color-text-muted);
}
.btn-danger {
  background: #ff3b30;
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background: #d70015;
  transform: scale(1.02);
}
.btn-danger:active { transform: scale(.97); }
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btnGhost {
  background: rgba(120,120,128,.18);
}
[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btnGhost:hover {
  background: rgba(120,120,128,.26);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.main-content .btn-outline {
  color: var(--color-primary);
  border-color: rgba(26,54,93,.25);
}
.btn-outline:hover { background: rgba(255,255,255,.1); }
.main-content .btn-outline:hover { background: rgba(26,54,93,.06); }

.main-header .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  border-radius: 999px;
}

.theme-toggle-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  box-shadow: none;
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,.2);
  transform: scale(1.06);
}
.theme-toggle-btn:active { transform: scale(.94); }

.err, .alert-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
}
.msgOk, .alert-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 8px 0 12px;
  font-size: 14px;
  font-weight: 500;
}

.featureStatus,
.featurePriority {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  line-height: 1.2;
  border: 1px solid transparent;
}
.featureStatus--planned {
  color: #374151;
  background: #e5e7eb;
}
.featureStatus--in_progress {
  color: #1e3a8a;
  background: #dbeafe;
}
.featureStatus--done {
  color: #166534;
  background: #dcfce7;
}
.featureStatus--discarded {
  color: #991b1b;
  background: #fee2e2;
}
.featurePriority--low {
  color: #4b5563;
  background: #f3f4f6;
  border-color: #d1d5db;
}
.featurePriority--medium {
  color: #1f2937;
  background: #e5e7eb;
  border-color: #d1d5db;
}
.featurePriority--high {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
.featurePriority--critical {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fca5a5;
}
[data-theme="dark"] .featureStatus--planned {
  color: #e5e7eb;
  background: #374151;
}
[data-theme="dark"] .featureStatus--in_progress {
  color: #bfdbfe;
  background: #1e3a8a;
}
[data-theme="dark"] .featureStatus--done {
  color: #bbf7d0;
  background: #166534;
}
[data-theme="dark"] .featureStatus--discarded {
  color: #fecaca;
  background: #991b1b;
}
[data-theme="dark"] .featurePriority--low {
  color: #d1d5db;
  background: #374151;
  border-color: #4b5563;
}
[data-theme="dark"] .featurePriority--medium {
  color: #e5e7eb;
  background: #4b5563;
  border-color: #6b7280;
}
[data-theme="dark"] .featurePriority--high {
  color: #fde68a;
  background: #92400e;
  border-color: #b45309;
}
[data-theme="dark"] .featurePriority--critical {
  color: #fecaca;
  background: #7f1d1d;
  border-color: #b91c1c;
}

.diaryChatList {
  gap: 12px;
}
.diaryLayout {
  display: block;
}
.diaryMainContent {
  min-width: 0;
}

/* === iOS-style Tagesdoku: TopCard === */
.diaryTopCard {
  margin-bottom: 0;
  border: none;
  border-radius: 20px 20px 0 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  padding: 18px 22px;
}
[data-theme="dark"] .diaryTopCard {
  background: rgba(30,34,41,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.diaryTopHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.diaryTopHead h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--color-text);
}
.diaryTopControls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.diaryTopControls .btn {
  border-radius: 999px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 15px;
  background: rgba(120,120,128,.12);
  border: none;
  color: var(--color-text);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .18s ease, transform .12s ease;
}
.diaryTopControls .btn:hover {
  background: rgba(120,120,128,.2);
  transform: scale(1.04);
}
.diaryTopControls input[type="date"] {
  border-radius: 999px;
  border: none;
  background: rgba(120,120,128,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  padding: 6px 14px;
  min-height: 34px;
  color: var(--color-text);
  transition: background .18s ease;
}
.diaryTopControls input[type="date"]:hover {
  background: rgba(120,120,128,.2);
}
.diaryTopControls input[type="date"]:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}

/* === iOS-style Tagesdoku: DayPanel === */
.diaryDayPanel {
  position: relative;
  padding: 16px 48px;
  border-radius: 0 0 20px 20px;
  background: rgba(245,247,250,.65);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: none;
  border-top: 1px solid rgba(0,0,0,.04);
  margin-top: 0;
}
[data-theme="dark"] .diaryDayPanel {
  background: rgba(22,25,32,.6);
  border-top-color: rgba(255,255,255,.05);
}
.diaryDayCard {
  margin: 0;
  transition: opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), filter .18s ease;
}
.diaryDayCard.isLeaving {
  opacity: 0;
  transform: translateY(6px) scale(.99);
  filter: blur(2px);
}
.diaryDayHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.diaryDaySub {
  font-size: 12px;
  margin-top: 3px;
}

/* === iOS-style day arrows === */
.diaryDayArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(60,60,67,.4);
  font-size: 16px;
  border-radius: 999px;
  background: rgba(120,120,128,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
.diaryDayArrow:hover {
  color: rgba(60,60,67,.7);
  background: rgba(120,120,128,.16);
  transform: translateY(-50%) scale(1.08);
}
.diaryDayArrow:active {
  transform: translateY(-50%) scale(.95);
}
.diaryDayArrowLeft { left: 8px; }
.diaryDayArrowRight { right: 8px; }

/* === iOS-style chat bubbles === */
.diaryBubble {
  border: none;
  background: var(--color-bg-card);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: 0;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.diaryBubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
}
[data-theme="dark"] .diaryBubble {
  background: rgba(44,50,62,.7);
  box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.12);
}
[data-theme="dark"] .diaryBubble:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
}
.diaryBubble:last-child {
  margin-bottom: 0;
}
.diaryMeta {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(60,60,67,.45);
}
[data-theme="dark"] .diaryMeta {
  color: rgba(235,235,245,.35);
}
.diaryMetaLink {
  color: rgba(0,122,255,.7);
  font-size: 11px;
  text-decoration: none;
  transition: color .15s ease;
}
.diaryMetaLinkBtn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.diaryMetaLink:hover {
  color: rgba(0,122,255,.95);
  text-decoration: none;
}
[data-theme="dark"] .diaryMetaLink {
  color: rgba(10,132,255,.7);
}
[data-theme="dark"] .diaryMetaLink:hover {
  color: rgba(10,132,255,.95);
}

/* === Revision lock badge === */
.diaryLockBadge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  opacity: .45;
  vertical-align: middle;
  margin-left: 4px;
  cursor: default;
}

/* === Diary comments === */
.diaryComments {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
[data-theme="dark"] .diaryComments {
  border-top-color: rgba(255,255,255,.08);
}
.diaryComment {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(0,0,0,.025);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
[data-theme="dark"] .diaryComment {
  background: rgba(255,255,255,.04);
}
.diaryComment:last-child {
  margin-bottom: 0;
}
.diaryCommentContent {
  white-space: pre-wrap;
  word-break: break-word;
}
.diaryCommentMeta {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
[data-theme="dark"] .diaryCommentMeta {
  color: rgba(255,255,255,.3);
}
.diaryCommentForm {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
[data-theme="dark"] .diaryCommentForm {
  border-top-color: rgba(255,255,255,.08);
}
.diaryCommentForm textarea {
  font-size: 14px;
  min-height: 48px;
  resize: vertical;
}

.diaryParticipantChip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: #7c3a04;
  border: none;
  background: rgba(251,191,36,.18);
  transition: background .15s ease;
}
.participantHeadChip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #8a4b04;
  border: 1px solid rgba(242, 148, 65, 0.5);
  background: rgba(255, 179, 102, 0.25);
}
[data-theme="dark"] .participantHeadChip {
  color: #f7c58a;
  border-color: rgba(255, 179, 102, 0.4);
  background: rgba(255, 179, 102, 0.16);
}
.participantMiniTable {
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0;
}
.participantMiniTable th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.participantMiniTable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  transition: background .12s;
}
.participantMiniTable tbody tr:last-child td {
  border-bottom: none;
}
.participantRowOpen {
  cursor: pointer;
}
.participantRowOpen:hover td {
  background: rgba(0, 122, 255, 0.04);
}
[data-theme="dark"] .participantRowOpen:hover td {
  background: rgba(0, 122, 255, 0.08);
}
.participantViewHero {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px 18px;
  align-items: start;
}
.participantViewAvatar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}
.participantViewGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
@media (min-width: 901px) {
  .participantViewGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.participantViewGridWide {
  margin-top: 4px;
}
.participantViewItem {
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(118, 118, 128, 0.06);
  min-height: 60px;
  transition: background .12s;
}
.participantViewItemFull {
  grid-column: 1 / -1;
}
.participantViewLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.participantViewValue {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  white-space: pre-wrap;
}
.contactTagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contactTagToggle {
  border: 1px solid rgba(44, 82, 130, 0.25);
  background: rgba(44, 82, 130, 0.08);
  color: #2c5282;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.contactTagToggle.isActive {
  background: rgba(44, 82, 130, 0.2);
  border-color: rgba(44, 82, 130, 0.45);
  font-weight: 700;
}
.contactTagToggleWarn {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
}
.contactTagToggleWarn.isActive {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.55);
  color: #7f1d1d;
}
.btnDeleteSubtle {
  border: 1px solid rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-radius: 8px;
  font-size: 12px;
  padding: 5px 9px;
  line-height: 1.1;
  cursor: pointer;
}
.btnDeleteSubtle:hover {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.35);
}
.diaryParticipantPick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: rgba(251,191,36,.14);
  color: #92400e;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
.diaryParticipantPick:hover {
  background: rgba(251,191,36,.22);
}
.diaryParticipantPick:active {
  transform: scale(.96);
}
.diaryParticipantPick input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.diaryParticipantPick.isActive {
  background: rgba(245,158,11,.28);
  color: #78350f;
  font-weight: 600;
}
.diaryTagPick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: rgba(59,130,246,.1);
  color: #1e40af;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
.diaryTagPick:hover {
  background: rgba(59,130,246,.16);
}
.diaryTagPick:active {
  transform: scale(.96);
}
.diaryTagPick input[type="checkbox"] {
  width: 12px;
  min-height: 12px;
  height: 12px;
  margin: 0;
  accent-color: #3b82f6;
}
[data-theme="dark"] .diaryParticipantChip {
  color: #fcd34d;
  border: none;
  background: rgba(251,191,36,.14);
}
[data-theme="dark"] .diaryParticipantPick {
  color: #fcd34d;
  background: rgba(251,191,36,.12);
}
[data-theme="dark"] .diaryParticipantPick.isActive {
  background: rgba(245,158,11,.24);
  color: #fbbf24;
}
[data-theme="dark"] .btnDeleteSubtle {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.25);
  background: rgba(127, 29, 29, 0.2);
}
[data-theme="dark"] .contactTagToggle {
  color: #9cc2ef;
  border-color: rgba(111, 168, 237, 0.35);
  background: rgba(111, 168, 237, 0.1);
}
[data-theme="dark"] .contactTagToggle.isActive {
  background: rgba(111, 168, 237, 0.2);
  border-color: rgba(111, 168, 237, 0.5);
}
[data-theme="dark"] .contactTagToggleWarn {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.4);
  background: rgba(127, 29, 29, 0.25);
}
[data-theme="dark"] .contactTagToggleWarn.isActive {
  background: rgba(153, 27, 27, 0.45);
  border-color: rgba(252, 165, 165, 0.55);
}
[data-theme="dark"] .participantViewItem {
  background: rgba(118, 118, 128, 0.12);
  border: none;
}
[data-theme="dark"] .participantRowOpen:hover td {
  background: rgba(156, 194, 239, 0.08);
}
[data-theme="dark"] .diaryTagPick {
  color: #93c5fd;
  background: rgba(59,130,246,.14);
}
[data-theme="dark"] .diaryDayArrow {
  color: rgba(235,235,245,.35);
  background: rgba(120,120,128,.12);
}
[data-theme="dark"] .diaryDayArrow:hover {
  color: rgba(235,235,245,.6);
  background: rgba(120,120,128,.22);
}
.diaryComposerDock {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 28px));
  z-index: 70;
  background: rgba(245,247,250,.78);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 14px 16px;
}
[data-theme="dark"] .diaryComposerDock {
  background: rgba(28,32,40,.78);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
}
.diaryComposerForm {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px 14px;
  align-items: start;
}
.diaryComposerTitle {
  font-weight: 700;
  margin-bottom: 3px;
  font-size: 14px;
  color: var(--color-text);
  letter-spacing: -.01em;
}
.diaryComposerMain textarea {
  min-height: 52px;
  resize: vertical;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  border: none;
  background: rgba(120,120,128,.08);
  transition: background .18s ease, box-shadow .18s ease;
}
.diaryComposerMain textarea:focus {
  background: rgba(120,120,128,.12);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
  outline: none;
}
[data-theme="dark"] .diaryComposerMain textarea {
  background: rgba(120,120,128,.14);
}
[data-theme="dark"] .diaryComposerMain textarea:focus {
  background: rgba(120,120,128,.2);
}
.diaryComposerSide .row {
  gap: 5px;
}
.diaryComposerAction {
  margin-top: 4px;
}
.diaryComposerAction .btn {
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.diaryComposerSide .muted {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(60,60,67,.45);
}
[data-theme="dark"] .diaryComposerSide .muted {
  color: rgba(235,235,245,.35);
}
.diaryComposerSpacer {
  height: 136px;
}

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tile {
  border-radius: 20px;
  padding: 22px;
  color: #fff;
  min-height: 160px;
  text-decoration: none;
  display: block;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.tile:hover {
  transform: scale(1.015);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.tile:active { transform: scale(.985); }
.tileGreen { background: linear-gradient(145deg, #34c759 0%, #30a14e 50%, #248a3d 100%); }
.tileOrange { background: linear-gradient(145deg, #ff9f0a 0%, #f5850d 45%, #d97820 100%); }
.tileBtn {
  display: inline-block;
  margin-top: 12px;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: background .18s ease;
}
.tileBtn:hover { background: rgba(255,255,255,.15); }

@media (max-width: 900px) {
  .header-inner { padding: 0.65rem 0.9rem; }
  .main-content { padding: 1rem; }
  .tiles { grid-template-columns: 1fr; }
  .settingsShellParticipant {
    grid-template-columns: 1fr;
  }
  .settingsShellParticipant .settingsNav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .participantTabBar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .participantTabBar::-webkit-scrollbar {
    display: none;
  }
  .participantTab {
    font-size: 12px;
    padding: 7px 10px;
    min-width: 0;
  }
  .participantTabContent {
    max-width: 100%;
  }
  .avatarEditorPanel {
    grid-template-columns: 1fr;
  }
  .avatarEditorCanvasWrap {
    width: min(100%, 320px);
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .formGrid2 {
    grid-template-columns: 1fr;
  }
  .diaryDayPanel {
    padding: 12px 10px;
    border-radius: 0 0 16px 16px;
  }
  .diaryTopCard {
    border-radius: 16px 16px 0 0;
    padding: 14px 16px;
  }
  .diaryTimelineAside {
    display: none;
  }
  .diaryTopHead {
    flex-direction: column;
    align-items: flex-start;
  }
  .diaryDayArrow {
    display: none;
  }
  .diaryComposerDock {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 8px;
  }
  .diaryComposerForm {
    grid-template-columns: 1fr;
  }
  .diaryComposerSpacer {
    display: none;
  }
  .rolePermsGrid {
    grid-template-columns: 1fr;
  }
  .formGrid2 .formColFull {
    grid-column: auto;
  }
}

/* ── Document Explorer ─────────────────────────────────────────────── */
.docExplorer {
  position: relative;
  min-height: 400px;
}
.docToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.docBreadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #3c3c43;
  flex-wrap: wrap;
}
.docBreadcrumbLink {
  color: #007aff;
  text-decoration: none;
  border-radius: 6px;
  padding: 2px 6px;
  transition: background .15s;
}
.docBreadcrumbLink:hover {
  background: rgba(0,122,255,.08);
}
.docBreadcrumbSep {
  color: #c7c7cc;
  font-weight: 300;
}
.docToolbarActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.docViewToggle {
  display: flex;
  background: #f2f2f7;
  border-radius: 10px;
  overflow: hidden;
}
.docViewBtn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 15px;
  color: #8e8e93;
  transition: all .15s;
  border-radius: 10px;
}
.docViewBtn.isActive {
  background: #fff;
  color: #007aff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.docSearchInput {
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 14px;
  background: #f9f9fb;
  width: 180px;
  transition: border-color .15s, box-shadow .15s;
}
.docSearchInput:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,.12);
}
.docActionBtn {
  border: none;
  background: #f2f2f7;
  color: #3c3c43;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.docActionBtn:hover {
  background: #e5e5ea;
}
.docActionBtnPrimary {
  background: #007aff;
  color: #fff;
}
.docActionBtnPrimary:hover {
  background: #0062d1;
}

/* List view */
.docListView {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docHidden {
  display: none !important;
}
.docItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 14px;
  transition: background .12s, box-shadow .12s;
  cursor: default;
}
.docItem:hover {
  background: #f5f7fa;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.docItemFolder {
  cursor: pointer;
}
.docItemIcon {
  font-size: 28px;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}
.docItemInfo {
  flex: 1;
  min-width: 0;
}
.docItemName {
  font-size: 15px;
  font-weight: 500;
  color: #1c1c1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docItemMeta {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 2px;
}
.docItemActions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.docItem:hover .docItemActions {
  opacity: 1;
}
.docItemBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background .12s;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.docItemBtn:hover {
  background: rgba(0,0,0,.06);
}

/* Grid view */
.docGridView {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.docGridItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 14px;
  background: #fff;
  border-radius: 16px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s, transform .12s;
  text-align: center;
}
.docGridItem:hover {
  background: #f0f4ff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.docGridIcon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #f2f2f7;
  overflow: hidden;
}
.docGridName {
  font-size: 13px;
  font-weight: 500;
  color: #1c1c1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Drag states */
.docDragging {
  opacity: .4;
  transform: scale(.97);
}
.docDropTarget {
  background: rgba(0,122,255,.10) !important;
  box-shadow: inset 0 0 0 2px #007aff !important;
  border-radius: 14px;
  transition: background .1s, box-shadow .1s;
}
.docBreadcrumbLink.docDropTarget {
  background: rgba(0,122,255,.15) !important;
  box-shadow: inset 0 0 0 2px #007aff !important;
  border-radius: 8px;
}

/* Tree view */
.docTreeView {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fff;
  border-radius: 14px;
  padding: 8px 0;
}
.docTreeFolder,
.docTreeFile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 10px;
  margin: 0 6px;
  transition: background .12s;
}
.docTreeFolder:hover {
  background: #f0f4ff;
}
.docTreeFile:hover {
  background: #f5f7fa;
}
.docTreeToggle {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #8e8e93;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background .1s, color .1s;
  user-select: none;
}
.docTreeToggle:hover {
  background: rgba(0,0,0,.06);
  color: #3c3c43;
}
.docTreeIcon {
  font-size: 18px;
  flex-shrink: 0;
}
.docTreeName {
  font-size: 14px;
  font-weight: 500;
  color: #1c1c1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docTreeFolderLink {
  color: #007aff;
}
.docTreeFolderLink:hover {
  text-decoration: underline;
}
.docTreeMeta {
  font-size: 11px;
  color: #8e8e93;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.docTreeChildren {
  display: none;
  border-left: 1px solid #e5e5ea;
  margin-left: 22px;
}
.docTreeChildren.isOpen {
  display: block;
}

/* Empty state */
.docEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: #8e8e93;
}
.docEmptyIcon {
  font-size: 56px;
  opacity: .4;
}
.docEmptyText {
  font-size: 17px;
  font-weight: 600;
  color: #3c3c43;
}
.docEmptyHint {
  font-size: 14px;
}

/* Drop overlay */
.docDropOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0,122,255,.08);
  border: 3px dashed #007aff;
  border-radius: 20px;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
}
.docDropOverlay.isVisible {
  display: flex;
}
.docDropOverlayInner {
  text-align: center;
}
.docDropOverlayIcon {
  font-size: 48px;
  color: #007aff;
}
.docDropOverlayText {
  font-size: 17px;
  font-weight: 600;
  color: #007aff;
  margin-top: 8px;
}

/* Preview modal */
.docPreviewPanel {
  max-width: 820px !important;
}
.docPreviewBody {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Select */
.docSelect {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  font-size: 15px;
  background: #f9f9fb;
  margin-top: 6px;
  appearance: none;
}
.docSelect:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,.12);
}

@media (max-width: 600px) {
  .docToolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .docSearchInput {
    width: 100%;
  }
  .docGridView {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }
  .docItemActions {
    opacity: 1;
  }
}

/* ── Changelog / Archiv ────────────────────────────────────────────── */
.archChangelog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.archEntry {
  background: #f9f9fb;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid #e5e5ea;
}
.archEntryHead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.archBadge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.archBadgeCreate {
  background: #d1fae5;
  color: #065f46;
}
.archBadgeUpdate {
  background: #dbeafe;
  color: #1e40af;
}
.archBadgeDelete {
  background: #fee2e2;
  color: #991b1b;
}
.archSection {
  font-size: 13px;
  font-weight: 600;
  color: #3c3c43;
}
.archMeta {
  font-size: 12px;
  color: #8e8e93;
  margin-left: auto;
}
.archDiffTable {
  overflow-x: auto;
}
.archDiffTable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.archDiffTable th {
  text-align: left;
  padding: 6px 10px;
  font-weight: 600;
  color: #8e8e93;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 1px solid #e5e5ea;
}
.archDiffTable td {
  padding: 6px 10px;
  border-bottom: 1px solid #f2f2f7;
  vertical-align: top;
}
.archDiffField {
  font-weight: 600;
  color: #3c3c43;
  white-space: nowrap;
}
.archDiffOld {
  color: #991b1b;
  background: #fef2f2;
  border-radius: 6px;
}
.archDiffNew {
  color: #065f46;
  background: #ecfdf5;
  border-radius: 6px;
}
@media (max-width: 600px) {
  .archEntryHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .archMeta {
    margin-left: 0;
  }
}

/* ── Medikamentenausgabe Print Layout ──────────────────────────────── */
.mpLayout {
  display: none;
}

@media print {
  @page {
    margin: 8mm 10mm;
  }
  body.mpPrinting {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.mpPrinting > *:not(.mpLayout) {
    display: none !important;
  }
  body.mpPrinting > .mpLayout {
    display: block !important;
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 9.5pt;
    line-height: 1.3;
  }
  .mpHeader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 3px solid #1e40af;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  .mpLogo {
    font-size: 16pt;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: -0.5px;
  }
  .mpMeta {
    font-size: 10pt;
    color: #374151;
    font-weight: 600;
  }
  .mpInfoTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 9pt;
  }
  .mpInfoTable td {
    padding: 3px 8px;
    border: 1px solid #d1d5db;
  }
  .mpInfoTable .mpLabel {
    font-weight: 600;
    background: #f3f4f6;
    width: 16%;
    white-space: nowrap;
  }
  .mpDetailTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4px;
    font-size: 9pt;
  }
  .mpDetailTable th,
  .mpDetailTable td {
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    text-align: left;
  }
  .mpDetailTable .mpMedTitle {
    background: #1e40af;
    color: #fff;
    font-size: 10pt;
    font-weight: 700;
    text-align: left;
    padding: 5px 8px;
  }
  .mpDetailTable .mpLabel {
    font-weight: 600;
    background: #f3f4f6;
    width: 14%;
    white-space: nowrap;
  }
  .mpBadge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 7pt;
    font-weight: 600;
    background: #dbeafe;
    color: #1e40af;
    margin-left: 6px;
    vertical-align: middle;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .mpTrackTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 8.5pt;
  }
  .mpTrackTable th {
    padding: 3px 4px;
    border: 1px solid #9ca3af;
    background: #e5e7eb;
    font-weight: 600;
    text-align: center;
    font-size: 8pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .mpTrackTable td {
    padding: 2px 4px;
    border: 1px solid #9ca3af;
    text-align: center;
    height: 14px;
  }
  .mpTrackTable tr td:nth-child(1) {
    width: 36px;
    font-weight: 600;
    font-size: 8pt;
  }
  .mpTrackTable tr td:nth-child(2) {
    width: 78px;
    text-align: left;
    font-size: 8pt;
  }
  .mpFooter {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #d1d5db;
    font-size: 9pt;
    color: #374151;
  }
}