:root {
      --bg: #090d14;
      --card: rgba(255,255,255,0.08);
      --card2: rgba(255,255,255,0.12);
      --line: rgba(255,255,255,0.13);
      --text: #f8fafc;
      --muted: rgba(248,250,252,0.68);
      --muted2: rgba(248,250,252,0.43);
      --green: #39D985;
      --accent: #39D985;
      --accentRgb: 57,217,133;
      --accentDeepRgb: 42,179,106;
      --accentHiRgb: 98,232,163;
      --accentSoft: rgba(var(--accentRgb),0.14);
      --accentLine: rgba(var(--accentRgb),0.28);
      --accentFocus: rgba(var(--accentRgb),0.82);
      --accentGlow: rgba(var(--accentRgb),0.18);
      --accentText: #bbf7d0;
      --accentTextLight: #166534;
      --cyan: #38bdf8;
      --red: #ef4444;
      --yellow: #facc15;
      --input: rgba(2,6,23,0.74);
      --safeTop: env(safe-area-inset-top, 0px);
      --safeBottom: env(safe-area-inset-bottom, 0px);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(circle at 20% 0%, rgba(var(--accentRgb),0.16), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(56,189,248,0.14), transparent 32%),
        var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
      font-size: 16px;
      overscroll-behavior: none;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      min-height: 100dvh;
    }

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

    button {
      border: 0;
      cursor: pointer;
      color: inherit;
    }

    input,
    textarea,
    select {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--input);
      color: var(--text);
      padding: 11px 13px;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      font-size: 16px;
    }

    input[type="checkbox"] {
      width: 24px;
      height: 24px;
      min-height: 24px;
      padding: 0;
      appearance: auto;
      -webkit-appearance: checkbox;
      accent-color: var(--green);
    }

    input[type="number"] {
      appearance: textfield;
    }

    textarea {
      resize: vertical;
      min-height: 82px;
      line-height: 1.38;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--muted2);
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: var(--accentFocus);
      box-shadow: 0 0 0 4px rgba(var(--accentRgb),0.12);
    }

    a {
      color: var(--cyan);
      text-decoration: none;
    }

    .hidden {
      display: none !important;
    }



    .bootSplash {
      position: fixed;
      inset: 0;
      z-index: 999;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 20% 0%, rgba(var(--accentRgb, 57,217,133),0.18), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(56,189,248,0.12), transparent 34%),
        var(--bg);
      color: var(--text);
      transition: opacity 180ms ease, visibility 180ms ease;
    }

    .bootSplash.hiddenSplash {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .bootLogoImage {
      width: min(42vw, 190px);
      height: min(42vw, 190px);
      object-fit: contain;
      filter: drop-shadow(0 22px 46px rgba(var(--accentRgb, 57,217,133),0.22));
      animation: bootLogoIn 180ms ease-out both;
    }

    @keyframes bootLogoIn {
      from { opacity: 0; transform: scale(.94); }
      to { opacity: 1; transform: scale(1); }
    }

    .app {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      min-height: 100dvh;
      padding: calc(8px + var(--safeTop)) 10px calc(18px + var(--safeBottom));
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      margin: calc(-8px - var(--safeTop)) -10px 10px;
      padding: calc(10px + var(--safeTop)) 10px 10px;
      background: rgba(9,13,20,0.92);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

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

    .brand {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
    }

    .brandMark {
      width: 31px;
      height: 31px;
      flex: 0 0 31px;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 4px 9px rgba(var(--accentRgb),0.18));
    }

    .brandIcon {
      width: 38px;
      height: 38px;
    }

    .brandText {
      min-width: 0;
    }

    .brandTitle {
      font-weight: 950;
      letter-spacing: -0.055em;
      font-size: clamp(19px, 4.85vw, 28px);
      line-height: 0.95;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
    }

    .brandSub {
      display: none;
    }

    .topActions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 0 0 auto;
      justify-content: flex-end;
      max-width: calc(100vw - 112px);
    }

    .iconBtn,
    .plusBtn {
      width: 39px;
      height: 39px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      line-height: 1;
      flex: 0 0 39px;
    }

    .iconBtn {
      background: var(--card);
      border: 1px solid var(--line);
      font-size: 21px;
    }

    .plusBtn {
      background: linear-gradient(135deg, rgba(var(--accentHiRgb),0.96), rgba(var(--accentDeepRgb),0.92));
      color: white;
      font-size: 30px;
      box-shadow: 0 10px 26px rgba(var(--accentRgb),0.22);
    }

    .page {
      display: grid;
      gap: 11px;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 21px;
      overflow: hidden;
      box-shadow: 0 14px 44px rgba(0,0,0,0.30);
    }

    .cardPad {
      padding: 12px;
    }

    .hero {
      padding: 18px 15px;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(30px, 8vw, 42px);
      line-height: 0.98;
      letter-spacing: -0.065em;
    }

    .hero p {
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.4;
      font-size: 15px;
    }

    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 15px;
      padding: 4px;
      border-radius: 16px;
      background: rgba(255,255,255,0.06);
    }

    .tabBtn {
      min-height: 41px;
      border-radius: 13px;
      background: transparent;
      color: var(--muted);
      font-weight: 850;
      font-size: 15px;
    }

    .tabBtn.active {
      background: rgba(255,255,255,0.13);
      color: var(--text);
    }

    .form {
      display: grid;
      gap: 11px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
      padding-left: 2px;
    }

    .labelReq::after {
      content: " *";
      color: #fca5a5;
    }

    .hint {
      color: var(--muted2);
      font-size: 13px;
      line-height: 1.35;
      padding-left: 2px;
    }

    .row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }

    .row3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .btn {
      min-height: 40px;
      padding: 9px 11px;
      border-radius: 14px;
      background: var(--card2);
      border: 1px solid var(--line);
      font-weight: 850;
      text-align: center;
      font-size: 15px;
    }

    .btnPrimary {
      background: linear-gradient(135deg, rgba(var(--accentHiRgb),0.96), rgba(var(--accentDeepRgb),0.92));
      border: 0;
      color: white;
      box-shadow: 0 8px 20px rgba(var(--accentRgb),0.18);
    }

    .btnDanger {
      background: rgba(239,68,68,0.13);
      border-color: rgba(239,68,68,0.28);
      color: #fecaca;
    }

    .btnWarn {
      background: rgba(250,204,21,0.12);
      border-color: rgba(250,204,21,0.26);
      color: #fde68a;
    }

    .btnGhost {
      background: transparent;
      box-shadow: none;
    }

    .msg {
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 13px;
      line-height: 1.38;
      color: var(--muted);
    }

    .msg.ok {
      color: var(--accentText);
    }

    .msg.err {
      color: #fca5a5;
    }

    .secretBox {
      padding: 12px;
      border-radius: 15px;
      background: rgba(2,6,23,0.72);
      border: 1px dashed rgba(255,255,255,0.2);
      word-break: break-all;
      font-weight: 900;
      letter-spacing: 0.07em;
      line-height: 1.45;
      font-size: 14px;
    }

    .sectionHead {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 8px;
      margin-bottom: 10px;
    }

    .sectionTitle {
      margin: 0;
      font-size: clamp(26px, 7vw, 36px);
      letter-spacing: -0.055em;
      line-height: 0.98;
    }

    .sectionMeta {
      color: var(--muted);
      font-size: 13px;
      margin-top: 4px;
    }

    .quickStats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }

    .stat {
      min-height: 55px;
      border-radius: 15px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 9px 10px;
    }

    .statNum {
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -0.05em;
      line-height: 1;
    }

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

    .stat.statLateAlert {
      background: rgba(239,68,68,0.16);
      border-color: rgba(239,68,68,0.36);
      box-shadow: inset 0 0 0 1px rgba(239,68,68,0.16);
    }

    .stat.statLateAlert .statNum,
    .stat.statLateAlert .statLabel {
      color: #fecaca;
    }

    .filterRow {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-bottom: 9px;
    }

    .filterBtn {
      min-height: 38px;
      border-radius: 13px;
      font-size: 14px;
      padding: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-weight: 850;
    }

    .filterBtn.active {
      color: white;
      background: rgba(var(--accentRgb),0.15);
      border-color: rgba(var(--accentRgb),0.28);
    }

    .filterBtn.contactDue:not(.active) {
      color: #fde68a;
      background: rgba(250,204,21,0.12);
      border-color: rgba(250,204,21,0.34);
      box-shadow: 0 0 0 1px rgba(250,204,21,0.12), 0 10px 24px rgba(250,204,21,0.08);
    }

    .filterBtn.contactDue:not(.active)::after {
      content: " •";
      color: #facc15;
    }

    .searchWrap {
      margin-bottom: 9px;
    }

    .taskList {
      display: grid;
      gap: 7px;
    }

    .task {
      border-radius: 16px;
      background: rgba(255,255,255,0.068);
      border: 1px solid rgba(255,255,255,0.095);
      padding: 8px 9px;
      display: grid;
      gap: 7px;
    }

    .task.blocked {
      border-color: rgba(250,204,21,0.25);
      background: rgba(250,204,21,0.055);
    }

    .task.done {
      opacity: 0.58;
    }

    .taskMain {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 9px;
      align-items: start;
    }

    .checkBtn {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      border: 1px solid rgba(var(--accentRgb),0.36);
      background: linear-gradient(135deg, rgba(var(--accentHiRgb),0.95), rgba(var(--accentDeepRgb),0.86));
      color: white;
      display: grid;
      place-items: center;
      font-size: 24px;
      font-weight: 950;
      box-shadow: 0 8px 20px rgba(var(--accentRgb),0.20);
    }

    .checkBtn:disabled {
      opacity: 0.45;
      filter: grayscale(0.3);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.13);
      box-shadow: none;
    }

    .taskTitleLine {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: start;
    }

    .taskTitle {
      font-weight: 950;
      letter-spacing: -0.03em;
      line-height: 1.08;
      font-size: clamp(23px, 5.2vw, 27px);
    }

    .taskBadges,
    .taskFooterBadges {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      flex-wrap: nowrap;
      min-width: 0;
    }

    .taskBadges .chip,
    .taskFooterBadges .chip {
      min-height: 24px;
      white-space: nowrap;
      font-size: 11px;
      padding: 4px 8px;
      flex: 0 0 auto;
    }

    .taskFooter {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) 36px;
      align-items: center;
      gap: 7px;
      margin-top: 1px;
    }

    .taskLeftActions {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .deadlineText {
      white-space: nowrap;
      font-size: 13px;
      font-weight: 900;
      color: var(--muted);
      padding-top: 1px;
    }

    .deadlineText.today {
      color: var(--accentText);
    }

    .deadlineText.late {
      color: #fca5a5;
    }

    .deadlineText.future {
      color: #bae6fd;
    }

    .taskNotes {
      margin-top: 5px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.32;
      white-space: pre-wrap;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .chip {
      min-height: 25px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-size: 12px;
      font-weight: 820;
      max-width: 100%;
    }

    .chipGreen {
      color: var(--accentText);
      background: rgba(var(--accentRgb),0.12);
      border-color: rgba(var(--accentRgb),0.22);
    }

    .chipRed {
      color: #fecaca;
      background: rgba(239,68,68,0.12);
      border-color: rgba(239,68,68,0.22);
    }

    .chipYellow {
      color: #fde68a;
      background: rgba(250,204,21,0.12);
      border-color: rgba(250,204,21,0.22);
    }

    .taskActions {
      display: grid;
      grid-template-columns: 38px 38px 38px 1fr 38px;
      gap: 7px;
      align-items: center;
      margin-top: 0;
    }

    .taskActions .btn,
    .taskActions .checkBtn,
    .taskFooter .btn,
    .taskFooter .checkBtn {
      width: 36px;
      height: 36px;
      min-height: 36px;
      padding: 0;
      border-radius: 13px;
      font-size: 19px;
      line-height: 1;
      flex: 0 0 36px;
    }

    .taskActions [data-action="delete"] {
      grid-column: 5;
    }

    .taskActions [data-action="edit"],
    .taskActions [data-action="postpone"],
    .taskFooter [data-action="edit"],
    .taskFooter [data-action="postpone"] {
      font-size: 18px;
    }

    .sheetActions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .saveTopBtn {
      width: 41px;
      height: 41px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(var(--accentHiRgb),0.96), rgba(var(--accentDeepRgb),0.92));
      color: white;
      border: 0;
      font-size: 22px;
      font-weight: 950;
      display: grid;
      place-items: center;
      box-shadow: 0 8px 20px rgba(var(--accentRgb),0.18);
    }

    .devGrid {
      display: grid;
      gap: 10px;
    }

    .devBlock {
      border-radius: 16px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.09);
      padding: 11px;
    }

    .devBlock summary {
      cursor: pointer;
      font-weight: 900;
      font-size: 16px;
    }

    .devPre {
      white-space: pre-wrap;
      word-break: break-word;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .empty {
      padding: 16px 12px;
      border-radius: 17px;
      border: 1px dashed rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.045);
      text-align: center;
      color: var(--muted);
      line-height: 1.42;
      font-size: 15px;
    }

    .sheetOverlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      background: rgba(0,0,0,0.54);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 8px;
    }

    .sheet {
      width: 100%;
      max-width: 760px;
      max-height: calc(100dvh - 18px - var(--safeTop));
      overflow: auto;
      border-radius: 25px 25px 18px 18px;
      background:
        radial-gradient(circle at 20% 0%, rgba(var(--accentRgb),0.13), transparent 36%),
        #0d1320;
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow: 0 -20px 80px rgba(0,0,0,0.55);
      padding: 11px 13px calc(14px + var(--safeBottom));
    }

    .sheetHandle {
      width: 44px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.28);
      margin: 2px auto 12px;
    }

    .sheetHead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 13px;
    }

    .sheetTitle {
      margin: 0;
      font-size: 25px;
      letter-spacing: -0.055em;
      line-height: 1;
    }

    .closeBtn {
      width: 41px;
      height: 41px;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 24px;
      line-height: 1;
    }

    .suggestions {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .suggestion {
      min-height: 33px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.09);
      color: var(--muted);
      font-size: 13px;
      font-weight: 820;
    }

    .menuGrid,
    .contactList,
    .backupBox,
    .linkList,
    .debugList {
      display: grid;
      gap: 9px;
    }

    .menuItem,
    .contactItem,
    .linkItem,
    .tutorialBox,
    .switchRow,
    .debugItem {
      border-radius: 16px;
      background: rgba(255,255,255,0.065);
      border: 1px solid rgba(255,255,255,0.09);
      padding: 11px 12px;
    }

    .menuItem {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      gap: 12px;
    }

    .menuItem strong,
    .switchRow strong,
    .contactName,
    .debugTitle {
      display: block;
      font-size: 16px;
      font-weight: 900;
    }

    .menuItem span,
    .switchRow span,
    .contactMeta,
    .debugMeta {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 3px;
      line-height: 1.34;
    }

    .switchRow {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
    }

    .tutorialBox {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.38;
    }

    .tutorialBox b {
      color: var(--text);
    }

    .fileInput {
      padding: 9px;
    }

    .divider {
      height: 1px;
      background: rgba(255,255,255,0.09);
      margin: 4px 0;
    }

    .dangerZone {
      border: 1px solid rgba(239,68,68,0.25);
      background: rgba(239,68,68,0.07);
      border-radius: 16px;
      padding: 11px;
      display: grid;
      gap: 9px;
    }



    body.lightMode {
      --bg: #f6f8fb;
      --card: rgba(2,6,23,0.06);
      --card2: rgba(2,6,23,0.09);
      --line: rgba(2,6,23,0.14);
      --text: #07111f;
      --muted: rgba(7,17,31,0.68);
      --muted2: rgba(7,17,31,0.45);
      --input: rgba(255,255,255,0.86);
      background:
        radial-gradient(circle at 20% 0%, rgba(var(--accentRgb, 34,197,94),0.16), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(56,189,248,0.12), transparent 32%),
        var(--bg);
    }

    .taskHead {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .deadlineBadge {
      min-width: 0;
      text-align: right;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1.1;
      border: 1px solid rgba(56,189,248,0.24);
      background: rgba(56,189,248,0.12);
      color: #bae6fd;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .deadlineBadge.today {
      background: rgba(var(--accentRgb),0.14);
      border-color: rgba(var(--accentRgb),0.26);
      color: var(--accentText);
    }

    .deadlineBadge.late {
      background: rgba(239,68,68,0.14);
      border-color: rgba(239,68,68,0.28);
      color: #fecaca;
    }

    .deadlineBadge.soon {
      background: rgba(249,115,22,0.16);
      border-color: rgba(249,115,22,0.30);
      color: #fed7aa;
    }

    .deadlineBadge.near {
      background: rgba(250,204,21,0.14);
      border-color: rgba(250,204,21,0.28);
      color: #fef3c7;
    }

    body.lightMode .deadlineBadge.future { color: #075985; }
    body.lightMode .deadlineBadge.today { color: var(--accentTextLight); }
    body.lightMode .deadlineBadge.near { color: #854d0e; }
    body.lightMode .deadlineBadge.soon { color: #9a3412; }
    body.lightMode .deadlineBadge.late { color: #991b1b; }

    .chipPrio0 { color: #dbeafe; background: rgba(59,130,246,0.11); border-color: rgba(59,130,246,0.2); }
    .chipPrio1 { color: #fde68a; background: rgba(250,204,21,0.12); border-color: rgba(250,204,21,0.24); }
    .chipPrio2 { color: #fed7aa; background: rgba(249,115,22,0.14); border-color: rgba(249,115,22,0.27); }
    .chipPrio3 { color: #fecaca; background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); }

    body.lightMode .chipPrio0 { color: #1d4ed8; }
    body.lightMode .chipPrio1 { color: #854d0e; }
    body.lightMode .chipPrio2 { color: #9a3412; }
    body.lightMode .chipPrio3 { color: #991b1b; }


    @media (max-width: 430px) {
      .taskHead {
        grid-template-columns: 1fr;
      }

      .taskFooter {
        grid-template-columns: auto minmax(0, 1fr) 36px;
      }

      .taskBadges,
      .taskFooterBadges {
        justify-content: flex-end;
      }
    }

    .calendarControls {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }

    .calendarList {
      display: grid;
      gap: 9px;
    }

    .calendarGroup {
      border-radius: 17px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.09);
      padding: 10px;
    }

    .calendarGroupTitle {
      font-weight: 950;
      margin-bottom: 8px;
      color: var(--text);
    }

    .calendarTask {
      width: 100%;
      text-align: left;
      border-radius: 14px;
      padding: 9px 10px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.08);
      display: grid;
      gap: 4px;
      margin-top: 7px;
    }

    .calendarTask strong { font-size: 15px; }
    .calendarTask span { color: var(--muted); font-size: 13px; line-height: 1.3; }

    .contactMenuActions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }

    .devSummaryGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin: 10px 0;
    }

    .devTableWrap {
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.04);
      margin-top: 8px;
    }

    .devTable {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      min-width: 520px;
    }

    .devTable th,
    .devTable td {
      padding: 7px 8px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      text-align: left;
      vertical-align: top;
      max-width: 260px;
      word-break: break-word;
    }

    .devTable th {
      color: var(--muted);
      font-weight: 900;
      background: rgba(255,255,255,0.05);
    }

    @media (max-width: 380px) {
      .app {
        padding-left: 8px;
        padding-right: 8px;
      }

      .topbar {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
      }

      .brand {
        gap: 6px;
      }

      .brandMark {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
      }

      .brandTitle {
        font-size: 19px;
      }

      .brandSub {
        font-size: 13px;
      }

      .topActions {
        gap: 3px;
        max-width: calc(100vw - 102px);
      }

      .iconBtn,
      .plusBtn {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 18px;
      }

      .plusBtn {
        font-size: 27px;
      }

      .sectionTitle {
        font-size: 25px;
      }

      .taskTitle {
        font-size: 16px;
      }
    }

    @media (min-width: 680px) {
      .app {
        padding-left: 16px;
        padding-right: 16px;
      }

      .sheetOverlay {
        align-items: center;
      }

      .sheet {
        border-radius: 26px;
      }
    }


    /* INDEX-023: Lightmode, Farbauswahl und echter Kalender */
    :root {
      --accentRgb: 57,217,133;
      --greenSoft: var(--accentSoft);
      --greenLine: var(--accentLine);
    }

    body.lightMode {
      --bg: #f4f7fb;
      --card: rgba(255,255,255,0.92);
      --card2: rgba(255,255,255,0.98);
      --line: rgba(15,23,42,0.14);
      --text: #0f172a;
      --muted: rgba(15,23,42,0.68);
      --muted2: rgba(15,23,42,0.42);
      --input: rgba(255,255,255,0.96);
      background:
        radial-gradient(circle at 20% 0%, rgba(var(--accentRgb),0.16), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(56,189,248,0.10), transparent 34%),
        var(--bg);
      color: var(--text);
    }

    body.lightMode .topbar {
      background: rgba(244,247,251,0.93);
      border-bottom-color: rgba(15,23,42,0.10);
    }

    body.lightMode .card,
    body.lightMode .sheet,
    body.lightMode .taskItem,
    body.lightMode .contactItem,
    body.lightMode .calendarPeriod,
    body.lightMode .devBlock {
      background: var(--card);
      border-color: var(--line);
      color: var(--text);
      box-shadow: 0 16px 42px rgba(15,23,42,0.08);
    }

    body.lightMode input,
    body.lightMode textarea,
    body.lightMode select {
      background: var(--input);
      color: var(--text);
      border-color: var(--line);
    }

    body.lightMode .btn,
    body.lightMode .filterBtn,
    body.lightMode .iconBtn,
    body.lightMode .menuItem,
    body.lightMode .calendarDay {
      color: var(--text);
      border-color: var(--line);
    }

    body.lightMode .btnPrimary,
    body.lightMode .plusBtn,
    body.lightMode .saveTopBtn {
      color: var(--accentTextLight);
    }

    .colorPickRow {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 10px;
      align-items: center;
    }

    input[type="color"].colorPicker {
      width: 58px;
      min-height: 46px;
      padding: 4px;
      border-radius: 15px;
      appearance: auto;
      -webkit-appearance: none;
      background: var(--input);
    }

    .calendarStrip {
      display: flex;
      overflow-x: auto;
      gap: 12px;
      padding: 2px 2px 14px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .calendarPeriod {
      min-width: min(92vw, 720px);
      scroll-snap-align: start;
      border-radius: 20px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.09);
      padding: 12px;
    }

    .calendarPeriodTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-weight: 950;
      margin-bottom: 10px;
    }

    .calendarHint {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
      margin: -2px 0 10px;
    }

    .calendarMonthGrid {
      display: grid;
      grid-template-columns: repeat(7, minmax(42px, 1fr));
      gap: 6px;
    }

    .calendarWeekday {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-align: center;
      padding: 2px 0;
    }

    .calendarDay {
      min-height: 78px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.055);
      padding: 7px;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow: hidden;
    }

    .calendarDay.outside {
      opacity: 0.44;
    }

    .calendarDay.today {
      border-color: var(--greenLine);
      box-shadow: inset 0 0 0 1px var(--greenLine);
      background: var(--greenSoft);
    }

    .calendarDayNum {
      font-weight: 950;
      font-size: 13px;
    }

    .calendarPill {
      width: 100%;
      border-radius: 999px;
      padding: 3px 6px;
      font-size: 11px;
      font-weight: 850;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .calendarPill.start { background: rgba(var(--accentRgb),0.14); border-color: rgba(var(--accentRgb),0.22); color: var(--accentText); }
    .calendarPill.deadline { background: rgba(56,189,248,0.14); border-color: rgba(56,189,248,0.22); color: #bae6fd; }
    .calendarPill.birthday { background: rgba(250,204,21,0.16); border-color: rgba(250,204,21,0.26); color: #fef3c7; }
    body.lightMode .calendarPill.start { color: var(--accentTextLight); }
    body.lightMode .calendarPill.deadline { color: #075985; }
    body.lightMode .calendarPill.birthday { color: #854d0e; }

    .calendarMultiMonths {
      display: grid;
      gap: 12px;
    }

    @media (min-width: 680px) {
      .calendarMultiMonths {
        grid-template-columns: repeat(2, 1fr);
      }
    }


    /* INDEX-024: Hauptmenü einklappbar, Suche per Button, bessere Kalender-Tagesansicht */
    .homeActions {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .homeActions .btn {
      width: 41px;
      height: 41px;
      min-height: 41px;
      padding: 0;
      border-radius: 999px;
      font-size: 20px;
      line-height: 1;
    }

    #searchToggleBtn {
      font-size: 25px;
      line-height: 0.9;
    }

    #groupFilterBtn {
      font-size: 21px;
      line-height: 1;
    }

    #groupFilterBtn.active {
      background: rgba(var(--accentRgb),0.18);
      border-color: rgba(var(--accentRgb),0.34);
      color: var(--accentText);
    }

    .choiceList {
      display: grid;
      gap: 8px;
      margin: 10px 0;
    }

    .choiceBtn {
      width: 100%;
      min-height: 45px;
      border-radius: 15px;
      background: rgba(255,255,255,0.075);
      border: 1px solid rgba(255,255,255,0.10);
      padding: 10px 12px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-weight: 850;
    }

    .choiceBtn.active {
      background: rgba(var(--accentRgb),0.16);
      border-color: rgba(var(--accentRgb),0.34);
      color: var(--accentText);
    }

    body.lightMode .choiceBtn {
      background: rgba(255,255,255,0.82);
      border-color: rgba(15,23,42,0.13);
    }

    .overviewCollapsed .quickStats,
    .overviewCollapsed .filterRow {
      display: none;
    }

    .searchWrap.hiddenSearch {
      display: none;
    }

    .calendarDay {
      min-height: 96px;
    }

    .calendarPill {
      border-radius: 9px;
      white-space: normal;
      line-height: 1.16;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .calendarDaySheetList {
      display: grid;
      gap: 8px;
      margin: 10px 0;
    }

    .calendarDayTask {
      width: 100%;
      text-align: left;
      border-radius: 15px;
      padding: 10px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.09);
      display: grid;
      gap: 4px;
    }

    .calendarDayTask strong {
      font-size: 16px;
      line-height: 1.22;
    }

    .calendarDayTask span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
    }

    body.lightMode .task,
    body.lightMode .stat,
    body.lightMode .menuItem,
    body.lightMode .switchRow,
    body.lightMode .debugItem,
    body.lightMode .calendarDayTask,
    body.lightMode .calendarGroup,
    body.lightMode .calendarTask,
    body.lightMode .tutorialBox,
    body.lightMode .linkItem,
    body.lightMode .contactItem {
      background: rgba(255,255,255,0.82);
      border-color: rgba(15,23,42,0.13);
      color: var(--text);
    }

    body.lightMode .stat.statLateAlert {
      background: rgba(239,68,68,0.12);
      border-color: rgba(239,68,68,0.32);
    }

    body.lightMode .stat.statLateAlert .statNum,
    body.lightMode .stat.statLateAlert .statLabel {
      color: #991b1b;
    }

    body.lightMode .deadlineText.future { color: #075985; }
    body.lightMode .deadlineText.today { color: var(--accentTextLight); }
    body.lightMode .deadlineText.late { color: #991b1b; }
    body.lightMode .chipGreen { color: var(--accentTextLight); }
    body.lightMode .chipYellow { color: #854d0e; }
    body.lightMode .chipRed { color: #991b1b; }


    .petSheet {
      overflow: hidden;
    }

    .petPanel {
      display: grid;
      gap: 13px;
    }

    .petStage {
      position: relative;
      min-height: 220px;
      border-radius: 24px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 24%, rgba(var(--accentRgb),0.28), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(56,189,248,0.18), transparent 28%),
        rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
    }

    .petDino {
      position: relative;
      z-index: 2;
      font-size: var(--petSize, 92px);
      line-height: 1;
      filter: drop-shadow(0 18px 22px rgba(0,0,0,0.30));
      transform-origin: 50% 92%;
      animation: petBreathe 2.7s ease-in-out infinite;
      cursor: pointer;
      user-select: none;
    }


    .petDino,
    .emojiGlyph {
      font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    }

    .petDino img,
    .fluentPetImg {
      width: 1em;
      height: 1em;
      display: inline-block;
      object-fit: contain;
      vertical-align: -0.12em;
      pointer-events: none;
      user-select: none;
    }

    .leaderboardPetSkin {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.075);
      border: 1px solid rgba(255,255,255,0.09);
      font-size: 26px;
      line-height: 1;
      overflow: hidden;
    }

    .leaderboardPetSkin .fluentPetImg {
      width: 32px;
      height: 32px;
      vertical-align: middle;
    }

    .petDino.dead {
      animation: none;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,0.45)) grayscale(0.25);
    }

    .petShadow.dead {
      opacity: 0.35;
    }

    .petShadow {
      position: absolute;
      z-index: 1;
      width: 42%;
      height: 18px;
      bottom: 39px;
      border-radius: 999px;
      background: rgba(0,0,0,0.24);
      filter: blur(2px);
    }

    .petHearts {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
    }

    .petHeart {
      position: absolute;
      left: 50%;
      top: 48%;
      font-size: 28px;
      animation: petHeartFloat 950ms ease-out forwards;
    }

    .petInfo {
      display: grid;
      gap: 10px;
    }

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

    .petTitleRow strong {
      font-size: 24px;
      font-weight: 950;
      letter-spacing: -0.04em;
    }

    #petLevelBadge {
      border-radius: 999px;
      padding: 7px 10px;
      background: rgba(var(--accentRgb),0.15);
      border: 1px solid rgba(var(--accentRgb),0.28);
      color: var(--text);
      font-weight: 950;
      font-size: 13px;
    }

    .petMood {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.36;
    }

    .petBars {
      display: grid;
      gap: 10px;
    }

    .petBarLabel {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 5px;
    }

    .petBar {
      height: 13px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .petBarFill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      transition: width 220ms ease;
    }

    .petBarFill.hunger {
      background: linear-gradient(90deg, rgba(239,68,68,0.92), rgba(250,204,21,0.96), rgba(var(--accentRgb),0.96));
    }

    .petBarFill.xp {
      background: linear-gradient(90deg, rgba(var(--accentDeepRgb),0.90), rgba(var(--accentHiRgb),0.96));
    }

    .petStats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .petStat {
      border-radius: 15px;
      padding: 9px 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .petStat strong {
      display: block;
      font-size: 18px;
      font-weight: 950;
      line-height: 1;
    }

    .petStat span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
    }

    .petActions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    @keyframes petBreathe {
      0%, 100% { transform: scale(1) rotate(-1deg); }
      50% { transform: scale(1.045) rotate(1deg); }
    }

    @keyframes petHeartFloat {
      0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
      18% { opacity: 1; }
      100% { opacity: 0; transform: translate(calc(-50% + var(--heartX, 0px)), -95px) scale(1.35); }
    }

    body.lightMode .petStage,
    body.lightMode .petStat {
      background: rgba(255,255,255,0.82);
      border-color: rgba(15,23,42,0.12);
    }


    /* INDEX-030: Cache nur anzeigen, Aktionen bis frischer Serverstand geladen ist sperren, Refresh-Icon dreht beim Laden */
    /* INDEX-043: Beim Start niemals Hauptaktionen blockieren. */
    body.homeHydrating .plusBtn,
    body.homeHydrating .taskActions .btn,
    body.homeHydrating .taskActions .checkBtn,
    body.homeHydrating .contactItem .btn,
    body.homeHydrating .choiceBtn {
      opacity: 1;
      pointer-events: auto;
      filter: none;
    }

    @keyframes taskillaRefreshSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    body.homeHydrating #refreshBtn,
    body.homeRefreshing #refreshBtn {
      animation: taskillaRefreshSpin 780ms linear infinite;
    }


    /* INDEX-031: Kontakte abschaltbar, Dev-Tabellen mobil lesbar */
    body.contactsFeatureDisabled #contactBtn,
    body.contactsFeatureDisabled #openContactsBtn,
    body.contactsFeatureDisabled #contactFilterBtn {
      display: none !important;
    }

    body.contactsFeatureDisabled .filterRow {
      grid-template-columns: 1fr 1fr;
    }

    .devTableWrap {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .devTable {
      min-width: max-content;
      width: max-content;
      table-layout: auto;
    }

    .devTable th,
    .devTable td {
      white-space: nowrap;
      word-break: normal;
      overflow-wrap: normal;
      max-width: none;
      vertical-align: top;
    }

    .devCell {
      display: inline-block;
      max-width: min(72vw, 560px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: top;
    }

    .devCell.long {
      white-space: pre-wrap;
      word-break: break-word;
      overflow-wrap: anywhere;
      max-width: min(76vw, 720px);
    }

    .devHint {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }



    /* INDEX-038: Aufgabenlayout ohne Ueberlappung, groessere Buttons, Kalenderpicker, sensible Aufgaben */
    .taskFooter {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 46px;
      align-items: center;
      gap: 8px;
    }

    .taskFooterMain {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .taskLeftActions {
      flex: 0 0 auto;
    }

    .taskFooterBadges {
      justify-content: flex-start;
      flex-wrap: wrap;
      min-width: 0;
      flex: 1 1 170px;
    }

    .taskActions .btn,
    .taskActions .checkBtn,
    .taskFooter .btn,
    .taskFooter .checkBtn {
      width: 46px;
      height: 46px;
      min-height: 46px;
      flex: 0 0 46px;
      border-radius: 16px;
    }

    .taskFooter [data-action="delete"] {
      grid-column: auto;
      background: var(--card2);
      border-color: var(--line);
      color: var(--muted);
    }

    .dateInputWrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 46px;
      gap: 7px;
      align-items: center;
    }

    .datePickBtn {
      width: 46px;
      height: 46px;
      min-height: 46px;
      border-radius: 15px;
      background: var(--card2);
      border: 1px solid var(--line);
      font-size: 20px;
    }

    .nativeDateInput {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .homeHeadActions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .sensitiveHidden .task.sensitiveTask {
      display: none;
    }

    .sensitiveMark {
      color: #f9a8d4;
      background: rgba(236,72,153,0.12);
      border-color: rgba(236,72,153,0.24);
    }

    .calendarStrip {
      scroll-snap-type: none;
      align-items: stretch;
    }

    .calendarPeriod {
      min-width: min(94vw, 720px);
      flex: 0 0 min(94vw, 720px);
    }

    .calendarDay.outside {
      opacity: 1;
      background: rgba(255,255,255,0.055);
      color: var(--muted);
    }

    @media (max-width: 430px) {
      .taskFooter {
        grid-template-columns: minmax(0, 1fr) 46px;
      }
      .taskFooterBadges .chip,
      .taskFooterBadges .deadlineBadge {
        max-width: 100%;
      }
    }



    /* INDEX-040: Mobile-Aufgabenlayout ohne Überlappung, große Buttons bleiben erhalten */
    .task {
      overflow: hidden;
    }

    .taskFooter {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .taskFooterMain {
      display: grid;
      gap: 7px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .taskLeftActions {
      flex: 0 0 auto;
      min-width: 0;
    }

    .taskFooterBadges {
      justify-content: flex-start;
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }

    .taskFooter .btn,
    .taskFooter .checkBtn,
    .taskLeftActions .btn,
    .taskLeftActions .checkBtn {
      width: 46px;
      height: 46px;
      min-width: 46px;
      min-height: 46px;
      flex: 0 0 46px;
      border-radius: 16px;
    }

    .taskFooter [data-action="delete"] {
      background: var(--card2);
      border: 1px solid var(--line);
      color: var(--muted);
      box-shadow: none;
    }

    .deadlineBadge,
    .taskFooterBadges .chip {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 430px) {
      .taskFooter {
        align-items: flex-start;
      }

      .taskFooterMain {
        grid-template-columns: 1fr;
      }

      .taskFooterBadges {
        padding-left: 0;
      }

      .homeActions {
        grid-template-columns: repeat(6, 46px);
        display: grid;
        justify-content: end;
      }
    }

    /* INDEX-040: Kalender ohne sichtbare Doppel-Tage aus Nachbar-Monaten */
    .calendarDay.outside {
      visibility: hidden;
      pointer-events: none;
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }



    /* INDEX-047: iPhone-Doppeltipp/Zoom stabilisieren und Header in allen Reitern gleich halten */
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      touch-action: manipulation;
    }

    body {
      overscroll-behavior-y: none;
    }

    button,
    .btn,
    .iconBtn,
    .plusBtn,
    .checkBtn,
    .task,
    .stat,
    .menuItem,
    .filterBtn {
      touch-action: manipulation;
    }

    input,
    textarea,
    select {
      touch-action: auto;
    }

    .sectionHead {
      display: grid;
      grid-template-columns: minmax(86px, 1fr) auto;
      align-items: start;
      gap: 8px;
    }

    .sectionHead > div:first-child {
      min-width: 0;
    }

    .sectionTitle {
      max-width: 100%;
      overflow-wrap: normal;
      word-break: normal;
    }

    .homeActions {
      display: grid;
      grid-template-columns: repeat(6, 46px);
      gap: 7px;
      justify-content: end;
      align-items: start;
      flex: 0 0 auto;
    }

    .homeActions .btn {
      width: 46px;
      height: 46px;
      min-width: 46px;
      min-height: 46px;
      padding: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-size: 21px;
      line-height: 1;
    }

    #sensitiveToggleBtn {
      font-family: "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
    }

    .quickStats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stat {
      min-width: 0;
    }

    .filterRow {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filterBtn {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .taskFooter {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 46px;
      align-items: start;
      gap: 8px;
    }

    .taskFooterMain {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .taskLeftActions {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .taskFooterBadges {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .taskFooter .btn,
    .taskFooter .checkBtn,
    .taskLeftActions .btn,
    .taskLeftActions .checkBtn {
      width: 46px;
      height: 46px;
      min-width: 46px;
      min-height: 46px;
      flex: 0 0 46px;
      border-radius: 16px;
    }

    .taskFooter [data-action="delete"] {
      background: var(--card2);
      border: 1px solid var(--line);
      color: var(--muted);
      box-shadow: none;
    }

    .taskFooterBadges .chip,
    .taskFooterBadges .deadlineBadge {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 380px) {
      .sectionHead {
        grid-template-columns: minmax(74px, 1fr) auto;
        gap: 6px;
      }

      .homeActions {
        grid-template-columns: repeat(6, 42px);
        gap: 5px;
      }

      .homeActions .btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        font-size: 20px;
      }
    }


    /* INDEX-048: Aufgabenformular entzerren, iOS-Datumspicker wirklich antippbar, Hauptmenü-Hintergrund einheitlich */

    /* INDEX-049: Dev-User umbenennen */
    #homeCard.card {
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--accentRgb),0.12), transparent 34%),
        linear-gradient(135deg, rgba(20,34,45,0.96), rgba(17,27,39,0.96));
      border-color: rgba(255,255,255,0.13);
    }

    body.lightMode #homeCard.card {
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--accentRgb),0.11), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,248,251,0.96));
    }

    #taskSheet .sheet {
      max-height: calc(100dvh - 18px - var(--safeTop));
    }

    #taskForm {
      gap: 15px;
    }

    #taskForm > .row2 {
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: start;
    }

    #taskForm .field {
      min-width: 0;
    }

    #taskForm .dateInputWrap {
      position: relative;
      grid-template-columns: minmax(0, 1fr) 52px;
      gap: 9px;
    }

    #taskForm .datePickBtn {
      width: 52px;
      height: 52px;
      min-height: 52px;
      border-radius: 17px;
      font-size: 22px;
      grid-column: 2;
      grid-row: 1;
      z-index: 1;
    }

    #taskForm .nativeDateInput {
      position: relative;
      grid-column: 2;
      grid-row: 1;
      width: 52px;
      height: 52px;
      min-height: 52px;
      padding: 0;
      opacity: 0.015;
      pointer-events: auto;
      z-index: 3;
      border: 0;
      border-radius: 17px;
      background: transparent;
      color: transparent;
      appearance: auto;
      -webkit-appearance: none;
    }

    #taskForm .nativeDateInput::-webkit-calendar-picker-indicator {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0.01;
      cursor: pointer;
    }

    #taskForm input,
    #taskForm select,
    #taskForm textarea {
      min-width: 0;
    }

    #taskForm .suggestions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    #taskForm .suggestion {
      width: 100%;
      min-height: 42px;
      padding: 8px 10px;
      white-space: normal;
      line-height: 1.18;
    }


    @media (max-width: 680px) {
      #taskForm > .row2 {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      #taskForm .dateInputWrap {
        grid-template-columns: minmax(0, 1fr) 54px;
      }

      #taskForm .datePickBtn,
      #taskForm .nativeDateInput {
        width: 54px;
        height: 54px;
        min-height: 54px;
        border-radius: 18px;
      }

      #taskForm .suggestions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 430px) {
      #taskSheet.sheetOverlay {
        padding-left: 6px;
        padding-right: 6px;
      }

      #taskSheet .sheet {
        padding-left: 12px;
        padding-right: 12px;
      }

      #taskForm .suggestions {
        grid-template-columns: 1fr 1fr;
      }
    }



    .devRenameBox {
      display: grid;
      gap: 8px;
      margin: 10px 0;
      padding: 10px;
      border-radius: 14px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.09);
    }

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

    .devRenameRow input {
      min-height: 40px;
    }

    @media (max-width: 520px) {
      .devRenameRow {
        grid-template-columns: 1fr;
      }
    }


    .profileNameEditRow { display: grid; grid-template-columns: 1fr 48px; gap: 8px; align-items: center; }
    .profileNameEditBtn { width: 48px; min-height: 46px; border-radius: 15px; background: var(--card2); border: 1px solid var(--line); font-size: 20px; display: grid; place-items: center; }
    .devAuditIssue { border-radius: 14px; border: 1px solid rgba(239,68,68,0.26); background: rgba(239,68,68,0.08); padding: 10px; margin-top: 8px; display: grid; gap: 7px; }
    .devAuditIssue.warn { border-color: rgba(250,204,21,0.26); background: rgba(250,204,21,0.08); }
    .devAuditActions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
    .devSecretBox { margin-top: 8px; padding: 10px; border-radius: 14px; border: 1px dashed rgba(250,204,21,0.45); background: rgba(250,204,21,0.08); word-break: break-all; font-weight: 900; letter-spacing: 0.05em; }
    .devSecurityOk { border-color: rgba(34,197,94,0.26); background: rgba(34,197,94,0.08); }
    .devSecurityWarn { border-color: rgba(250,204,21,0.34); background: rgba(250,204,21,0.09); }
    .devSecurityBad { border-color: rgba(239,68,68,0.34); background: rgba(239,68,68,0.09); }
    .devQuickGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
    .devQuickGrid .btn { min-height: 44px; }
    .devPetUnlockGrid { display: grid; gap: 8px; margin-top: 10px; }
    .devPetUnlockRow { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; border-radius: 14px; background: rgba(255,255,255,0.065); border: 1px solid rgba(255,255,255,0.09); padding: 9px 10px; }
    .devPetUnlockRow strong { display: block; font-size: 15px; font-weight: 900; }
    .devPetUnlockRow span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
    .devPetUnlockRow .emojiGlyph { font-size: 22px; line-height: 1; }
    .devPetUnlockControls { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
    #devCard button.devFeedbackActive,
    #devCard .btn.devFeedbackActive {
      transform: translateY(1px) scale(0.985);
      box-shadow: 0 0 0 3px rgba(var(--accentRgb),0.18);
      border-color: rgba(var(--accentRgb),0.42);
    }
    #devCard button.devFeedbackActive::after {
      content: " · läuft";
      font-size: 12px;
      color: var(--accentText);
    }
    .devMiniGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
    .devMiniStat { border-radius: 14px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.09); padding: 9px; }
    .devMiniStat strong { display:block; font-size: 18px; }
    .devMiniStat span { display:block; color: var(--muted); font-size: 12px; margin-top: 3px; }


    /* INDEX-086: DEV Cockpit, Tracking Center und sichtbare Pet-Freischaltung */
    .devCockpitNav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
    .devCockpitNav .btn { min-height: 48px; display: grid; place-items: center; line-height: 1.14; }
    .devSectionPill { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:5px 9px; border-radius:999px; background:rgba(var(--accentRgb),0.13); border:1px solid rgba(var(--accentRgb),0.24); color:var(--accentText); font-size:12px; font-weight:900; }
    .devUserCards { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:9px; margin:10px 0; }
    .devUserCard { width:100%; text-align:left; border-radius:17px; background:rgba(255,255,255,0.065); border:1px solid rgba(255,255,255,0.10); padding:10px; display:grid; gap:9px; }
    .devUserCard.active { background:rgba(var(--accentRgb),0.16); border-color:rgba(var(--accentRgb),0.38); box-shadow:0 0 0 1px rgba(var(--accentRgb),0.18) inset; }
    .devUserCardTop { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
    .devUserCardTitle { font-size:18px; font-weight:950; letter-spacing:-0.04em; line-height:1.05; }
    .devUserCardMeta { color:var(--muted); font-size:11px; margin-top:4px; word-break:break-all; }
    .devKpiRow { display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; }
    .devKpi { border-radius:12px; background:rgba(0,0,0,0.16); border:1px solid rgba(255,255,255,0.07); padding:7px; min-width:0; }
    .devKpi strong { display:block; font-size:17px; font-weight:950; line-height:1; }
    .devKpi span { display:block; color:var(--muted); font-size:10px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .devPetCenterGrid { display:grid; grid-template-columns: minmax(0, 1fr); gap:10px; margin-top:10px; }
    .devPetUserPicker { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:8px; align-items:center; }
    .devPetStatusGrid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:8px; margin-top:8px; }
    .devPetStatus { border-radius:14px; background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.09); padding:9px; }
    .devPetStatus strong { display:block; font-size:16px; font-weight:950; }
    .devPetStatus span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
    .devTrackingGrid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:9px; margin-top:10px; }
    .devTrackingCard { border-radius:16px; background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.09); padding:10px; display:grid; gap:8px; }
    .devTrackingCard strong { font-size:16px; font-weight:950; }
    .devTrackingCard span { color:var(--muted); font-size:12px; line-height:1.3; }
    .devChartBars { display:flex; align-items:end; gap:4px; min-height:78px; border-radius:14px; padding:8px; background:rgba(0,0,0,0.15); overflow-x:auto; }
    .devChartBar { min-width:16px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg, rgba(var(--accentHiRgb),0.96), rgba(var(--accentDeepRgb),0.92)); }
    .devActionMatrix { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; margin-top:10px; }
    .devActionMatrix .btn { min-height:44px; }
    body.lightMode .devUserCard, body.lightMode .devTrackingCard, body.lightMode .devPetStatus { background:rgba(255,255,255,0.86); border-color:rgba(15,23,42,0.13); }
    body.lightMode .devKpi, body.lightMode .devChartBars { background:rgba(15,23,42,0.05); }
    @media (max-width: 620px) { .devCockpitNav, .devUserCards, .devTrackingGrid, .devActionMatrix { grid-template-columns: 1fr; } .devPetUserPicker { grid-template-columns: 1fr; } .devPetStatusGrid, .devKpiRow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    @media (max-width: 520px) { .devQuickGrid, .devMiniGrid { grid-template-columns: 1fr; } }




    .devMergeGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
    .devMergeGrid select{width:100%;min-height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--txt);padding:10px;font-weight:800}
    .devCheckGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
    .devCheckGrid label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:14px;padding:10px;font-weight:800;color:var(--muted)}
    .devCheckGrid input{width:18px;height:18px;accent-color:var(--primary)}
    @media(max-width:760px){.devMergeGrid,.devCheckGrid{grid-template-columns:1fr}.devMergeGrid select{font-size:16px}}

    /* INDEX-053: DEV mobil nicht abschneiden + Papierkorb-Werkzeuge */
    #devCard.card {
      overflow: visible;
      max-width: 100%;
    }

    #devCard .cardPad {
      min-width: 0;
    }

    #devCard .sectionHead {
      gap: 10px;
      align-items: flex-start;
    }

    #devCard .sectionHead > div {
      min-width: 0;
    }

    #devCard .sectionTitle,
    #devCard .sectionMeta {
      overflow-wrap: anywhere;
    }

    .devGrid,
    .devBlock,
    .devBlock details,
    .devBlock summary {
      min-width: 0;
      max-width: 100%;
    }

    .devBlock {
      overflow: hidden;
    }

    .devBlock summary {
      list-style-position: outside;
      white-space: normal;
      line-height: 1.28;
      overflow-wrap: anywhere;
    }

    .devTableWrap {
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.08);
    }

    .devRestoreCard {
      border-radius: 16px;
      border: 1px solid rgba(250,204,21,0.26);
      background: rgba(250,204,21,0.07);
      padding: 10px;
      margin-top: 8px;
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .devRestoreTitle {
      font-weight: 950;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .devRestoreMeta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .devRestoreActions {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
    }

    .devRestoreActions .btn {
      min-height: 40px;
    }

    @media (max-width: 640px) {
      body:has(#devCard:not(.hidden)) .appShell {
        width: 100%;
        max-width: 100%;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
      }

      #devCard .cardPad {
        padding: 10px;
      }

      #devCard .sectionHead {
        display: grid;
        grid-template-columns: 1fr auto;
      }

      .devBlock {
        padding: 10px;
        border-radius: 15px;
      }

      .devMiniGrid,
      .devQuickGrid {
        grid-template-columns: 1fr !important;
      }

      .devAuditActions,
      .devRestoreActions,
      .devRenameRow {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }

      .devAuditActions .btn,
      .devRestoreActions .btn,
      .devRenameRow .btn,
      .devRenameRow input {
        width: 100%;
      }

      .devTable {
        min-width: 720px;
      }

      .devCell {
        max-width: 68vw;
      }

      .devCell.long {
        max-width: 72vw;
      }
    }

  

    /* INDEX-063: DEV-Monitoring + einheitlicher dunkler Home-Hintergrund */
    #homeCard.card,
    #homeCard.card.homeViewToday,
    #homeCard.card.homeViewAll {
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--accentRgb),0.12), transparent 34%),
        linear-gradient(135deg, rgba(20,34,45,0.96), rgba(17,27,39,0.96)) !important;
      border-color: rgba(255,255,255,0.13) !important;
    }
    #homeCard.card.homeViewContacts {
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--accentRgb),0.10), transparent 34%),
        linear-gradient(135deg, rgba(20,34,45,0.96), rgba(17,27,39,0.96)) !important;
      border-color: rgba(255,255,255,0.13) !important;
    }
    body.lightMode #homeCard.card,
    body.lightMode #homeCard.card.homeViewToday,
    body.lightMode #homeCard.card.homeViewAll,
    body.lightMode #homeCard.card.homeViewContacts {
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--accentRgb),0.11), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,248,251,0.96)) !important;
      border-color: rgba(15,23,42,0.10) !important;
    }
    .devMonitorControls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; }
    .devMonitorControls select { min-height:42px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--txt); padding:8px 10px; font-weight:900; }
    .devMonitorGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; }
    .devMonitorStat { border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.055); border-radius:16px; padding:10px; min-width:0; }
    .devMonitorStat strong { display:block; font-size:20px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; }
    .devMonitorStat span { display:block; color:var(--muted); font-size:12px; margin-top:4px; line-height:1.25; }
    .devChartGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
    .devChartBox { border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.12); border-radius:16px; padding:10px; overflow:hidden; }
    .devChartTitle { font-weight:900; margin-bottom:8px; }
    .devChart { width:100%; height:180px; display:block; overflow:visible; }
    .devChart text { fill:var(--muted); font-size:10px; font-weight:800; }
    .devChart .axis { stroke:rgba(255,255,255,0.18); stroke-width:1; }
    .devChart .bar { fill:rgba(var(--accentRgb),0.72); }
    .devChart .barAlt { fill:rgba(250,204,21,0.72); }
    .devChart .barBad { fill:rgba(239,68,68,0.72); }
    .devChart .line { fill:none; stroke:rgba(var(--accentRgb),0.92); stroke-width:2.5; }
    .devChart .lineAlt { fill:none; stroke:rgba(250,204,21,0.92); stroke-width:2.5; }
    .devMonitorNote { color:var(--muted); font-size:12px; line-height:1.35; margin-top:8px; }
    @media(max-width:760px){ .devMonitorGrid{grid-template-columns:repeat(2,minmax(0,1fr));} .devChartGrid{grid-template-columns:1fr;} .devChart{height:160px;} }

    .devToolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; }
    .devToolbar .btn { min-height:44px; }
    .devUserCards { display:grid; gap:8px; margin-top:10px; }
    .devUserCard { width:100%; text-align:left; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.06); border-radius:16px; padding:10px; display:grid; gap:7px; }
    .devUserCard.active { border-color:rgba(var(--accentRgb),0.42); background:rgba(var(--accentRgb),0.12); }
    .devUserCardTop { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
    .devUserCardTitle { font-weight:950; font-size:16px; line-height:1.15; }
    .devUserCardMeta { color:var(--muted); font-size:12px; line-height:1.3; overflow-wrap:anywhere; }
    .devKpiRow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
    .devKpi { border-radius:12px; padding:7px; background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.08); }
    .devKpi strong { display:block; font-size:16px; line-height:1; }
    .devKpi span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
    .devUserCharts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0; }
    @media(max-width:760px){ .devToolbar,.devUserCharts{grid-template-columns:1fr;} .devKpiRow{grid-template-columns:repeat(2,minmax(0,1fr));} }
    @media(max-width:420px){ .devMonitorGrid{grid-template-columns:1fr;} .devMonitorControls .btn,.devMonitorControls select{width:100%;} }


    /* INDEX-067: Einheitlicher Home-Hintergrund, Desktop-Scroll, saubere Settings, Kalender-Fix */
    html, body {
      min-height: 100%;
      overflow-y: auto;
    }

    #homeCard.card,
    #homeCard.card.homeViewToday,
    #homeCard.card.homeViewAll,
    #homeCard.card.homeViewContacts {
      background: linear-gradient(135deg, rgba(20,34,45,0.96), rgba(17,27,39,0.96)) !important;
      border-color: rgba(255,255,255,0.13) !important;
    }

    body.lightMode #homeCard.card,
    body.lightMode #homeCard.card.homeViewToday,
    body.lightMode #homeCard.card.homeViewAll,
    body.lightMode #homeCard.card.homeViewContacts {
      background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,248,251,0.96)) !important;
      border-color: rgba(15,23,42,0.10) !important;
    }

    .menuArrow {
      font-size: 18px;
      color: var(--muted);
      line-height: 1;
    }

    #settingsForm {
      gap: 14px;
    }

    #settingsForm > .field,
    #settingsForm > .switchRow,
    #settingsForm > .row2,
    #settingsForm > .settingsDevOnly,
    #settingsForm > .settingsDeveloperTools,
    #passkeySettingsBox,
    #authenticatorSettingsBox {
      border-radius: 16px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.09);
      padding: 11px 12px;
    }

    body.lightMode #settingsForm > .field,
    body.lightMode #settingsForm > .switchRow,
    body.lightMode #settingsForm > .row2,
    body.lightMode #settingsForm > .settingsDevOnly,
    body.lightMode #settingsForm > .settingsDeveloperTools,
    body.lightMode #passkeySettingsBox,
    body.lightMode #authenticatorSettingsBox {
      background: rgba(255,255,255,0.82);
      border-color: rgba(15,23,42,0.13);
    }

    .settingsDevOnly,
    .settingsDeveloperTools {
      display: grid;
      gap: 8px;
    }

    .settingsSectionTitle {
      margin: 4px 2px -4px;
      color: var(--accentText);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    body.lightMode .settingsSectionTitle {
      color: var(--accentTextLight);
    }



    /* INDEX-071: PC-Scroll, einheitlicher Home-Hintergrund, lesbarer Entwicklermodus */
    html,
    body {
      height: auto !important;
      min-height: 100% !important;
      overflow-y: auto !important;
      overscroll-behavior-y: auto !important;
    }

    .app,
    .page,
    #homeCard,
    #homeCard .cardPad,
    #todayTasks,
    .taskList {
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
      overscroll-behavior-y: auto !important;
    }

    #homeCard.card,
    #homeCard.card.homeViewToday,
    #homeCard.card.homeViewAll,
    #homeCard.card.homeViewContacts {
      background: linear-gradient(135deg, rgba(20,34,45,0.96), rgba(17,27,39,0.96)) !important;
      border-color: rgba(255,255,255,0.13) !important;
      box-shadow: 0 14px 44px rgba(0,0,0,0.30) !important;
    }

    #settingsForm > .settingsDeveloperTools,
    #developerModeHint {
      background: rgba(255,255,255,0.055) !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      color: var(--text) !important;
    }

    #settingsForm > .settingsDeveloperTools .hint,
    #developerModeHint {
      color: var(--muted) !important;
    }

    body.lightMode #settingsForm > .settingsDeveloperTools,
    body.lightMode #developerModeHint {
      background: rgba(255,255,255,0.82) !important;
      border-color: rgba(15,23,42,0.13) !important;
      color: var(--text) !important;
    }


    .calendarMonthGrid {
      grid-template-rows: repeat(6, minmax(88px, 1fr));
      align-items: stretch;
    }

    .calendarDay {
      height: 100%;
      min-height: 88px;
    }

    .calendarMultiMonths > div {
      display: grid;
      grid-template-rows: auto 1fr;
    }


    /* INDEX-073: Topbar-Stummschalter links neben Pet, T-Logo entfernt */
    .bootLogoIcon,
    .brandIcon {
      display: none !important;
    }

    #topMuteBtn {
      font-family: "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
    }

    .muteChoiceList {
      display: grid;
      gap: 8px;
      margin: 10px 0;
    }

    .muteChoiceBtn {
      width: 100%;
      min-height: 48px;
      border-radius: 15px;
      background: rgba(255,255,255,0.075);
      border: 1px solid rgba(255,255,255,0.10);
      padding: 10px 12px;
      text-align: left;
      font-weight: 900;
    }

    .muteChoiceBtn.active {
      background: rgba(var(--accentRgb),0.16);
      border-color: rgba(var(--accentRgb),0.34);
      color: var(--accentText);
    }

    body.lightMode .muteChoiceBtn {
      background: rgba(255,255,255,0.82);
      border-color: rgba(15,23,42,0.13);
      color: var(--text);
    }


    /* INDEX-078: Plus-Button nutzt exakt den gleichen Fade wie der Aufgaben-Abhaken-Button. */
    #openTaskBtn,
    .homeActions #openTaskBtn {
      background: linear-gradient(135deg, rgba(var(--accentHiRgb),0.95), rgba(var(--accentDeepRgb),0.86));
      border-color: rgba(var(--accentRgb),0.36);
      color: white;
      box-shadow: 0 8px 20px rgba(var(--accentRgb),0.20);
      transition: transform 150ms ease, box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease;
    }

    #openTaskBtn:hover,
    #openTaskBtn:focus-visible {
      filter: brightness(1.08);
      box-shadow: 0 0 0 1px rgba(var(--accentRgb),0.30), 0 16px 38px rgba(var(--accentRgb),0.34);
    }

    #openTaskBtn:active {
      transform: scale(0.96);
    }

    .taskFooterRight {
      display: grid;
      gap: 6px;
      justify-items: center;
      align-content: start;
    }

    .repeatUnderDelete {
      max-width: 112px;
      font-size: 11px;
      line-height: 1.12;
      text-align: right;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: normal;
    }

    .deadlineBadge.today,
    .deadlineBadge.soon {
      background: rgba(239,68,68,0.16);
      border-color: rgba(239,68,68,0.32);
      color: #fecaca;
    }

    body.lightMode .deadlineBadge.today,
    body.lightMode .deadlineBadge.soon {
      color: #991b1b;
    }

    .petActions {
      grid-template-columns: 1fr 1fr 1fr;
    }

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

    .leaderboardRow {
      display: grid;
      grid-template-columns: 42px 38px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      padding: 10px;
      border-radius: 15px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.09);
    }

    .leaderboardRank { font-weight: 950; font-size: 18px; }
    .leaderboardName { min-width: 0; font-weight: 900; overflow: visible; white-space: normal; }
    .leaderboardNameText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .leaderboardScore { color: var(--muted); font-size: 13px; font-weight: 850; }
    .leaderboardRow.petDead { opacity: 0.78; }
    .leaderboardRow.petDead .leaderboardPetSkin { filter: grayscale(0.42); }
    .leaderboardDead { color: #fca5a5; font-weight: 950; }
    .leaderboardSince { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; font-weight: 800; margin-top: 3px; white-space: nowrap; }
    .taskResetTopBtn { background: rgba(255,255,255,0.09); border: 1px solid var(--line); box-shadow: none; }


    /* INDEX-077: Pet-Sheet darf mobil nie horizontal abschneiden. */
    .petSheet {
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      touch-action: pan-y;
    }

    .petPanel,
    .petInfo,
    .petBars,
    .petStats,
    .petActions {
      min-width: 0;
    }

    .petBarLabel {
      min-width: 0;
      gap: 8px;
    }

    .petBarLabel span:last-child {
      min-width: 0;
      max-width: 48%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
    }

    .petActions .btn {
      min-width: 0;
      padding-left: 6px;
      padding-right: 6px;
      font-size: clamp(12px, 3.25vw, 15px);
      line-height: 1.15;
      word-break: normal;
    }

    @media (max-width: 430px) {
      .petStage {
        min-height: 178px;
      }

      .petDino {
        font-size: min(var(--petSize, 92px), 82px);
      }

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

      .petActions {
        grid-template-columns: 1.12fr 1fr 1fr;
        gap: 7px;
      }

      .petTitleRow {
        grid-template-columns: minmax(0, 1fr) auto;
        display: grid;
        align-items: center;
      }

      .petTitleRow strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .filterBtn {
      font-size: clamp(12px, 3.25vw, 14px);
      padding-left: 5px;
      padding-right: 5px;
      text-overflow: clip;
    }

    .filterRow {
      grid-template-columns: 1.18fr 0.9fr 0.92fr;
    }

    @media (max-width: 430px) {
      .sectionHead {
        grid-template-columns: 1fr;
      }
      .homeActions {
        width: 100%;
        justify-content: end;
      }
      .sectionTitle {
        font-size: clamp(32px, 11vw, 42px);
        line-height: 0.95;
      }
    }


    /* INDEX-092: Snackbar statt alert(), Icon-Erklaerung per Halten/Hover, echte SVG-Icons */

    .snackWrap {
      position: fixed;
      left: 50%;
      bottom: calc(14px + var(--safeBottom));
      transform: translateX(-50%);
      z-index: 300;
      display: grid;
      gap: 8px;
      width: min(94vw, 460px);
      pointer-events: none;
    }

    .snack {
      pointer-events: auto;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
      padding: 12px 13px;
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.97);
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 18px 46px rgba(0,0,0,0.46);
      color: var(--text);
      font-size: 14px;
      line-height: 1.36;
      animation: snackIn 180ms ease-out;
    }

    .snack.leaving { animation: snackOut 160ms ease-in forwards; }
    .snack.ok { border-color: rgba(var(--accentRgb),0.42); }
    .snack.err { border-color: rgba(239,68,68,0.46); }
    .snack.warn { border-color: rgba(250,204,21,0.42); }

    .snackIcon { display: grid; place-items: center; width: 22px; height: 22px; }
    .snack.ok .snackIcon { color: var(--accentText); }
    .snack.err .snackIcon { color: #fca5a5; }
    .snack.warn .snackIcon { color: #fde68a; }

    .snackText { min-width: 0; white-space: pre-wrap; word-break: break-word; }
    .snackText b { display: block; margin-bottom: 2px; }

    .snackActions {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .snackAction {
      min-height: 30px;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(var(--accentRgb), 0.18);
      border: 1px solid rgba(var(--accentRgb), 0.38);
      color: var(--accentText);
      font-weight: 800;
      white-space: nowrap;
    }

    .snackClose {
      width: 26px; height: 26px; border-radius: 999px;
      background: rgba(255,255,255,0.09);
      display: grid; place-items: center;
      color: var(--muted); flex: 0 0 26px;
    }

    body.lightMode .snack {
      background: rgba(255,255,255,0.99);
      border-color: rgba(15,23,42,0.16);
      color: #0f172a;
      box-shadow: 0 18px 46px rgba(15,23,42,0.18);
    }

    @keyframes snackIn {
      from { opacity: 0; transform: translateY(14px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes snackOut {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(10px); }
    }

    /* Erklaerblase */
    .explainTip {
      position: fixed;
      z-index: 320;
      max-width: min(78vw, 300px);
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(15,23,42,0.98);
      border: 1px solid rgba(var(--accentRgb),0.38);
      box-shadow: 0 16px 40px rgba(0,0,0,0.5);
      color: var(--text);
      font-size: 13px;
      line-height: 1.38;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 140ms ease, transform 140ms ease;
    }

    .explainTip.visible { opacity: 1; transform: translateY(0); }
    .explainTip strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
    .explainTip span { color: var(--muted); }

    body.lightMode .explainTip {
      background: rgba(255,255,255,0.99);
      color: #0f172a;
      border-color: rgba(15,23,42,0.18);
    }
    body.lightMode .explainTip span { color: rgba(15,23,42,0.7); }

    /* Fortschrittsring waehrend des Haltens/Hoverns */
    .explainPending { position: relative; }
    .explainPending::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      border: 2px solid transparent;
      border-top-color: rgba(var(--accentRgb),0.95);
      border-right-color: rgba(var(--accentRgb),0.55);
      animation: explainSpin var(--explainDelay, 5000ms) linear forwards;
      pointer-events: none;
    }

    @keyframes explainSpin {
      from { transform: rotate(0deg); opacity: 0.35; }
      to { transform: rotate(720deg); opacity: 1; }
    }

    /* Icons: echte SVGs, immer mittig, Groesse folgt dem Button */
    .btn > svg.ic,
    .iconBtn > svg.ic,
    .checkBtn > svg.ic,
    .plusBtn > svg.ic,
    .closeBtn > svg.ic,
    .saveTopBtn > svg.ic,
    .datePickBtn > svg.ic,
    .profileNameEditBtn > svg.ic {
      width: 21px;
      height: 21px;
      display: block;
      flex: 0 0 auto;
      pointer-events: none;
    }

    .iconBtn, .btn, .checkBtn, .plusBtn, .closeBtn, .saveTopBtn, .datePickBtn {
      display: grid;
      place-items: center;
      line-height: 0;
    }

    .homeActions .btn > svg.ic { width: 22px; height: 22px; }
    .topActions .iconBtn > svg.ic { width: 22px; height: 22px; }
    #openTaskBtn > svg.ic { width: 24px; height: 24px; }
    .taskFooter .btn > svg.ic,
    .taskLeftActions .btn > svg.ic,
    .taskLeftActions .checkBtn > svg.ic { width: 20px; height: 20px; }

    .iconBadge {
      position: absolute;
      top: -3px;
      right: -3px;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      border-radius: 999px;
      background: rgba(var(--accentRgb),0.98);
      color: #06240f;
      font-size: 10px;
      font-weight: 950;
      display: grid;
      place-items: center;
      line-height: 1;
    }

    .homeActions .btn, .topActions .iconBtn { position: relative; }

    .recentDoneList { display: grid; gap: 8px; margin: 10px 0; }

    .recentDoneItem {
      border-radius: 15px;
      background: rgba(255,255,255,0.065);
      border: 1px solid rgba(255,255,255,0.09);
      padding: 10px 11px;
      display: grid;
      gap: 4px;
    }

    .recentDoneItem strong { font-size: 15px; line-height: 1.22; }
    .recentDoneItem span { color: var(--muted); font-size: 12.5px; line-height: 1.3; }

    body.lightMode .recentDoneItem {
      background: rgba(255,255,255,0.86);
      border-color: rgba(15,23,42,0.13);
    }

    .recentDoneTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }


    /* INDEX-093: Diagramme im DEV-Bereich */
    .devChart .grid { stroke: rgba(255,255,255,0.09); stroke-width: 1; }
    .devChart .axis { stroke: rgba(255,255,255,0.22); stroke-width: 1; }
    .devChart text { fill: var(--muted); font-size: 10px; font-weight: 800; }
    .devChart .barValue { fill: var(--text); font-size: 9.5px; }
    body.lightMode .devChart .grid { stroke: rgba(15,23,42,0.10); }
    body.lightMode .devChart .axis { stroke: rgba(15,23,42,0.25); }

    .devChart { width: 100%; height: auto; max-height: 260px; }

    /* Diagramme brauchen Breite. Die DEV-Karte ist auf 760px gedeckelt - zwei
       Spalten ergaeben ~120px hohe Charts und damit unlesbare Achsen. Die Breite
       des Containers, nicht die des Fensters, ist hier die Grenze; ein
       Media-Query auf die Viewport-Breite waere deshalb das falsche Werkzeug. */
    #devAnalyticsResult .devChartGrid { grid-template-columns: minmax(0, 1fr) !important; }

    .chartLegend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
    .chartLegend.column { flex-direction: column; gap: 6px; }
    .chartLegendItem { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; font-weight: 800; }
    .chartLegendItem i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }

    .rankList { display: grid; gap: 7px; }
    .rankRow { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: 9px; align-items: center; }
    .rankLabel { color: var(--text); font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rankTrack { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
    .rankFill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--accentHiRgb),0.95), rgba(var(--accentDeepRgb),0.90)); }
    .rankValue { color: var(--muted); font-size: 11.5px; font-weight: 850; white-space: nowrap; }
    body.lightMode .rankTrack { background: rgba(15,23,42,0.09); }

    .donutWrap { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: center; }
    .donutSvg { width: 160px; height: 160px; }
    .donutTotal { fill: var(--text); font-size: 20px; font-weight: 950; }
    .donutCaption { fill: var(--muted); font-size: 9.5px; font-weight: 800; }

    .spark { width: 90px; height: 26px; display: block; }

    @media (max-width: 620px) {
      .donutWrap { grid-template-columns: 1fr; justify-items: center; }
      .rankRow { grid-template-columns: minmax(70px, 44%) 1fr auto; }
    }


    /* INDEX-093: Klassen, die im Markup benutzt wurden, aber nie Stil hatten.
       Betroffen waren die Passkey-Liste, die Sitzungsliste und der Papierkorb. */
    .miniList { display: grid; gap: 8px; margin-top: 9px; }

    .miniItem {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 11px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.09);
    }

    .miniItem strong { display: block; font-size: 14.5px; font-weight: 900; line-height: 1.2; }
    .miniItem span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.3; }

    .tinyBtn {
      min-height: 34px;
      padding: 7px 11px;
      border-radius: 11px;
      background: rgba(239,68,68,0.13);
      border: 1px solid rgba(239,68,68,0.28);
      color: #fecaca;
      font-size: 13px;
      font-weight: 850;
      white-space: nowrap;
    }

    .choice {
      width: 100%;
      text-align: left;
      border-radius: 15px;
      padding: 11px 12px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.09);
      display: grid;
      gap: 4px;
      color: var(--text);
    }

    .choice strong { font-size: 15px; font-weight: 900; line-height: 1.2; }
    .choice span { color: var(--muted); font-size: 12.5px; line-height: 1.3; }

    body.lightMode .miniItem,
    body.lightMode .choice {
      background: rgba(255,255,255,0.85);
      border-color: rgba(15,23,42,0.13);
    }


    .mt10 { margin-top: 10px; }
    .mt7 { margin-top: 7px; }
    .contactEditGrid { margin-top: 9px; display: grid; grid-template-columns: 1fr 42px; gap: 8px; align-items: center; }
    .devChart .lineThird { stroke: rgba(34,197,94,.85); stroke-dasharray: 4 4; }
    .chartColor0 { background: rgba(var(--accentRgb),0.92); }
    .chartColor1 { background: rgba(56,189,248,0.92); }
    .chartColor2 { background: rgba(250,204,21,0.9); }
    .chartColor3 { background: rgba(239,68,68,0.88); }
    .chartColor4 { background: rgba(168,85,247,0.88); }
    .rankProgress { width: 100%; appearance: none; border: 0; }
    .rankProgress::-webkit-progress-bar { background: rgba(255,255,255,0.08); border-radius: 999px; }
    .rankProgress::-webkit-progress-value { background: linear-gradient(90deg, rgba(var(--accentHiRgb),0.95), rgba(var(--accentDeepRgb),0.90)); border-radius: 999px; }
    .rankProgress::-moz-progress-bar { background: linear-gradient(90deg, rgba(var(--accentHiRgb),0.95), rgba(var(--accentDeepRgb),0.90)); border-radius: 999px; }
    .devMiniBarsSvg { width: 100%; min-width: 120px; height: 82px; }
    .miniBarRect { fill: rgba(var(--accentRgb),0.9); }

/* A11Y-010: klarer Tastaturfokus ohne die Maus-/Touch-Optik zu stoeren. */
:where(button, a[href], input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--accentFocus, #22c55e);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--accentRgb, 34,197,94), 0.18);
}
.sheet[role="dialog"]:focus-visible { outline: none; box-shadow: none; }


    /* BDA: settings are grouped instead of one long form. Native details keeps
       the UI usable even if JavaScript is unavailable. */
    .settingsIntro {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(var(--accentRgb),0.09);
      border: 1px solid rgba(var(--accentRgb),0.20);
    }
    .settingsIntro strong { font-size: 14px; }
    .settingsIntro span { color: var(--muted); font-size: 13px; line-height: 1.35; }
    .settingsGroup {
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 17px;
      background: rgba(255,255,255,0.045);
      overflow: clip;
    }
    .settingsGroup > summary {
      list-style: none;
      cursor: pointer;
      min-height: 62px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      user-select: none;
    }
    .settingsGroup > summary::-webkit-details-marker { display:none; }
    .settingsGroup > summary::after {
      content: '›';
      font-size: 25px;
      font-weight: 800;
      color: var(--accentText);
      transform: rotate(90deg);
      transition: transform .16s ease;
    }
    .settingsGroup[open] > summary::after { transform: rotate(-90deg); }
    .settingsGroup > summary strong, .settingsGroup > summary small { display:block; }
    .settingsGroup > summary strong { font-size: 15px; font-weight: 900; }
    .settingsGroup > summary small { color:var(--muted); font-size:12px; margin-top:3px; }
    .settingsGroupBody {
      display: grid;
      gap: 11px;
      padding: 2px 12px 13px;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .settingsGroupBody > :first-child { margin-top: 10px; }
    .settingsMiniGrid { display:grid; gap:9px; }
    .settingsButtonRow { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .settingsSaveBtn { position: sticky; bottom: 4px; z-index: 2; }
    .settingsGroupDanger { border-color: rgba(239,68,68,0.20); }
    body.lightMode .settingsGroup { background:rgba(255,255,255,0.80); border-color:rgba(15,23,42,0.12); }
    body.lightMode .settingsGroupBody { border-top-color:rgba(15,23,42,0.08); }
    body.lightMode .settingsIntro { background:rgba(var(--accentRgb),0.08); }
    #petSkinSheet .choiceList { margin-top:12px; }
    #petSkinSheet .choiceBtn { min-height:58px; }
    .closeBtn > svg.ic { width:20px; height:20px; margin:auto; }
    @media (max-width: 520px) { .settingsButtonRow { grid-template-columns:1fr; } }

/* BFA: Aufgaben-Kontext, Beta-Feedback und Alliksat. */
.fluentPetImg.mirrored { transform: scaleX(-1); }
.task.taskLocationLater {
  opacity: .84;
  border-style: dashed;
}
.task.taskLocationLater:hover { opacity: 1; }
.chip.chipLocationLater {
  border-color: rgba(var(--accentRgb), .28);
  color: var(--muted);
  background: rgba(255,255,255,.035);
}
.settingsSubsection {
  display: grid;
  gap: 9px;
  padding-top: 6px;
}
.locationScheduleCard {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}
.locationScheduleCard .switchRow { margin: 0; }
.locationScheduleInputs {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(92px, .7fr) minmax(92px, .7fr);
  gap: 7px;
}
.betaFeatureList { display: grid; gap: 10px; }
.betaFeatureCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accentRgb), .18);
  background: rgba(255,255,255,.04);
}
.betaFeatureCopy { display: grid; gap: 4px; }
.betaFeatureCopy strong { font-size: 14px; }
.betaFeatureCopy span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.betaVoteRow { display: flex; gap: 6px; }
.betaVoteBtn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(0,0,0,.22);
  font-size: 19px;
  cursor: pointer;
}
.betaVoteBtn.active {
  border-color: rgba(var(--accentRgb), .65);
  background: rgba(var(--accentRgb), .17);
  box-shadow: inset 0 0 0 1px rgba(var(--accentRgb), .18);
}
body.lightMode .locationScheduleCard,
body.lightMode .betaFeatureCard,
body.lightMode .betaVoteBtn { background: rgba(255,255,255,.72); border-color: rgba(15,23,42,.12); }
@media (max-width: 560px) {
  .locationScheduleInputs { grid-template-columns: 1fr 1fr; }
  .locationScheduleInputs > :first-child { grid-column: 1 / -1; }
  .betaFeatureCard { grid-template-columns: 1fr; }
  .betaVoteRow { justify-content: flex-end; }
}


/* BHA: Beta-Standorte, getrennte Settings-Navigation, Routineplaner und Dauer-Einheit */
.settingsNav{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}.settingsNav::-webkit-scrollbar{display:none}.settingsGroup.settingsPanelHidden{display:none}.betaOnly.hidden{display:none!important}.durationInputRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.durationUnitToggle{display:flex;gap:6px}.locationPermissionStatus{padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:13px}.locationPlaceCard{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px}.locationPlaceCard>div:first-child{display:flex;flex-direction:column;gap:3px}.locationPlaceCard span{font-size:12px;opacity:.72}.routineDayTabs{display:flex;gap:7px;overflow-x:auto;padding:0 0 10px}.routineGrid{max-height:68vh;overflow:auto;border:1px solid var(--line);border-radius:14px}.routineSlot{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;width:100%;min-height:44px;padding:7px 10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;text-align:left}.routineSlot:last-child{border-bottom:0}.routineSlot:hover,.routineSlot:focus-visible{background:rgba(255,255,255,.045)}.routineSlotTime{font-variant-numeric:tabular-nums;opacity:.65}.routineSlotValue{font-weight:700}.routineSlotEmpty{font-weight:400;opacity:.42}.sheetWide{width:min(760px,calc(100vw - 20px))}@media(max-width:620px){.durationInputRow{grid-template-columns:1fr}.locationPlaceCard{align-items:flex-start;flex-direction:column}.locationPlaceCard .settingsButtonRow{width:100%}}

/* BHA: Kalender-Refresh und vollwertiger Routine-Timeslot-Editor */
.calendarToolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 12px}.calendarToolbar .calendarControls{display:flex;grid-template-columns:none;gap:7px;flex-wrap:wrap;margin:0}.calendarNav{display:flex;align-items:center;gap:7px}.calendarNavBtn{width:42px;height:42px;font-size:26px;line-height:1;border-radius:13px}.calendarTodayBtn{min-height:42px;padding:0 16px}.calendarHint{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}.calendarStrip{display:block;overflow:visible;padding:0}.calendarPeriod{min-width:0;width:100%;padding:14px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:0 18px 50px rgba(0,0,0,.16)}.calendarPeriodTitle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:18px;font-weight:800;text-transform:none}.calendarPeriodTitle>span:last-child{display:none}.calendarWeekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-bottom:7px}.calendarWeekday{text-align:center;padding:6px 2px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.56}.calendarMonthGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(92px,1fr));gap:7px}.calendarDay{min-width:0;min-height:92px;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);align-content:flex-start;overflow:hidden;transition:transform .14s ease,border-color .14s ease,background .14s ease}.calendarDay:hover,.calendarDay:focus-visible{transform:translateY(-1px);border-color:rgba(var(--accentRgb),.36);background:rgba(var(--accentRgb),.055)}.calendarDay.today{border:1px solid rgba(var(--accentRgb),.64);box-shadow:inset 0 0 0 1px rgba(var(--accentRgb),.16);background:rgba(var(--accentRgb),.075)}.calendarDay.outside{visibility:hidden;pointer-events:none}.calendarDayNum{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;font-weight:800;font-variant-numeric:tabular-nums}.calendarDay.today .calendarDayNum{background:var(--accent);color:#07110c}.calendarPill{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px;padding:4px 6px;border-radius:8px;font-size:11px;line-height:1.2;text-align:left}.calendarMultiMonths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.calendarMultiMonths>div{padding:11px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.018)}.calendarMultiMonths .calendarMonthGrid{grid-template-rows:repeat(6,minmax(58px,1fr));gap:4px}.calendarMultiMonths .calendarDay{min-height:58px;padding:5px;border-radius:9px}.calendarMultiMonths .calendarPill{display:none}.calendarMultiMonths .calendarDayNum{width:23px;height:23px;font-size:12px}.calendarMultiMonths .calendarWeekdays{gap:4px;margin-bottom:4px}.calendarMultiMonths .calendarWeekday{font-size:9px}.calendarMultiMonths .calendarPeriodTitle{font-size:14px;margin-bottom:8px}
body.lightMode .calendarPeriod,body.lightMode .calendarMultiMonths>div,body.lightMode .calendarDay,body.lightMode .calendarHint{background:rgba(255,255,255,.82)}body.lightMode .calendarDay{border-color:rgba(10,35,22,.09)}
.routineSlotMode{display:flex;gap:8px}.routineSlotMode .filterBtn{flex:1}.routineGrid{max-height:66vh;border-radius:18px;background:rgba(255,255,255,.018);overflow:auto}.routineSlot{grid-template-columns:68px minmax(0,1fr);min-height:48px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.055);position:relative}.routineSlot:nth-child(4n+1){border-top:1px solid rgba(255,255,255,.12)}.routineSlot.occupied{background:rgba(var(--accentRgb),.045)}.routineSlot.blockStart{border-left:3px solid var(--accent);background:linear-gradient(90deg,rgba(var(--accentRgb),.11),rgba(var(--accentRgb),.025) 55%,transparent)}.routineSlotContent{display:flex;min-width:0;flex-direction:column;gap:2px}.routineSlotValue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.routineSlotMeta{font-size:11px;font-weight:500;opacity:.58;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.routineSlotEmpty{opacity:.35}.routineSlot:hover .routineSlotEmpty{opacity:.82}.routineSlotTime{font-size:12px;font-weight:700;opacity:.48}.routineSlot:nth-child(4n+1) .routineSlotTime{font-size:13px;opacity:.8}.sheetWide #routineSlotForm{gap:14px}
@media(max-width:720px){.calendarToolbar{align-items:stretch}.calendarToolbar .calendarControls{width:100%;overflow-x:auto;flex-wrap:nowrap}.calendarNav{width:100%;justify-content:space-between}.calendarTodayBtn{flex:1}.calendarPeriod{padding:9px;border-radius:16px}.calendarMonthGrid{gap:3px;grid-template-rows:repeat(6,minmax(64px,1fr))}.calendarWeekdays{gap:3px}.calendarDay{min-height:64px;padding:5px;border-radius:10px}.calendarDayNum{width:24px;height:24px;font-size:12px}.calendarPill{padding:3px 4px;font-size:9px}.calendarMultiMonths{grid-template-columns:1fr}.routineSlot{grid-template-columns:58px minmax(0,1fr);padding-inline:9px}.routineSlotMode{flex-direction:column}}

/* BHB240820261918: robust beta location state and routine slot interaction. */
#routineSlotSheet{z-index:70}
#locationBtn.locationActive{border-color:rgba(var(--accentRgb),.55);background:rgba(var(--accentRgb),.12);box-shadow:0 0 0 1px rgba(var(--accentRgb),.08) inset}
#locationBtn.locationBlocked{border-color:rgba(248,113,113,.42);background:rgba(248,113,113,.09)}
body.lightMode #locationBtn.locationActive{background:rgba(var(--accentRgb),.12);border-color:rgba(var(--accentRgb),.45)}
body.lightMode .routineGrid{background:rgba(255,255,255,.7);border-color:rgba(15,23,42,.12)}
body.lightMode .routineSlot{border-bottom-color:rgba(15,23,42,.08)}
body.lightMode .routineSlot:nth-child(4n+1){border-top-color:rgba(15,23,42,.12)}
body.lightMode .routineSlot:hover,body.lightMode .routineSlot:focus-visible{background:rgba(15,23,42,.045)}
body.lightMode .routineSlot.occupied{background:rgba(var(--accentRgb),.055)}
body.lightMode .routineSlot.blockStart{background:linear-gradient(90deg,rgba(var(--accentRgb),.12),rgba(var(--accentRgb),.035) 55%,transparent)}

/* BHC240820261941 performance: isolate large task lists so Safari does less
   layout/paint work when sheets open and individual tasks change. */
#todayTasks > .task {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 170px;
}
.sheetOverlay.hidden { display: none !important; }