/* ====================================================
       AMK Koblenz – Redesign 2026
       Design: Clean & Modern, PC + Mobile
    ==================================================== */
    *, *::before, *::after { box-sizing: border-box; }

    /* ── Design Tokens ── */
    :root {
      --bg:         #f4f6fb;
      --bg2:        #edf0f8;
      --surface:    #ffffff;
      --surface2:   #f4f6fb;
      --surface3:   #edf0f8;
      --border:     rgba(15,23,42,0.08);
      --border-md:  rgba(15,23,42,0.12);
      --ink:        #0f172a;
      --ink-muted:  #475569;
      --ink-faint:  #94a3b8;
      --accent:     #6366f1;
      --accent-bg:  rgba(99,102,241,0.08);
      --accent-border: rgba(99,102,241,0.3);
      --amber:      #b45309;
      --amber-bg:   #fffbeb;
      --amber-border: rgba(180,83,9,0.2);
      --sage:       #166534;
      --sage-bg:    #f0fdf4;
      --sage-border: rgba(22,101,52,0.2);
      --clay:       #9f1239;
      --clay-bg:    #fff1f2;
      --clay-border: rgba(159,18,57,0.2);
      --shadow-sm:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
      --shadow-md:  0 4px 16px rgba(15,23,42,0.08), 0 1px 4px rgba(15,23,42,0.04);
      --shadow-lg:  0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
      --shadow-xl:  0 24px 64px rgba(15,23,42,0.16);
      --sidebar-w:  264px;
      --radius-sm:  8px;
      --radius-md:  12px;
      --radius-lg:  18px;
      --radius-xl:  24px;
    }

    html.theme-dark {
      --bg:         #0a0a0b;
      --bg2:        #111115;
      --surface:    #17171c;
      --surface2:   #1e1e25;
      --surface3:   #25252e;
      --border:     rgba(255,255,255,0.07);
      --border-md:  rgba(255,255,255,0.11);
      --ink:        #f0f0f5;
      --ink-muted:  #8888a8;
      --ink-faint:  #50506a;
      --accent:     #818cf8;
      --accent-bg:  rgba(129,140,248,0.1);
      --accent-border: rgba(129,140,248,0.3);
      --amber:      #fbbf24;
      --amber-bg:   rgba(251,191,36,0.08);
      --amber-border: rgba(251,191,36,0.2);
      --sage:       #4ade80;
      --sage-bg:    rgba(74,222,128,0.08);
      --sage-border: rgba(74,222,128,0.2);
      --clay:       #fb7185;
      --clay-bg:    rgba(251,113,133,0.08);
      --clay-border: rgba(251,113,133,0.2);
      --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
      --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
      --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
      --shadow-xl:  0 24px 64px rgba(0,0,0,0.6);
    }

    /* ── Base ── */
    html { scroll-behavior: smooth; font-size: 16px; }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
    .no-scroll { scrollbar-width: none; -ms-overflow-style: none; }
    .no-scroll::-webkit-scrollbar { display: none; }

    /* ── Tailwind class overrides for dark/light ── */
    .text-ink-main   { color: var(--ink) !important; }
    .text-ink-muted  { color: var(--ink-muted) !important; }
    .text-ink-faint  { color: var(--ink-faint) !important; }
    .bg-white        { background-color: var(--surface) !important; color: var(--ink) !important; }
    .bg-app-surface  { background-color: var(--surface2) !important; }
    .bg-app-surface\/60 { background-color: var(--surface2) !important; opacity: 0.9; }
    .bg-app-surface\/50 { background-color: var(--surface2) !important; opacity: 0.85; }
    .hover\:bg-app-surface:hover { background-color: var(--surface2) !important; }
    .bg-app-border   { background-color: var(--surface3) !important; }
    .border-app-border { border-color: var(--border-md) !important; }
    .focus\:border-app-border:focus { border-color: var(--accent) !important; }
    .bg-app-bg       { background-color: var(--bg) !important; }

    /* Sage/Amber/Clay overrides */
    .bg-sage-bg  { background-color: var(--sage-bg) !important; }
    .text-sage-text  { color: var(--sage) !important; }
    .bg-amber-bg { background-color: var(--amber-bg) !important; }
    .text-amber-text { color: var(--amber) !important; }
    .bg-clay-bg  { background-color: var(--clay-bg) !important; }
    .text-clay-text  { color: var(--clay) !important; }

    /* Placeholder */
    .placeholder-ink-faint::placeholder { color: var(--ink-faint); }

    /* Box shadows */
    .shadow-soft   { box-shadow: var(--shadow-sm) !important; }
    .shadow-float  { box-shadow: var(--shadow-lg) !important; }
    .shadow-modal  { box-shadow: var(--shadow-xl) !important; }

    /* ── App Shell ── */
    #app {
      display: flex;
      width: min(1160px, calc(100vw - 32px));
      height: calc(100vh - 24px);
      margin: 12px auto;
      border-radius: var(--radius-xl);
      border: 1px solid var(--border-md);
      background: var(--surface);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      position: relative;
    }

    /* ── Sidebar ── */
    #app > aside {
      width: var(--sidebar-w);
      min-width: var(--sidebar-w);
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--surface2) !important;
      border-right: 1px solid var(--border) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      overflow: hidden;
    }

    /* User section */
    .sidebar-user {
      padding: 20px 16px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .sidebar-user-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    #avatar-circle {
      width: 36px !important; height: 36px !important;
      border-radius: 10px !important;
      background: var(--accent-bg) !important;
      border: 1px solid var(--accent-border) !important;
      color: var(--accent) !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      flex-shrink: 0;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }

    #user-name-display {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: var(--ink) !important;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar-user-actions {
      display: flex; gap: 2px;
    }

    .icon-btn {
      width: 30px; height: 30px;
      border-radius: var(--radius-sm);
      background: transparent;
      border: none;
      color: var(--ink-faint);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      transition: background 0.15s, color 0.15s;
    }
    .icon-btn:hover { background: var(--surface3); color: var(--ink); }

    /* Month/Day nav (JS-populated, hidden) */
    #day-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }
    #day-list button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: var(--radius-md);
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink-muted);
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
      margin-bottom: 2px;
    }
    #day-list button:hover {
      background: var(--surface3) !important;
      border-color: var(--border) !important;
      color: var(--ink) !important;
    }
    #day-list button.bg-white {
      background: var(--accent-bg) !important;
      border-color: var(--accent-border) !important;
      color: var(--ink) !important;
    }

    /* Sidebar calendar (desktop) */
    .sidebar-cal-wrap {
      padding: 12px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      overflow-y: auto;
      flex: 1;
    }

    /* Desktop stats */
    #desktop-stats {
      gap: 8px;
      flex-shrink: 0;
    }

    .stat-card {
      border-radius: var(--radius-md) !important;
      border: 1px solid var(--border) !important;
      background: var(--surface) !important;
      padding: 12px !important;
    }

    .stat-icon {
      border-radius: var(--radius-sm) !important;
      background: var(--surface2) !important;
    }

    .stat-track {
      background: var(--surface3) !important;
      border-radius: 99px;
      overflow: hidden;
    }

    .stat-fill {
      transition: width 0.4s ease !important;
      border-radius: 99px !important;
    }

    /* Mini calendar */
    #mini-calendar button, #mobile-mini-calendar button {
      border-radius: var(--radius-sm) !important;
      background: var(--surface3) !important;
      border: 1px solid transparent !important;
      color: var(--ink-muted) !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      transition: background 0.12s, border-color 0.12s !important;
    }
    #mini-calendar button:hover, #mobile-mini-calendar button:hover {
      background: var(--surface) !important;
      border-color: var(--border-md) !important;
      color: var(--ink) !important;
    }
    #mini-calendar button.bg-white, #mobile-mini-calendar button.bg-white {
      background: var(--accent) !important;
      color: white !important;
      border-color: transparent !important;
    }

    /* ── Sidebar Actions ── */
    #sidebar-actions {
      padding: 12px;
      border-top: 1px solid var(--border);
      display: flex !important;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }

    #sidebar-actions .action-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: var(--radius-md);
      border: 1px solid transparent;
      background: transparent;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
      min-height: 40px;
      justify-content: flex-start;
    }

    #btn-daily-report {
      background: var(--amber-bg) !important;
      color: var(--amber) !important;
      border-color: var(--amber-border) !important;
    }
    #btn-daily-report:hover { filter: brightness(1.08); }

    #btn-monthly-report {
      background: var(--sage-bg) !important;
      color: var(--sage) !important;
      border-color: var(--sage-border) !important;
    }
    #btn-monthly-report:hover { filter: brightness(1.08); }

    #btn-monthly-goals {
      background: var(--clay-bg) !important;
      color: var(--clay) !important;
      border-color: var(--clay-border) !important;
    }
    #btn-monthly-goals:hover { filter: brightness(1.08); }

    #sidebar-actions .action-icon {
      width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    #sidebar-actions .action-icon i { font-size: 16px !important; }

    /* ── Main Canvas ── */
    #main-canvas {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      background: var(--surface) !important;
      border-left: 1px solid var(--border) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      position: relative;
    }

    .main-inner {
      width: 100%;
      padding: 28px 32px 0;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* ── Header ── */
    .main-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }

    .main-header-left { display: block; min-width: 0; }

    #day-greeting {
      display: flex !important;
      align-items: center;
      gap: 6px;
      font-size: 11px !important;
      font-weight: 700 !important;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-faint) !important;
      flex-wrap: nowrap !important;
      white-space: nowrap;
      margin-bottom: 8px;
    }

    #day-greeting i { font-size: 13px !important; color: var(--amber) !important; flex-shrink: 0; }

    #task-counts {
      font-size: 14px !important;
      font-weight: 500 !important;
      color: var(--ink-muted) !important;
      display: flex !important;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    #task-counts span {
      display: inline-flex !important;
      align-items: center;
      gap: 5px;
      font-size: 14px !important;
      font-weight: 500 !important;
      color: var(--ink-muted) !important;
      white-space: nowrap;
    }

    #task-counts i { font-size: 15px; }
    .index-load-metric {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--ink-faint);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin: -10px 0 12px;
      width: fit-content;
    }

    /* Theme toggle */
    .theme-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-md);
      background: var(--surface2);
      color: var(--ink-muted);
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .theme-toggle-btn:hover { background: var(--surface3); color: var(--ink); }

    /* ── Task Cards ── */
    .task-card {
      background: var(--surface) !important;
      border: 1px solid var(--border-md) !important;
      border-radius: var(--radius-lg) !important;
      box-shadow: var(--shadow-sm) !important;
      padding: 14px 16px 14px 20px !important;
      margin-bottom: 8px;
      position: relative;
      overflow: hidden;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      min-height: 56px;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    }
    .task-card:hover {
      box-shadow: var(--shadow-md) !important;
      border-color: var(--accent-border) !important;
      transform: translateY(-1px) !important;
    }

    /* Task card title */
    .task-card h3 {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: var(--ink) !important;
      line-height: 1.3 !important;
    }

    /* +/- quantity buttons */
    .task-card button[onclick*="adjustTaskQty"] {
      width: 36px !important; height: 36px !important;
      border-radius: var(--radius-sm) !important;
      border: 1px solid var(--border-md) !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      cursor: pointer;
      transition: background 0.12s, transform 0.1s;
      display: flex; align-items: center; justify-content: center;
    }
    .task-card button[onclick*="adjustTaskQty"]:active { transform: scale(0.92); }
    /* Minus button */
    .task-card button[onclick*=",-1)"] {
      background: var(--surface2) !important;
      color: var(--ink-muted) !important;
    }
    .task-card button[onclick*=",-1)"]:hover {
      background: var(--surface3) !important;
      color: var(--ink) !important;
    }
    /* Plus button */
    .task-card button[onclick*=",1)"] {
      background: var(--accent) !important;
      color: white !important;
      border-color: transparent !important;
      box-shadow: 0 2px 8px rgba(99,102,241,0.3);
    }
    .task-card button[onclick*=",1)"]:hover {
      background: color-mix(in oklch, var(--accent) 90%, white) !important;
    }
    /* Qty display */
    .task-card span.min-w-\[2\.5rem\] {
      font-size: 18px !important;
      font-weight: 700 !important;
      color: var(--ink) !important;
      min-width: 40px !important;
      text-align: center;
    }

    /* accent bar on task card */
    .task-card > div:first-child.absolute {
      background: var(--accent) !important;
      width: 3px !important;
      border-radius: 0 2px 2px 0 !important;
      opacity: 0.7;
    }

    /* JS sets this class when many task cards exist on mobile */
    .task-list-scrollable {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* ── Prep Section ── */
    #prep-status-panel {
      background: var(--surface2) !important;
      border: 1px solid var(--border) !important;
      border-radius: var(--radius-lg) !important;
      margin-top: 24px;
    }

    #prep-status-panel h3 {
      font-size: 13px !important;
      font-weight: 700 !important;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--ink-faint) !important;
    }

    /* Prep cards */
    #prep-list .task-card {
      background: var(--surface) !important;
    }

    /* ── Empty State ── */
    #empty-state {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;
      text-align: center;
    }

    #empty-state > div {
      width: 60px; height: 60px;
      border-radius: var(--radius-md);
      background: var(--surface2);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
      color: var(--ink-faint);
    }

    /* ── FAB ── */
    #main-canvas > button[onclick="openAddTask()"] {
      position: fixed !important;
      bottom: 32px;
      right: calc((100vw - min(1160px, 100vw - 32px)) / 2 + 24px);
      width: 52px; height: 52px;
      border-radius: 16px;
      background: var(--accent) !important;
      color: white !important;
      border: none;
      box-shadow: 0 8px 24px rgba(99,102,241,0.4) !important;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      z-index: 20;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #main-canvas > button[onclick="openAddTask()"]:hover {
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 12px 32px rgba(99,102,241,0.5) !important;
    }
    #main-canvas > button[onclick="openAddTask()"]:active { transform: scale(0.95); }
    /* Hide big + button on index */
    #main-canvas > button[onclick="openAddTask()"] { display: none !important; }

    /* ── Mobile Calendar Panel ── */
    #mobile-calendar-panel {
      display: none;
      background: var(--surface2) !important;
      border: 1px solid var(--border) !important;
      border-radius: var(--radius-lg) !important;
      margin-top: 24px;
    }

    /* ── Mobile Scroll Controls ── */
    #mobile-scroll-controls {
      position: fixed;
      right: 16px;
      bottom: 80px;
      z-index: 40;
      display: none;
      flex-direction: column;
      gap: 6px;
    }

    #mobile-scroll-controls .scroll-btn {
      width: 38px; height: 38px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-md);
      background: var(--surface);
      color: var(--ink-muted);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: var(--shadow-md);
      transition: background 0.15s;
    }
    #mobile-scroll-controls .scroll-btn:hover { background: var(--surface2); }

    /* ── Modals ── */
    .modal-open { opacity: 1 !important; pointer-events: auto !important; }
    .modal-open .modal-box { transform: scale(1) translateY(0) !important; opacity: 1 !important; }

    /* Modal backdrop */
    #task-modal > div:first-child,
    #settings-modal > div:first-child,
    #report-panel > div:first-child,
    #monthly-goals-modal > div:first-child {
      background: rgba(0,0,0,0.5) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Modal box */
    .modal-box {
      background: var(--surface) !important;
      border: 1px solid var(--border-md) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: var(--shadow-xl) !important;
      border-radius: var(--radius-xl) !important;
    }

    /* Modal inputs */
    #task-modal input,
    #task-modal textarea,
    #settings-modal input,
    #settings-modal textarea {
      background: var(--surface2) !important;
      border: 1px solid var(--border-md) !important;
      color: var(--ink) !important;
      border-radius: var(--radius-md) !important;
      font-family: inherit !important;
      transition: border-color 0.15s !important;
    }

    #task-modal input:focus,
    #task-modal textarea:focus,
    #settings-modal input:focus {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 3px var(--accent-bg) !important;
      outline: none !important;
    }

    #task-modal input[type="text"].text-2xl {
      font-size: 22px !important;
      font-weight: 700 !important;
      background: transparent !important;
      border: none !important;
      color: var(--ink) !important;
      padding: 0 !important;
    }

    /* Modal save button */
    button[onclick="saveTask()"],
    button[onclick="saveSettings()"] {
      background: var(--accent) !important;
      color: white !important;
      border: none !important;
      box-shadow: 0 4px 12px rgba(99,102,241,0.3) !important;
    }
    button[onclick="saveTask()"]:hover,
    button[onclick="saveSettings()"]:hover {
      filter: brightness(1.1);
    }

    /* Modal close / cancel */
    button[onclick="closeTaskModal()"],
    button[onclick="closeSettings()"],
    button[onclick="closeReport()"],
    button[onclick="closeMonthlyGoalsModal()"] {
      background: var(--surface2) !important;
      color: var(--ink-muted) !important;
      border: 1px solid var(--border) !important;
    }
    button[onclick="closeTaskModal()"]:hover,
    button[onclick="closeSettings()"]:hover,
    button[onclick="closeReport()"]:hover {
      background: var(--surface3) !important;
      color: var(--ink) !important;
    }

    /* Modal label pills */
    .modal-box .bg-app-surface {
      background: var(--surface2) !important;
      color: var(--ink-muted) !important;
      border: 1px solid var(--border);
    }

    /* Report content */
    #report-content {
      background: var(--surface2) !important;
      border: 1px solid var(--border) !important;
      border-radius: var(--radius-md) !important;
      color: var(--ink) !important;
      font-family: 'DM Mono', 'Fira Code', ui-monospace, monospace !important;
      font-size: 13px !important;
    }

    /* Report inner cards */
    #report-content .bg-white {
      background: var(--surface) !important;
      border-color: var(--border-md) !important;
    }

    /* Monthly goals inputs */
    #monthly-goals-list .monthly-goal-input {
      background: var(--surface2) !important;
      border: 1px solid var(--border-md) !important;
      color: var(--ink) !important;
    }

    /* Status selector */
    #status-selector {
      background: var(--surface2) !important;
      border: 1px solid var(--border) !important;
    }
    .status-btn {
      color: var(--ink-muted) !important;
      border-radius: var(--radius-sm) !important;
    }
    .status-btn.bg-white {
      background: var(--surface) !important;
      color: var(--ink) !important;
    }

    /* Settings avatar preview */
    #settings-avatar-preview {
      background: var(--surface2) !important;
      border-color: var(--border-md) !important;
      color: var(--ink-muted) !important;
      font-weight: 700;
    }

    /* Preset buttons */
    .preset-btn {
      background: var(--surface2) !important;
      border: 1px solid var(--border) !important;
      color: var(--ink-muted) !important;
      border-radius: 99px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .preset-btn:hover {
      background: var(--accent-bg) !important;
      border-color: var(--accent-border) !important;
      color: var(--accent) !important;
    }

    /* Copy report button */
    #copy-btn {
      background: var(--accent) !important;
      border: none !important;
      color: white !important;
    }
    #copy-btn:hover { filter: brightness(1.08); }

    /* Text / back buttons in report */
    #report-header-text,
    #report-header-list {
      background: var(--accent) !important;
      border: none !important;
      color: white !important;
    }
    #report-header-text:hover,
    #report-header-list:hover { filter: brightness(1.08); }

    /* Save monthly goals btn */
    #monthly-goals-save-btn {
      background: var(--accent) !important;
      color: white !important;
      border: none !important;
    }

    /* hidden MD:block  – desktop sidebar calendar */
    .md\:block { display: block !important; }

    /* ── Footer note ── */
    .amk-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 11px;
      line-height: 1;
      color: var(--ink-faint);
      margin-top: auto;
      padding: 20px 0;
    }

    /* ── slide-in animation ── */
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .slide-in { animation: slideIn 0.25s cubic-bezier(0.16,1,0.3,1) both; }

    /* ======================================
       MOBILE  (≤ 768px)
    ====================================== */
    @media (max-width: 768px) {
      html, body {
        height: auto !important;
        min-height: 100% !important;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }

      #app {
        width: calc(100vw - 16px);
        height: auto;
        min-height: calc(100vh - 16px);
        margin: 8px;
        border-radius: 18px;
        flex-direction: column;
      }

      #app > aside {
        width: 100% !important;
        min-width: 0 !important;
        height: auto;
        flex-direction: column;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
      }

      /* Hide desktop-only sidebar parts */
      #day-list,
      #month-label,
      .sidebar-cal-wrap,
      #desktop-stats {
        display: none !important;
      }

      /* Sidebar actions → fixed bottom bar on mobile */
      #sidebar-actions {
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        z-index: 50 !important;
        flex-direction: row !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
        background: var(--surface) !important;
        border-top: 1px solid var(--border-md) !important;
        border-radius: 0 !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
      }

      #sidebar-actions .action-btn {
        flex: 1;
        justify-content: center !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
        min-height: 46px;
        border-radius: var(--radius-md) !important;
        flex-direction: column;
        gap: 3px !important;
        align-items: center;
      }

      #sidebar-actions .action-icon { width: 20px; height: 20px; }
      #sidebar-actions .action-icon i { font-size: 18px !important; }
      #sidebar-actions .action-label { display: block; font-size: 10px !important; line-height: 1; font-weight: 700; }

      #btn-monthly-goals { order: 1; }
      #btn-monthly-report { order: 2; }
      #btn-daily-report { order: 3; }

      #main-canvas {
        padding-bottom: 104px;
      }

      .main-inner {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px 14px 14px;
      }

      .main-header { margin-bottom: 4px; }

      #task-list { order: 1; }
      #prep-status-panel {
        order: 2;
        display: none !important;
      }
      #mobile-calendar-panel {
        order: 3;
        display: none !important;
      }
      .amk-footer {
        order: 4;
        margin-top: auto !important;
        padding: 20px 0 !important;
      }

      .task-card {
        padding: 10px 12px 10px 16px !important;
        margin-bottom: 6px !important;
        min-height: 48px !important;
      }

      /* Vorbereitung panel cleaner on mobile */
      #prep-status-panel {
        margin-top: 0 !important;
        padding: 12px !important;
        border-radius: 14px !important;
        width: 100% !important;
      }
      #prep-status-panel h3 {
        font-size: 12px !important;
      }
      #prep-list {
        gap: 8px !important;
      }
      #prep-list .task-card {
        padding: 12px !important;
        border-radius: 14px !important;
      }
      #prep-list .task-card > div {
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
      }
      #prep-list .task-card > div > span {
        font-size: 14px !important;
        line-height: 1.25 !important;
      }
      #prep-list input[type="number"] {
        width: 64px !important;
        height: 34px !important;
        font-size: 14px !important;
      }
      #mobile-calendar-panel {
        display: none !important;
      }

      #mobile-scroll-controls {
        bottom: 88px;
        right: 10px;
        display: none;
      }

      /* Report modal */
      #report-panel .modal-box {
        max-width: calc(100vw - 24px) !important;
      }
    }

    /* ======================================
       TABLET  (769–1024px)
    ====================================== */
    @media (min-width: 769px) and (max-width: 1024px) {
      --sidebar-w: 220px;
      #app { width: calc(100vw - 24px); }
    }