:root {
    --bg: #0f1117; --bg2: #1a1d2e; --bg3: #232640; --border: #2e3158;
    --text: #e8eaf0; --text2: #9499b8; --accent: #6c7adb; --accent2: #8b59cc;
    --gold: #f0c060; --silver: #a8b8c8; --platinum: #b8f0e8;
    --body-c: #e8785a; --mind-c: #6cb8e8; --soul-c: #a87ccc; --shadow-c: #68c896;
    --ethics-c: #e0b860; --relation-c: #e87ca0; --work-c: #80a0d0; --creative-c: #d090e0;
    --radius: 12px; --radius-sm: 8px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg); color: var(--text);
    min-height: 100vh; font-size: 15px; line-height: 1.5;
  }

  .app { display: flex; min-height: 100vh; }
  .sidebar {
    width: 240px; background: var(--bg2); border-right: 1px solid var(--border);
    padding: 24px 0; position: sticky; top: 0; height: 100vh;
    overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column;
  }
  .sidebar-logo { padding: 0 20px 24px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
  .sidebar-logo h1 { font-size: 15px; font-weight: 700; }
  .sidebar-logo p { font-size: 11px; color: var(--text2); margin-top: 2px; }
  .nav-section { padding: 0 12px 8px; }
  .nav-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text2); padding: 8px 8px 4px; }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--text2); font-size: 13px; font-weight: 500;
    transition: all .15s; border: none; background: none; width: 100%; text-align: left;
  }
  .nav-item:hover { background: var(--bg3); color: var(--text); }
  .nav-item.active { background: rgba(108,122,219,.18); color: var(--accent); }
  .nav-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .sidebar-footer { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid var(--border); font-size: 11px; color: var(--text2); }
  .main { flex: 1; overflow-y: auto; }
  .topbar { position: sticky; top: 0; z-index: 60; background: var(--bg1); border-bottom: 1px solid var(--border); padding: 0 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .topbar-title { font-size: 15px; font-weight: 600; color: var(--text); }
  .topbar-profile-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; margin-left: auto; }
  .topbar-profile-btn:hover { background: #7d8be0; }
  .content { max-width: 860px; margin: 0 auto; padding: 32px 24px; }
  .page { display: none; }
  .page.active { display: block; }
  .page-header { margin-bottom: 28px; }
  .page-header h2 { font-size: 22px; font-weight: 700; }
  .page-header p { color: var(--text2); margin-top: 4px; font-size: 13px; }
  .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }

  /* Mobile Nav */
  .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg2); border-top: 1px solid var(--border); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 50; }
  .mobile-nav-inner { display: flex; justify-content: space-around; align-items: stretch; }
  .mobile-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 6px; border-radius: var(--radius-sm); background: none; border: none; cursor: pointer; color: var(--text2); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; transition: color .15s; min-width: 44px; flex: 1; }
  .mobile-nav-btn svg { width: 20px; height: 20px; }
  .mobile-nav-btn.active { color: var(--accent); }

  /* Module Level Segmented Control */
  .level-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .level-row:last-child { border-bottom: none; }
  .level-row-label { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .level-row-label .dot { width: 8px; height: 8px; border-radius: 50%; }
  .level-seg { display: flex; background: var(--bg3); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
  .level-seg button { padding: 5px 12px; font-size: 11px; font-weight: 600; border: none; background: none; color: var(--text2); cursor: pointer; transition: all .15s; }
  .level-seg button.active { background: var(--accent); color: #fff; }
  .level-exercise-name { font-size: 11px; color: var(--text2); margin-top: 2px; }

  /* Fullscreen Timer */
  .timer-fs { position: fixed; inset: 0; z-index: 200; background: var(--bg); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); overflow: hidden; }
  .timer-fs-header { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 600px; flex-shrink: 0; padding: 0 8px; }
  .timer-fs-header span { font-size: 16px; font-weight: 700; }
  .timer-fs-body { display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: center; width: 100%; max-width: 600px; overflow-y: auto; }
  .timer-fs-ring { width: 240px; height: 240px; position: relative; margin-bottom: 24px; flex-shrink: 0; }
  .timer-fs-ring svg { transform: rotate(-90deg); }
  .timer-fs-ring .ring-bg { fill: none; stroke: var(--bg3); stroke-width: 8; }
  .timer-fs-ring .ring-progress { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .5s; }
  .timer-fs-controls { display: flex; gap: 12px; }

  /* Modal Grid (2-Spalten auf Desktop/Tablet) */
  .modal-grid { display: block; }
  .modal-col-side .section-title:first-child { margin-top: 0; }

  /* Desktop: Sidebar sichtbar, volle Grids */
  @media (min-width: 1025px) {
    .topbar { padding: 0 40px; }
    .content { max-width: 1100px; padding: 32px 40px; }
    .modal { max-width: 900px; }
    .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .modal-grid .timer-ring { width: 120px; height: 120px; }
    .modal-grid .timer-ring svg { width: 120px; height: 120px; }
    .modal-grid .timer-ring .ring-bg, .modal-grid .timer-ring .ring-progress { cx: 60; cy: 60; r: 51; }
    .page-header h2 { font-size: 24px; }
  }

  /* Tablet (iPad): Bottom-Nav, 2-Spalten-Grids */
  @media (min-width: 701px) and (max-width: 1024px) {
    .sidebar { display: none; }
    .mobile-nav { display: block; }
    .content { max-width: 860px; padding: 24px 24px calc(80px + env(safe-area-inset-bottom)) 24px; }
    .main { padding-top: env(safe-area-inset-top); }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .modal { max-width: 800px; max-height: 85vh; }
    .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .modal-grid .timer-ring { width: 120px; height: 120px; }
    .modal-grid .timer-ring svg { width: 120px; height: 120px; }
  }

  /* Mobile (iPhone): Bottom-Nav, 1-Spalten-Grids, Bottom-Sheet Modal */
  @media (max-width: 700px) {
    .sidebar { display: none; }
    .mobile-nav { display: block; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .content { padding: 16px 16px calc(80px + env(safe-area-inset-bottom)) 16px; }
    .main { padding-top: env(safe-area-inset-top); }
    .page-header h2 { font-size: 18px; }
    .modal { border-radius: var(--radius) var(--radius) 0 0; max-height: 92vh; }
    .modal-overlay { align-items: flex-end; }
    .timer-fs-ring { width: 180px; height: 180px; }
    .timer-fs-ring svg { width: 180px; height: 180px; }
    .timer-fs-ring .timer-time { font-size: 36px !important; }
    #fs-step-text { font-size: 13px !important; padding: 0 8px; }
  }

  /* Badges */
  .module-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
  .badge-body { background: rgba(232,120,90,.15); color: var(--body-c); }
  .badge-mind { background: rgba(108,184,232,.15); color: var(--mind-c); }
  .badge-soul { background: rgba(168,124,204,.15); color: var(--soul-c); }
  .badge-shadow { background: rgba(104,200,150,.15); color: var(--shadow-c); }
  .badge-ethics { background: rgba(224,184,96,.15); color: var(--ethics-c); }
  .badge-relation { background: rgba(232,124,160,.15); color: var(--relation-c); }
  .badge-work { background: rgba(128,160,208,.15); color: var(--work-c); }
  .badge-creative { background: rgba(208,144,224,.15); color: var(--creative-c); }
  .level-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
  .level-gold { background: rgba(240,192,96,.15); color: var(--gold); border: 1px solid rgba(240,192,96,.3); }
  .level-silver { background: rgba(168,184,200,.15); color: var(--silver); border: 1px solid rgba(168,184,200,.3); }
  .level-platinum { background: rgba(184,240,232,.15); color: var(--platinum); border: 1px solid rgba(184,240,232,.3); }
  .progress-bar { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
  .progress-fill { height: 100%; border-radius: 3px; transition: width .4s; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm); border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-primary:hover { background: #7d8be0; }
  .btn-ghost { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
  .btn-ghost:hover { color: var(--text); background: var(--border); }
  .btn-sm { padding: 5px 12px; font-size: 12px; }
  .btn-success { background: #3a7a58; color: #fff; }
  .btn-success:hover { background: #45916a; }

  /* Dashboard */
  .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
  .stat-card .stat-value { font-size: 28px; font-weight: 700; }
  .stat-card .stat-label { font-size: 12px; color: var(--text2); margin-top: 2px; }
  .streak-fire { font-size: 24px; }

  /* Practice items */
  .practice-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; cursor: pointer; transition: all .15s; }
  .practice-item:hover { border-color: var(--accent); background: var(--bg3); }
  .practice-item.done { opacity: .55; }
  .practice-item.done .practice-name { text-decoration: line-through; }
  .practice-item.just-done { animation: flash-green .6s ease-out; }
  @keyframes flash-green {
    0% { border-color: #68c896; box-shadow: 0 0 0 0 rgba(104,200,150,.4); }
    50% { border-color: #68c896; box-shadow: 0 0 12px 4px rgba(104,200,150,.2); }
    100% { border-color: var(--border); box-shadow: none; }
  }
  .practice-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; }
  .practice-item.done .practice-check { background: var(--accent); border-color: var(--accent); animation: check-bounce .3s ease-out; }
  @keyframes check-bounce { 0% { transform: scale(0.5); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
  .practice-check svg { display: none; }
  .practice-item.done .practice-check svg { display: block; }
  .all-done-banner { background: rgba(104,200,150,.12); border: 1px solid rgba(104,200,150,.3); border-radius: var(--radius-sm); padding: 14px; text-align: center; font-size: 14px; font-weight: 600; color: var(--shadow-c); margin-top: 12px; animation: fade-in .4s ease-out; }
  @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .practice-info { flex: 1; }
  .practice-name { font-size: 14px; font-weight: 600; }
  .practice-meta { font-size: 12px; color: var(--text2); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .practice-actions { display: flex; gap: 6px; }

  /* Modal */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 28px; }
  .modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
  .modal-title { font-size: 18px; font-weight: 700; }
  .modal-close { background: var(--bg3); border: none; color: var(--text2); cursor: pointer; padding: 4px 10px; border-radius: 6px; font-size: 16px; }
  .modal-close:hover { color: var(--text); }

  /* Timer */
  .timer-display { text-align: center; padding: 32px 0; }
  .timer-ring { width: 160px; height: 160px; margin: 0 auto 24px; position: relative; }
  .timer-ring svg { transform: rotate(-90deg); }
  .timer-ring .ring-bg { fill: none; stroke: var(--bg3); stroke-width: 8; }
  .timer-ring .ring-progress { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .5s; }
  .timer-time { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .timer-controls { display: flex; gap: 10px; justify-content: center; }

  /* Exercise cards */
  .exercise-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s; }
  .exercise-card:hover { border-color: var(--accent); }
  .exercise-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
  .exercise-card-title { font-size: 15px; font-weight: 600; }
  .exercise-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  .exercise-card-desc { font-size: 13px; color: var(--text2); }
  .exercise-card-duration { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 4px; margin-top: 6px; }

  /* Journal */
  textarea { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 12px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 100px; line-height: 1.6; }
  textarea:focus { outline: none; border-color: var(--accent); }
  .journal-entry { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; }
  .journal-date { font-size: 11px; color: var(--text2); margin-bottom: 6px; }
  .journal-text { font-size: 13px; line-height: 1.6; }

  /* Misc */
  .divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
  .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text2); margin-bottom: 14px; }
  .notice { background: rgba(108,122,219,.1); border: 1px solid rgba(108,122,219,.25); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--text2); margin-bottom: 16px; }
  .step-list { list-style: none; }
  .step-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .step-list li:last-child { border-bottom: none; }
  .step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg3); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
  .inline-flex { display: flex; align-items: center; gap: 8px; }
  .mb-0 { margin-bottom: 0; }

  /* Week */
  .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 20px; }
  .week-day { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; text-align: center; }
  .week-day.today { border-color: var(--accent); }
  .week-day .day-name { font-size: 10px; color: var(--text2); text-transform: uppercase; font-weight: 700; }
  .week-day .day-num { font-size: 18px; font-weight: 700; margin: 2px 0; }
  .week-day .day-dots { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
  .day-dot { width: 5px; height: 5px; border-radius: 50%; }

  /* Tabs */
  .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
  .tab-btn { padding: 8px 16px; background: none; border: none; color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
  .tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }

  /* Settings */
  .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .settings-row:last-child { border-bottom: none; }
  .settings-label { font-weight: 500; }
  .settings-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
  .toggle { width: 40px; height: 22px; border-radius: 11px; background: var(--bg3); border: none; cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0; }
  .toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text2); transition: all .2s; }
  .toggle.on { background: var(--accent); }
  .toggle.on::after { left: 21px; background: #fff; }
  select, input[type=time] { background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; }
  select:focus, input[type=time]:focus { outline: none; border-color: var(--accent); }

  /* Quadrant */
  .quadrant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
  .quadrant { background: var(--bg2); padding: 16px; }
  .quadrant-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text2); margin-bottom: 6px; }
  .quadrant-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .quadrant-items { font-size: 12px; color: var(--text2); line-height: 1.7; }
  .empty-state { text-align: center; padding: 48px 24px; color: var(--text2); }
  .empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
  .empty-state p { font-size: 13px; }

  /* Heatmap */
  .heatmap { display: flex; gap: 3px; flex-wrap: wrap; }
  .heat-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--bg3); }
  .heat-1 { background: rgba(108,122,219,.25); }
  .heat-2 { background: rgba(108,122,219,.5); }
  .heat-3 { background: rgba(108,122,219,.75); }
  .heat-4 { background: var(--accent); }

  /* Onboarding */
  .onboarding-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 200; display: flex; align-items: center; justify-content: center; }
  .onboarding-card { max-width: 480px; width: 90%; text-align: center; padding: 40px 32px; }
  .onboarding-card h1 { font-size: 28px; margin-bottom: 8px; }
  .onboarding-card .subtitle { color: var(--text2); font-size: 14px; margin-bottom: 32px; }
  .onboarding-step { display: none; }
  .onboarding-step.active { display: block; }
  .onboarding-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin: 24px 0; }
  .onboarding-module { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
  .onboarding-module h3 { font-size: 14px; margin-bottom: 4px; }
  .onboarding-module p { font-size: 12px; color: var(--text2); }
  .onboarding-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
  .onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg3); }
  .onboarding-dot.active { background: var(--accent); }

  /* Reiss-Motivcheckliste */
  .reiss-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
  @media (max-width: 500px) { .reiss-checklist { grid-template-columns: 1fr; } }
  .reiss-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; user-select: none; }
  .reiss-item:hover { border-color: var(--accent); }
  .reiss-cb { display: none; }
  .reiss-item:has(.reiss-cb:checked) { background: color-mix(in srgb, var(--work-c, var(--accent)) 15%, var(--bg2)); border-color: var(--work-c, var(--accent)); }
  .reiss-item-content { display: flex; flex-direction: column; gap: 2px; }
  .reiss-label { font-size: 13px; font-weight: 600; color: var(--text); }
  .reiss-desc { font-size: 11px; color: var(--text2); line-height: 1.4; }
  .reiss-item:has(.reiss-cb:checked) .reiss-label { color: var(--work-c, var(--accent)); }
  .reiss-item::before { content: ''; width: 18px; height: 18px; min-width: 18px; border: 1.5px solid var(--border); border-radius: 4px; background: var(--bg3); transition: background .15s, border-color .15s; margin-top: 1px; }
  .reiss-item:has(.reiss-cb:checked)::before { background: var(--work-c, var(--accent)); border-color: var(--work-c, var(--accent)); content: '✓'; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }