/* Szene-Layout fuer das Dashboard: Baum + Biber als Hero. Laedt nach md3-expressive.css und ueberschreibt dessen Hero. */

#screen-dashboard { position: relative; }

/* Kopfzeile schwebt ueber der Szene */
#screen-dashboard .md3-top-app-bar {
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 6;
  max-width: 560px; margin: 0 auto;
  background: transparent !important; backdrop-filter: none !important;
  min-height: 0; padding: max(14px, env(safe-area-inset-top)) 18px 0 !important;
}
#screen-dashboard .md3-top-app-bar .app-bar-brand { color: rgba(255,255,255,.78) !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
#screen-dashboard .md3-top-app-bar .greeting { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
#screen-dashboard .md3-top-app-bar .user-avatar-wrap { width: 40px !important; height: 40px !important; }
#screen-dashboard .md3-top-app-bar .btn-ghost {
  width: 38px !important; height: 38px !important; border-radius: 50% !important;
  background: rgba(20,16,12,.42) !important; color: #fff !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#screen-dashboard .md3-top-app-bar .top-right { gap: 6px !important; }

/* Hero */
.scene-group { max-width: 560px; margin: 0 auto; position: relative; scroll-margin-top: 0; }
.scene-hero {
  position: relative; overflow: hidden; color: #fff;
  height: clamp(410px, 58svh, 480px);
  background: #14100c;
  border-radius: 0 0 34px 34px;
}
.scene-art { position: absolute; inset: 0; }
.scene-art svg { display: block; width: 100%; height: 100%; }
.scene-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 52%, rgba(10,8,6,.62) 100%);
}
.scene-streak { position: absolute; left: 20px; bottom: 50px; z-index: 2; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
#screen-dashboard .scene-streak #streak-count, .scene-streak .streak-num {
  position: static !important; width: auto !important; height: auto !important;
  font-size: 104px !important; font-weight: 880 !important; line-height: .84 !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; text-shadow: 0 2px 14px rgba(0,0,0,.55); font-variation-settings: 'wdth' 86; margin: 0 !important; text-align: left;
}
.scene-streak .streak-unit {
  position: static !important; margin: 8px 0 0 !important; font-size: .98rem !important; font-weight: 600 !important;
  color: #fff !important; opacity: .95; text-transform: none !important;
}
.scene-stage { display: flex; gap: 6px; align-items: baseline; margin-top: 2px; font-size: .78rem; opacity: .82; }
.scene-stage .streak-stage-name, .scene-stage .streak-stage-sub {
  color: #fff !important; font-size: .78rem !important; font-weight: 600 !important; margin: 0 !important;
  text-transform: none !important; line-height: 1.2 !important;
}
.scene-stage .streak-stage-name { text-transform: uppercase !important; letter-spacing: .04em !important; }
.scene-streak .stage-progress-text { display: none !important; }

.scene-hero .hero-level {
  position: absolute !important; left: 20px; right: 20px; bottom: 16px; z-index: 2;
  width: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  grid-column: auto !important; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.scene-hero .hero-level-copy {
  display: grid !important; grid-template-columns: auto minmax(40px, 1fr) auto; gap: 12px; align-items: center;
}
.scene-hero .hero-level-name { display: block !important; color: #fff !important; font-size: .9rem !important; font-weight: 760 !important; white-space: nowrap; }
.scene-hero .hero-level-meta { display: block !important; color: rgba(255,255,255,.88) !important; font-size: .74rem !important; white-space: nowrap; }
.scene-hero .hero-level-bar { height: 5px !important; width: 100% !important; margin: 0 !important; background: rgba(255,255,255,.26) !important; border-radius: 9px; overflow: hidden; }
.scene-hero .hero-level-fill { background: #f0b98a !important; height: 100%; border-radius: 9px; }

/* Check-in-Button: unten angedockt ueber der Navigation */
.scene-group .md3-checkin-tray {
  position: fixed; z-index: 19; left: 50%; transform: translateX(-50%);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px);
  width: min(560px, 100%); margin: 0 !important; padding: 26px 16px 10px !important; min-height: 0 !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--md-surface) 0%, transparent), var(--md-surface) 46%) !important;
  border-radius: 0 !important; box-shadow: none !important; display: block !important; pointer-events: none;
}
.scene-group .md3-checkin-tray > * { pointer-events: auto; }
.scene-group .checkin-copy { display: none !important; }
.scene-group #btn-main-checkin,
.scene-group #main-checkin-done:not(.hidden) {
  width: 100% !important; min-height: 56px !important; border-radius: 999px !important;
  box-shadow: none !important; font-size: 1.05rem !important; font-weight: 800 !important;
}
.scene-group #btn-main-checkin:hover { border-radius: 999px !important; }
.scene-group #main-checkin-done:not(.hidden) { border: 1.5px solid var(--md-outline-variant) !important; }

/* Darunter: weniger Karten, mehr Fluss */
#screen-dashboard .dashboard-content { padding: 6px 20px 210px !important; }

@media (min-width: 600px) {
  .scene-group { margin-top: 12px; }
  .scene-hero { border-radius: 34px; }
  #screen-dashboard .md3-top-app-bar { top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .scene-art svg * { animation: none !important; } }

/* Level-Up-Popup: Baumbild statt Emoji */
.levelup-plant { width: 170px; height: 170px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; font-size: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 10px 40px rgba(0,0,0,.4); }
.levelup-plant svg { display: block; width: 100%; height: 100%; }

/* ===== Unterbau im Layout-A-Stil: Hairlines, Zahlen, Kreise ===== */
#screen-dashboard .dashboard-content { gap: 0 !important; }
#screen-dashboard .md3-section { margin: 0; }
#screen-dashboard .md3-today-strip { display: block; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 0 6px; }
.trio-item { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--md-outline-variant); min-width: 0; }
.trio-item:first-child { border: 0; padding-left: 0; }
.trio-ic { color: var(--md-primary); margin-bottom: 4px; }
.trio-item strong { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--md-on-surface); font-variation-settings: 'wdth' 90; }
.trio-label { font-size: .76rem; color: var(--md-on-surface-variant); }
.trio-hint { font-style: normal; font-size: .68rem; color: var(--md-on-surface-variant); opacity: .8; line-height: 1.25; }
.trio-meta { display: flex; gap: 8px; align-items: baseline; padding: 4px 0 16px; font-size: .78rem; color: var(--md-on-surface-variant); border-bottom: 1px solid var(--md-outline-variant); }
.trio-meta b { color: var(--md-on-surface); font-weight: 760; }
.trio-sep { opacity: .5; }

#screen-dashboard .md3-section-heading { margin: 26px 0 6px; }
#screen-dashboard .md3-section-heading h2 {
  font-size: 1.15rem !important; font-weight: 760 !important; line-height: 1.15 !important; font-variation-settings: normal !important;
  color: var(--md-on-surface) !important;
}
#screen-dashboard .md3-section-heading .md3-overline { display: none !important; }
#screen-dashboard .section-symbol { display: none !important; }
#screen-dashboard .glass-card:not(.streak-hero) {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; padding: 8px 0 !important; margin: 0 !important;
}
#screen-dashboard .md3-progress-grid, #screen-dashboard .md3-community-grid { display: block !important; }

/* Tages-Challenge als Listenzeile mit Kreis */
#screen-dashboard .challenge-card { margin-top: 22px !important; }
.challenge-header { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px !important; }
.challenge-title { font-size: 1.15rem !important; font-weight: 760 !important; color: var(--md-on-surface) !important; }
.challenge-total { font-size: .72rem !important; color: var(--md-on-surface-variant) !important; background: none !important; padding: 0 !important; }
#screen-dashboard .challenge-body { display: flex; gap: 14px; align-items: center; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 10px 0 12px !important; border-bottom: 1px solid var(--md-outline-variant) !important; }
#screen-dashboard .challenge-body .challenge-info { flex: 1; min-width: 0; }
#screen-dashboard .challenge-text { font-size: .95rem !important; font-weight: 520 !important; line-height: 1.3 !important; color: var(--md-on-surface) !important; }
#screen-dashboard .challenge-meta { display: flex; gap: 8px; font-size: .74rem !important; color: var(--md-on-surface-variant) !important; margin-top: 3px; }
#screen-dashboard .challenge-meta > * { background: none !important; padding: 0 !important; color: inherit !important; }
#screen-dashboard .btn-challenge.chal-chk {
  order: -1; flex: none; width: 28px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  border-radius: 50% !important; border: 2px solid var(--md-primary) !important; background: transparent !important; color: transparent !important;
  display: grid !important; place-items: center; box-shadow: none !important;
}
#screen-dashboard .btn-challenge.chal-chk svg { display: block; }
#screen-dashboard .btn-challenge.chal-chk.btn-challenge-done { background: var(--md-primary) !important; color: var(--md-on-primary) !important; }
#screen-dashboard .challenge-done .challenge-text { text-decoration: line-through; opacity: .6; }

/* Diese Woche: Kreise */
.week-title { font-size: 1.15rem !important; font-weight: 760 !important; color: var(--md-on-surface) !important; margin: 14px 0 12px !important; text-align: left !important; }
#screen-dashboard .week-grid { display: flex !important; justify-content: space-between; gap: 4px !important; }
#screen-dashboard .week-day {
  display: flex !important; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; transform: none !important; animation: none !important;
}
#screen-dashboard .week-day-status {
  order: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 0;
  background: var(--md-surface-container); color: var(--md-primary);
}
#screen-dashboard .week-day-label { order: 2; font-size: .72rem !important; color: var(--md-on-surface-variant) !important; }
#screen-dashboard .week-today .week-day-status { background: transparent; border: 2px solid var(--md-primary); }
#screen-dashboard .week-future .week-day-status { background: transparent; border: 1.5px dashed var(--md-outline-variant); }
#screen-dashboard .week-fail .week-day-status { color: var(--md-error); }
#screen-dashboard .week-freeze .week-day-status { color: #5fa8c9; }
#screen-dashboard .week-bonus-icons { order: 3; font-size: .7rem; min-height: 0; }
#screen-dashboard .btn-toggle-cal { display: block; margin: 14px auto 6px; }
#screen-dashboard .calendar-compact { margin-top: 12px !important; border-bottom: 1px solid var(--md-outline-variant) !important; padding-bottom: 12px !important; }

#screen-dashboard .momentum-card { background: transparent !important; border-radius: 0 !important; padding: 12px 0 !important; margin: 14px 0 !important; color: var(--md-on-surface) !important; }
#screen-dashboard .momentum-card .momentum-item { background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }

/* Gemeinsam dranbleiben: Zeilen mit grosser Zahl */
.md3-community-section { margin-top: 8px; }
#screen-dashboard .buddy-header { margin: 0 0 4px !important; }
.buddy-title { font-size: 1.15rem !important; font-weight: 760 !important; }
#screen-dashboard .buddy-item { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 11px 0 !important; border-bottom: 1px solid var(--md-outline-variant) !important; align-items: center; }
#screen-dashboard .buddy-avatar { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--md-surface-container) !important; color: var(--md-primary) !important; font-weight: 700; }
#screen-dashboard .buddy-name { font-weight: 560 !important; color: var(--md-on-surface) !important; }
#screen-dashboard .buddy-sub, #screen-dashboard .buddy-level { font-size: .74rem !important; color: var(--md-on-surface-variant) !important; }
#screen-dashboard .buddy-plant { display: none; }
#screen-dashboard .buddy-streak { font-size: 1.4rem !important; font-weight: 800 !important; color: var(--md-on-surface) !important; background: none !important; }

/* Achievements ruhiger */
#screen-dashboard .ach-section-title { font-size: 1.15rem !important; font-weight: 760 !important; }
#screen-dashboard .achievement { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--md-outline-variant) !important; }
.app-support-footer { margin-top: 26px; }

/* Navigation: flach, ohne Pille */
.md3-navigation-bar {
  left: 50%; bottom: 0 !important; width: min(560px, 100%) !important; min-height: 0 !important; padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important; background: var(--md-surface) !important; box-shadow: none !important; border-top: 1px solid var(--md-outline-variant);
}
.md3-nav-item { gap: 2px !important; font-size: .7rem !important; }
.md3-nav-icon { height: 26px !important; min-width: 0 !important; background: transparent !important; }
.md3-nav-item.active { color: var(--md-primary) !important; }
.md3-nav-item.active .md3-nav-icon { background: transparent !important; color: var(--md-primary) !important; }
#screen-dashboard .dashboard-content { max-width: 560px; margin: 0 auto; }
#screen-dashboard #md3-progress > .md3-section-heading { display: none; }
#screen-dashboard .week-day.week-today, #screen-dashboard .week-day.week-success, #screen-dashboard .week-day.week-cheat, #screen-dashboard .week-day.week-freeze, #screen-dashboard .week-day.week-fail, #screen-dashboard .week-day.week-future {
  border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important;
}
#screen-dashboard .calendar-compact { min-height: 0 !important; }
#screen-dashboard #calendar-week { margin: 0 !important; }
#screen-dashboard .momentum-card { margin: 4px 0 !important; }
#screen-dashboard .buddy-title { display: none; }
#screen-dashboard .buddy-header { justify-content: flex-end !important; }

/* Play-Store-Hinweis: schmale Zeile direkt unter dem Hero (nur Web) */
.play-store-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--md-outline-variant); }
.play-store-row.dismissed { display: none; }
.play-store-row-text { flex: 1; font-size: .8rem; color: var(--md-on-surface-variant); min-width: 0; }
.play-store-row .play-store-promo { width: 112px; margin: 0; flex: none; }
.play-store-dismiss { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); font-size: 1.3rem; line-height: 1; cursor: pointer; }

/* Gemeinsam dranbleiben: Ueberschrift und +Freunde auf einer Hoehe */
#screen-dashboard .md3-community-section .md3-section-heading { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 6px; padding: 0; }
#screen-dashboard .md3-community-section .btn-friends-manage { flex: none; margin: 0 !important; }

/* Ausgeklappter Kalender: Kreise wie in der Wochenansicht */
#screen-dashboard .cal-nav { margin-bottom: 10px !important; }
#screen-dashboard .cal-title { font-size: 1.05rem !important; font-weight: 760 !important; }
#screen-dashboard .cal-weekdays { font-size: .7rem !important; margin-bottom: 4px; }
#screen-dashboard .cal-grid { gap: 6px 4px !important; }
#screen-dashboard .cal-day:not(.empty) {
  display: grid !important; place-items: center; position: relative;
  width: 100% !important; max-width: 40px; aspect-ratio: 1 / 1; height: auto !important; margin: 0 auto;
  border-radius: 50% !important; border: 0 !important; box-shadow: none !important; animation: none !important; transform: none !important;
  background: transparent !important; color: var(--md-on-surface) !important; font-size: .85rem; font-weight: 560;
}
#screen-dashboard .cal-day::after { display: none !important; }
#screen-dashboard .cal-day.past { color: var(--md-on-surface-variant) !important; opacity: .75; }
#screen-dashboard .cal-day.future { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--md-outline-variant) !important; opacity: .55 !important; color: var(--md-on-surface-variant) !important; }
#screen-dashboard .cal-day.checked { background: var(--cal-success-bg) !important; color: var(--cal-success-fg) !important; }
#screen-dashboard .cal-day.cheat { background: var(--cal-cheat-bg) !important; color: var(--cal-cheat-fg) !important; }
#screen-dashboard .cal-day.freeze { background: var(--cal-freeze-bg) !important; color: var(--cal-freeze-fg) !important; }
#screen-dashboard .cal-day.failed { background: var(--cal-fail-bg) !important; color: var(--cal-fail-fg) !important; }
#screen-dashboard .cal-day.today, #screen-dashboard .cal-day.today-done { box-shadow: inset 0 0 0 2px var(--md-primary) !important; }
#screen-dashboard .cal-day.today { background: transparent !important; color: var(--md-on-surface) !important; }
#screen-dashboard .cal-day .bonus-icons { position: absolute; bottom: -3px; left: 0; right: 0; font-size: .5rem; line-height: 1; text-align: center; pointer-events: none; }
#screen-dashboard .cal-legend { justify-content: center; gap: 14px !important; margin-top: 12px !important; font-size: .72rem !important; }
#screen-dashboard .dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; box-shadow: none !important; }

/* Wochenkreise im gleichen Farbschema */
#screen-dashboard .week-success .week-day-status { background: var(--cal-success-bg); color: var(--cal-success-fg); }
#screen-dashboard .week-cheat .week-day-status { background: var(--cal-cheat-bg); color: var(--cal-cheat-fg); }
#screen-dashboard .week-freeze .week-day-status { background: var(--cal-freeze-bg); color: var(--cal-freeze-fg); }
#screen-dashboard .week-fail .week-day-status { background: var(--cal-fail-bg); color: var(--cal-fail-fg); }

/* ===== Dialoge im gleichen Stil: Bottom-Sheet, flache Zeilen, Pill-Buttons ===== */
.modal-overlay { align-items: flex-end !important; padding: 0 !important; background: rgba(12,9,6,.52) !important; }
.modal-overlay .modal-card {
  width: min(560px, 100%) !important; max-width: 560px !important; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 20px calc(16px + env(safe-area-inset-bottom)) !important;
  border-radius: 28px 28px 0 0 !important; background: var(--md-surface) !important; box-shadow: 0 -8px 40px rgba(0,0,0,.25) !important;
  transform: translateY(24px) !important; position: relative;
}
.modal-overlay.show .modal-card { transform: translateY(0) !important; }
.modal-overlay .modal-card::before {
  content: ''; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
  border-radius: 4px; background: var(--md-outline-variant);
}
@media (min-width: 600px) {
  .modal-overlay { align-items: center !important; }
  .modal-overlay .modal-card { border-radius: 28px !important; padding-bottom: 20px !important; }
}
.modal-title {
  font-size: 1.3rem !important; font-weight: 760 !important; line-height: 1.2 !important; text-align: left !important;
  margin: 0 0 14px !important; color: var(--md-on-surface) !important; font-variation-settings: normal !important;
}
.modal-cancel, #settings-close {
  display: block; width: 100%; min-height: 46px; margin-top: 6px; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; color: var(--md-primary) !important; font-weight: 740 !important; box-shadow: none !important;
}

/* Einstellungen */
#settings-modal .settings-section { margin-bottom: 0; padding: 4px 0; }
#settings-modal .settings-divider { margin: 10px 0 !important; height: 1px; }
.settings-heading { font-size: .95rem !important; font-weight: 700 !important; color: var(--md-on-surface) !important; margin-bottom: 4px !important; }
.settings-desc { font-size: .84rem !important; line-height: 1.4; }
#settings-modal .md3-theme-toggle {
  width: 100%; display: flex !important; align-items: center; gap: 12px; padding: 10px 0 !important; border-radius: 0 !important;
  background: transparent !important; text-align: left; font-weight: 600; color: var(--md-on-surface) !important;
}
#settings-modal .md3-theme-state { margin-left: auto; font-size: .8rem; color: var(--md-on-surface-variant); font-weight: 600; }
.settings-link {
  display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 13px 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--md-outline-variant) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--md-on-surface) !important; font-weight: 560 !important; text-align: left !important;
}
.settings-link::after { content: '\203A'; color: var(--md-on-surface-variant); font-size: 1.3rem; line-height: 1; }
.settings-link + .settings-link { margin-top: 0 !important; }
.btn-danger {
  background: transparent !important; color: var(--md-error) !important; border: 1.5px solid color-mix(in srgb, var(--md-error) 55%, transparent) !important;
  border-radius: 999px !important; min-height: 46px; box-shadow: none !important; font-weight: 700 !important;
}
#confirm-modal .btn-danger { background: var(--md-error) !important; color: var(--md-on-error) !important; border-color: transparent !important; }
.btn-ghost-outline { border-radius: 999px !important; }

/* Feedback */
.feedback-stars { display: flex; gap: 6px; justify-content: flex-start !important; font-size: 2rem !important; margin: 4px 0 14px !important; color: var(--md-primary) !important; }
.feedback-textarea { border-radius: 16px !important; min-height: 110px; }
.modal-card .btn.btn-glow, .modal-card .btn-admin-save, .modal-card .btn-admin {
  min-height: 52px; border-radius: 999px !important; box-shadow: none !important; font-weight: 780 !important;
}

/* Tutorial */
.welcome-card { text-align: left; }
.welcome-logo-img { display: block; width: 72px; height: 72px; margin: 4px 0 10px; border-radius: 20px; }
.welcome-title { font-size: 1.4rem !important; font-weight: 780 !important; text-align: left !important; margin-bottom: 8px !important; }
.welcome-steps { display: flex; flex-direction: column; margin-bottom: 14px; }
.welcome-step { display: flex !important; align-items: center; gap: 14px; padding: 11px 0 !important; border-bottom: 1px solid var(--md-outline-variant); background: transparent !important; }
.welcome-step:last-child { border-bottom: 0; }
.welcome-step-icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--md-surface-container); color: var(--md-primary); font-size: 0;
}
.welcome-step-text { font-size: .9rem !important; line-height: 1.35 !important; color: var(--md-on-surface) !important; }

/* Freunde */
.friends-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .82rem !important; font-weight: 700 !important; margin-bottom: 6px !important; }
.friend-code-display { border-radius: 16px !important; background: var(--md-surface-container) !important; color: var(--md-on-surface) !important; padding: 12px 14px !important; }
.friend-code-text { color: var(--md-on-surface) !important; letter-spacing: .06em; }
.btn-copy-code { border-radius: 999px !important; padding: 6px 14px !important; }
.friend-add-row .admin-input { border-radius: 16px !important; }
.friend-add-row .btn-admin-sm, #btn-add-friend { width: 52px; height: 52px; border-radius: 50% !important; background: var(--md-primary) !important; color: var(--md-on-primary) !important; border: 0 !important; }
.friend-item, .friend-request-item { background: transparent !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--md-outline-variant) !important; padding: 11px 0 !important; box-shadow: none !important; }
.friend-item-name { color: var(--md-on-surface) !important; font-weight: 560; }
.friend-item-streak { color: var(--md-on-surface-variant) !important; }

/* Admin */
.admin-language-switch { border-radius: 999px !important; background: var(--md-surface-container) !important; padding: 3px; }
.admin-language-option { border-radius: 999px !important; }
.admin-section { padding: 6px 0 !important; }
.admin-divider { margin: 8px 0 !important; }
.stepper-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 1.2rem; }
.stepper-value { color: var(--md-on-surface) !important; font-size: 1.4rem !important; font-weight: 800 !important; }

/* Check-in-Dialog */
.modal-buttons { gap: 8px !important; }
.modal-btn { flex-direction: row !important; text-align: left; align-items: center !important; gap: 14px !important; min-height: 64px !important; padding: 12px 16px !important; border-radius: 20px !important; }
.modal-btn > .modal-btn-label { flex: 1; font-size: 1rem !important; }
.modal-btn { position: relative; }
.modal-btn-icon { font-size: 1.5rem !important; }
.modal-btn-clean, .modal-btn-fail { border-radius: 20px !important; }
.modal-btn-sub { margin-left: auto; font-size: .76rem !important; opacity: .8; text-align: right; }
.bonus-marker-btn { border-radius: 16px !important; min-height: 60px; }

/* Check-in-Dialog: Status und aktuelle Auswahl */
.checkin-current-status { text-align: left !important; background: transparent !important; color: var(--md-on-surface-variant) !important; padding: 0 !important; margin: -6px 0 12px !important; font-size: .85rem !important; }
.checkin-current-status .status-badge { margin-left: 6px; border-radius: 999px !important; padding: 3px 10px !important; }
.modal-btn.current-choice { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; box-shadow: inset 0 0 0 2px var(--md-primary) !important; border: 0 !important; }
.modal-btn-cheat.current-choice { background: var(--md-tertiary-container) !important; color: var(--md-on-tertiary-container) !important; }
.modal-btn-fail.current-choice { background: var(--md-error-container) !important; color: var(--md-on-error-container) !important; }
.modal-btn.current-choice::after { content: '' !important; display: none !important; }
.bonus-marker-section { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--md-outline-variant) !important; border-radius: 0 !important; padding: 0 0 14px !important; }

/* Loeschbestaetigung */
#confirm-modal .settings-desc { text-align: left !important; margin-bottom: 14px !important; }
#confirm-modal .confirm-buttons { display: flex; flex-direction: column; gap: 4px; }
#confirm-modal .btn-ghost-outline { background: transparent !important; color: var(--md-primary) !important; border: 0 !important; min-height: 46px; font-weight: 740 !important; box-shadow: none !important; }

/* Kalender-Legende: Punkte mit feiner Kontur (heller Modus) */
#screen-dashboard .cal-legend .dot { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-on-surface) 28%, transparent) !important; }
.admin-language-option { background: transparent !important; color: var(--md-on-surface-variant) !important; border: 0 !important; font-weight: 650 !important; }
.admin-language-option.active { background: var(--md-primary) !important; color: var(--md-on-primary) !important; }

/* ===== Login: Szene oben, flache Anmeldung darunter ===== */
#screen-login .login-wrapper {
  width: min(100%, 560px) !important; padding: 0 0 32px !important; justify-content: flex-start !important;
  align-items: stretch !important; text-align: left !important; gap: 0 !important; min-height: 100dvh;
}
.login-scene { position: relative; height: clamp(300px, 42svh, 380px); overflow: hidden; border-radius: 0 0 34px 34px; background: #14100c; }
.login-scene svg { display: block; width: 100%; height: 100%; }
.login-scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 46%, rgba(10,8,6,.72) 100%);
}
#screen-login .login-logo-img { display: none !important; }
#screen-login .login-theme-toggle {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 18px; z-index: 3; width: 40px; height: 40px;
  background: rgba(20,16,12,.42) !important; color: #fff !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#screen-login .login-title {
  position: relative; z-index: 2; margin: -76px 24px 0 !important; color: #fff !important; text-align: left !important;
  font-size: clamp(2.6rem, 12vw, 3.5rem) !important; text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
#screen-login .login-title span { color: #f0b98a !important; }
#screen-login .login-sub { margin: 16px 24px 22px !important; max-width: none !important; text-align: left !important; font-size: .95rem !important; }
#screen-login .login-wrapper > .btn-google, #screen-login .login-wrapper > .btn-play-store,
#screen-login .login-wrapper > .login-divider, #screen-login .login-wrapper > .email-auth-panel,
#screen-login .login-wrapper > .email-verification-panel, #screen-login .login-wrapper > .login-error {
  margin-left: 24px !important; margin-right: 24px !important; width: auto !important; max-width: none !important;
}
#screen-login .btn-google { border-radius: 999px !important; min-height: 54px !important; }
#screen-login .login-divider { margin-top: 16px !important; margin-bottom: 8px !important; }
#screen-login .btn-play-store { order: 99; }

#screen-login .email-auth-panel { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
#screen-login .email-auth-tabs { display: flex; gap: 0 !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 14px; }
#screen-login .email-auth-tab { flex: 1; border-radius: 0 !important; background: transparent !important; color: var(--md-on-surface-variant) !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; min-height: 44px; }
#screen-login .email-auth-tab.active { background: transparent !important; color: var(--md-primary) !important; border-bottom-color: var(--md-primary) !important; }
#screen-login .input-wrapper input { border-radius: 16px !important; min-height: 54px; }
#screen-login .email-auth-panel .btn, #screen-login .btn-glow { border-radius: 999px !important; min-height: 54px !important; }
#screen-login .email-verification-panel { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; text-align: left; }
@media (min-width: 600px) { #screen-login .login-wrapper { padding-top: 12px !important; } .login-scene { border-radius: 34px; } }
@media (prefers-reduced-motion: reduce) { .login-scene svg * { animation: none !important; } }
#screen-login .login-title { margin: -76px 24px 44px !important; }
#screen-login .login-title span { background: none !important; -webkit-text-fill-color: #f0b98a !important; color: #f0b98a !important; }
#screen-login .login-sub { margin: 0 24px 20px !important; }
#screen-login .email-auth-tab { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
#screen-login .email-auth-tabs { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
#screen-login .login-form { max-width: none !important; width: 100% !important; }

/* Ladebildschirm: gleiche Szene wie der Login, dazu drei pulsierende Punkte */
#screen-loading .loading-wrapper { width: min(100%, 560px) !important; padding: 0 !important; justify-content: flex-start !important; align-items: stretch !important; text-align: left !important; gap: 0 !important; min-height: 100dvh; margin: 0 auto; }
#screen-loading .login-title { margin: -76px 24px 18px !important; position: relative; z-index: 2; color: #fff !important; text-align: left !important; font-size: clamp(2.6rem, 12vw, 3.5rem) !important; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
#screen-loading .login-title span { background: none !important; -webkit-text-fill-color: #f0b98a !important; color: #f0b98a !important; }
.loading-sub { display: flex; align-items: center; gap: 12px; margin: 26px 24px 0 !important; color: var(--md-on-surface-variant) !important; }
.loading-dots { display: inline-flex; gap: 5px; }
.loading-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--md-primary); animation: loading-dot 1.1s ease-in-out infinite; }
.loading-dots i:nth-child(2) { animation-delay: .15s; }
.loading-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes loading-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .loading-dots i { animation: none; opacity: .7; } }

/* Freunde-Dialog: Feld mit Button darin, ruhige Zeilen */
#friends-modal .friends-section { margin-bottom: 18px; }
#friends-modal .friend-add-row {
  display: flex !important; align-items: center; gap: 0 !important; padding: 4px 4px 4px 16px;
  border: 1.5px solid var(--md-outline-variant); border-radius: 999px; background: transparent;
}
#friends-modal .friend-add-row:focus-within { border-color: var(--md-primary); }
#friends-modal .friend-add-row .admin-input { flex: 1; min-width: 0; min-height: 44px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: left !important; padding: 0 !important; box-shadow: none !important; outline: none !important; }
#friends-modal .friend-add-row #btn-add-friend { width: 44px !important; height: 44px !important; flex: none; margin: 0 !important; padding: 0 !important; font-size: 1.3rem; line-height: 1; }
#friends-modal .friend-add-status { margin: 8px 4px 0 !important; font-size: .82rem; }

#friends-modal .friend-item, #friends-modal .friend-request-item { display: flex !important; align-items: center; gap: 10px; }
#friends-modal .friend-item-name { flex: 1; min-width: 0; }
#friends-modal .friend-item-streak { margin: 0 !important; font-size: .8rem !important; text-align: right; }
#friends-modal .btn-remove-friend {
  width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0 !important; background: transparent !important;
  color: var(--md-on-surface-variant) !important; font-size: 0 !important; position: relative; flex: none;
}
#friends-modal .btn-remove-friend::before, #friends-modal .btn-remove-friend::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.8px; margin: -1px 0 0 -6.5px; background: currentColor; border-radius: 2px; transform: rotate(45deg);
}
#friends-modal .btn-remove-friend::after { transform: rotate(-45deg); }
#friends-modal .btn-remove-friend:hover { background: var(--md-surface-container) !important; color: var(--md-error) !important; }

#friends-modal .friend-request-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#friends-modal .friend-request-sub { font-size: .75rem !important; color: var(--md-on-surface-variant) !important; }
#friends-modal .friend-request-actions { display: flex; gap: 4px; flex: none; }
#friends-modal .btn-request-accept, #friends-modal .btn-request-reject { border: 0 !important; border-radius: 999px !important; padding: 8px 14px !important; font-size: .8rem !important; font-weight: 720 !important; box-shadow: none !important; }
#friends-modal .btn-request-accept { background: var(--md-primary) !important; color: var(--md-on-primary) !important; }
#friends-modal .btn-request-reject { background: transparent !important; color: var(--md-on-surface-variant) !important; }
#friends-modal .friends-list > p { color: var(--md-on-surface-variant) !important; text-align: left !important; padding: 10px 0 !important; }
#friends-modal .friend-add-row #btn-add-friend { min-height: 44px !important; min-width: 44px !important; max-height: 44px; aspect-ratio: 1 / 1; border-radius: 50% !important; display: grid !important; place-items: center; }

/* Dark Mode in den Einstellungen: normaler Schalter wie beim Roast-Modus */
#settings-modal .settings-theme-toggle { display: flex !important; align-items: center; gap: 12px; padding: 8px 0 !important; min-height: 0 !important; text-align: left; }
#settings-modal .settings-theme-toggle .md3-theme-icon { display: none !important; }
#settings-modal .settings-theme-toggle > span:nth-child(2) { flex: 1; font-size: .95rem; font-weight: 700; color: var(--md-on-surface); }
#settings-modal .settings-theme-toggle .md3-theme-state {
  position: relative; flex: none; width: 52px; height: 30px; margin-left: auto; font-size: 0 !important; color: transparent !important;
  border-radius: 999px; background: var(--md-outline); transition: background .2s;
}
#settings-modal .settings-theme-toggle .md3-theme-state::after {
  content: ''; position: absolute; left: 3px; top: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--md-surface); transition: transform .2s;
}
#settings-modal .settings-theme-toggle[aria-pressed="true"] .md3-theme-state { background: var(--md-primary); }
#settings-modal .settings-theme-toggle[aria-pressed="true"] .md3-theme-state::after { transform: translateX(22px); }
#settings-modal .settings-theme-toggle:focus-visible .md3-theme-state { outline: 2px solid var(--md-primary); outline-offset: 3px; }