*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { --bg: #f9f9f7; --text: #111; --muted: #999; --faint: #e8e8e6; }
    :root.dark { --bg: #141412; --text: #f9f9f7; --muted: #666; --faint: #272725; }

    body {
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: var(--text);
      min-height: 100vh;
      display: flex;
      justify-content: center;
    }
    #app {
      width: 100%;
      max-width: 420px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* ── TRANSITIONS ── */
    .screen { flex: 1; display: flex; flex-direction: column; opacity: 1; transition: opacity 0.18s ease; }
    .screen.out { opacity: 0; pointer-events: none; }

    /* ── TAB BAR ── */
    .tab-bar {
      position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 420px;
      background: var(--bg); border-top: 1px solid var(--faint);
      display: flex; z-index: 100;
    }
    .tab-btn {
      flex: 1; padding: 12px 0 20px;
      background: none; border: none; font-family: inherit;
      font-size: 11px; letter-spacing: 0.07em; cursor: pointer;
      color: var(--muted); transition: color 0.15s; text-transform: uppercase;
    }
    .tab-btn.active { color: var(--text); font-weight: 600; }

    /* ── MINI MUSIC PLAYER ── */
    .mini-player {
      position: fixed; bottom: 49px; left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 420px;
      background: rgba(249,249,247,0.96);
      border-top: 1px solid var(--faint);
      padding: 10px 28px;
      display: none;
      justify-content: space-between;
      align-items: center;
      z-index: 99;
      backdrop-filter: blur(8px);
    }
    .mini-player.visible { display: flex; }
    .mini-track-name { font-size: 13px; color: var(--text); }
    .mini-controls { display: flex; gap: 16px; align-items: center; }
    .mini-btn {
      background: none; border: none; font-family: inherit;
      font-size: 13px; color: var(--muted); cursor: pointer; padding: 0;
      transition: color 0.1s;
    }
    .mini-btn:hover { color: var(--text); }

    /* ── SHARED HEADER ── */
    .page-header { padding: 52px 28px 0; margin-bottom: 36px; }
    .app-name { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }
    .page-title { font-size: 22px; font-weight: 400; line-height: 1.4; color: var(--text); }
    .page-title span { color: var(--muted); }

    /* ── THEORY HUB ── */
    .theory-hub { flex: 1; padding: 0 28px 100px; display: flex; flex-direction: column; gap: 12px; }
    .theory-card {
      display: flex; align-items: center; width: 100%; background: var(--bg);
      border: 1px solid var(--faint); border-radius: 10px;
      transition: background 0.12s;
    }
    .theory-card:active { background: var(--faint); }
    .card-tap {
      flex: 1; background: none; border: none;
      padding: 22px 8px 22px 24px;
      text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
    }
    .theory-card-title { font-size: 17px; font-weight: 500; color: var(--text); display: block; margin-bottom: 6px; }
    .theory-card-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
    .card-listen-btn {
      flex-shrink: 0; background: none; border: none;
      padding: 22px 24px 22px 8px;
      cursor: pointer; color: var(--muted);
      display: flex; align-items: center;
      transition: color 0.15s;
    }
    .card-listen-btn:hover { color: var(--text); }
    .card-listen-btn.active { color: var(--text); }

    /* ── THEORY INTRO ── */
    .theory-intro {
      font-size: 15px; line-height: 1.8; color: var(--muted);
      padding: 0 28px 36px; border-bottom: 1px solid var(--faint);
      margin-bottom: 0;
    }

    /* ── SHARED LIST ── */
    .item-list { flex: 1; padding-bottom: 100px; }
    .list-item {
      display: flex; align-items: center; width: 100%;
      border-bottom: 1px solid var(--faint); background: none;
      transition: background 0.1s;
    }
    .list-item:first-child { border-top: 1px solid var(--faint); }
    .list-item:active { background: var(--faint); }
    .list-item-tap {
      flex: 1; background: none; border: none; padding: 20px 12px 20px 28px;
      text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
    }
    .item-name { font-size: 16px; font-weight: 500; display: block; margin-bottom: 3px; }
    .item-tag { font-size: 13px; color: var(--muted); font-style: italic; }
    .listen-btn {
      flex-shrink: 0; background: none; border: none; font-family: inherit;
      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); cursor: pointer; padding: 20px 28px 20px 8px;
      transition: color 0.15s; white-space: nowrap;
    }
    .listen-btn:hover { color: var(--text); }
    .listen-btn.active { color: var(--text); }

    /* ── DETAIL VIEW ── */
    .detail-nav { padding: 44px 28px 0; }
    .back-btn {
      background: none; border: none; font-family: inherit;
      font-size: 14px; color: var(--muted); cursor: pointer; padding: 0; transition: color 0.1s;
    }
    .back-btn:hover { color: var(--text); }
    .detail-body { padding: 32px 28px 0; flex: 1; }
    .detail-title { font-size: 26px; font-weight: 400; margin-bottom: 6px; }
    .detail-subtitle { font-size: 14px; color: var(--muted); font-style: italic; margin-bottom: 32px; }
    .detail-text { font-size: 16px; line-height: 1.85; color: var(--text); }
    .detail-text p + p { margin-top: 20px; }
    .work-section { margin: 36px 28px 100px; }
    .work-label { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 12px; }
    .work-area {
      width: 100%; background: transparent; border: 1px solid var(--faint); border-radius: 8px;
      padding: 16px; font-family: inherit; font-size: 16px; color: var(--text);
      line-height: 1.7; resize: none; outline: none; min-height: 100px; transition: border-color 0.15s;
    }
    .work-area::placeholder { color: var(--muted); }
    .work-area:focus { border-color: var(--muted); }
    .work-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

    /* ── MEDITATION HOME ── */
    .med-home { flex: 1; padding: 0 28px 100px; display: flex; flex-direction: column; }
    .med-intro { font-size: 15px; line-height: 1.75; color: var(--muted); margin-bottom: 36px; }
    .med-start-btn {
      width: 100%; padding: 18px; background: var(--text); color: var(--bg);
      border: none; border-radius: 10px; font-family: inherit; font-size: 16px;
      cursor: pointer; transition: opacity 0.15s; margin-bottom: 36px; letter-spacing: 0.02em;
    }
    .med-start-btn:active { opacity: 0.85; }
    .phases-preview { border-top: 1px solid var(--faint); }
    .phases-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; padding: 20px 0 16px; }
    .phase-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--faint); }
    .phase-row-name { font-size: 15px; color: var(--text); }
    .phase-row-dur { font-size: 13px; color: var(--muted); }

    /* ── MEDITATION ACTIVE ── */
    .med-screen { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
    .med-top-bar { padding: 44px 28px 0; display: flex; justify-content: space-between; align-items: center; }
    .med-phase-label { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
    .med-exit-btn { background: none; border: none; font-family: inherit; font-size: 14px; color: var(--muted); cursor: pointer; padding: 0; transition: color 0.1s; }
    .med-exit-btn:hover { color: var(--text); }
    .med-voice-btn { background: none; border: none; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; padding: 0; letter-spacing: 0.04em; transition: color 0.15s; }
    .med-voice-btn.off { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
    .med-dots { display: flex; gap: 6px; padding: 16px 28px 0; }
    .med-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); transition: background 0.3s; }
    .med-dot.done { background: var(--muted); }
    .med-dot.active { background: var(--text); }
    .med-content { flex: 1; padding: 44px 28px 0; display: flex; flex-direction: column; }
    .med-phase-title { font-size: 22px; font-weight: 400; margin-bottom: 24px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .med-phase-title.visible { opacity: 1; transform: translateY(0); }
    .med-phase-body { font-size: 17px; line-height: 1.85; color: var(--text); opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; }
    .med-phase-body.visible { opacity: 1; transform: translateY(0); }
    .med-phase-body p + p { margin-top: 20px; }
    .med-skip { margin-top: 36px; background: none; border: none; font-family: inherit; font-size: 13px; color: var(--muted); cursor: pointer; padding: 0; opacity: 0; transition: opacity 0.3s, color 0.1s; align-self: flex-start; }
    .med-skip.visible { opacity: 1; }
    .med-skip:hover { color: var(--text); }
    .med-progress-wrap { padding: 32px 28px 48px; display: flex; flex-direction: column; gap: 10px; }
    .med-time-label { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
    .med-bar-track { height: 2px; background: var(--faint); border-radius: 1px; overflow: hidden; }
    .med-bar-fill { height: 100%; background: var(--text); border-radius: 1px; width: 0%; transition: width 0.5s linear; }
    .med-pause-btn { align-self: center; background: none; border: 1px solid var(--faint); border-radius: 20px; font-family: inherit; font-size: 13px; color: var(--muted); cursor: pointer; padding: 8px 18px; transition: border-color 0.1s, color 0.1s; }
    .med-pause-btn:hover { border-color: var(--muted); color: var(--text); }

    /* ── MEDITATION END ── */
    .med-end { flex: 1; padding: 56px 28px 60px; display: flex; flex-direction: column; justify-content: space-between; }
    .med-end-word { font-size: 36px; font-weight: 300; margin-bottom: 20px; }
    .med-end-text { font-size: 16px; line-height: 1.8; color: var(--muted); }
    .med-end-back { background: none; border: none; font-family: inherit; font-size: 14px; color: var(--muted); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }

    /* ── MUSIC TAB ── */
    .music-page { flex: 1; padding: 0 28px 100px; display: flex; flex-direction: column; }
    .music-player {
      border: 1px solid var(--faint); border-radius: 12px;
      padding: 28px 24px; margin-bottom: 32px; background: var(--bg);
    }
    .music-track-info { text-align: center; margin-bottom: 28px; }
    .music-track-name { font-size: 18px; font-weight: 400; display: block; margin-bottom: 4px; }
    .music-track-index { font-size: 13px; color: var(--muted); }
    .music-controls { display: flex; justify-content: center; align-items: center; gap: 32px; margin-bottom: 24px; }
    .music-ctrl-btn {
      background: none; border: none; font-family: inherit;
      font-size: 14px; color: var(--muted); cursor: pointer; padding: 6px;
      transition: color 0.1s; letter-spacing: 0.04em;
    }
    .music-ctrl-btn:hover { color: var(--text); }
    .music-play-btn {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--text); color: var(--bg);
      border: none; font-family: inherit; font-size: 15px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: opacity 0.15s; letter-spacing: 0.02em;
    }
    .music-play-btn:active { opacity: 0.8; }
    .music-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
    .music-time-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
    .music-bar-track { height: 2px; background: var(--faint); border-radius: 1px; overflow: hidden; cursor: pointer; }
    .music-bar-fill { height: 100%; background: var(--text); border-radius: 1px; width: 0%; transition: width 0.25s linear; }
    .music-hint { font-size: 13px; line-height: 1.7; color: var(--muted); border-top: 1px solid var(--faint); padding-top: 20px; }
    .music-hint strong { color: var(--muted); font-weight: 500; }

    /* ── NOW PLAYING BAR ── */
    .now-playing-bar {
      position: fixed; top: 0; left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 420px;
      background: rgba(249,249,247,0.97);
      border-bottom: 1px solid var(--faint);
      padding: 0 20px;
      height: 44px;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      z-index: 200;
      backdrop-filter: blur(10px);
    }
    .now-playing-bar.visible { display: flex; }
    .now-playing-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .now-playing-pulse {
      flex-shrink: 0; display: flex; align-items: flex-end; gap: 2px; height: 14px;
    }
    .now-playing-pulse span {
      display: block; width: 2px; background: var(--text); border-radius: 1px;
      animation: pulse-bar 0.9s ease-in-out infinite alternate;
    }
    .now-playing-pulse span:nth-child(1) { height: 6px;  animation-delay: 0s; }
    .now-playing-pulse span:nth-child(2) { height: 10px; animation-delay: 0.2s; }
    .now-playing-pulse span:nth-child(3) { height: 7px;  animation-delay: 0.4s; }
    .now-playing-pulse span:nth-child(4) { height: 12px; animation-delay: 0.15s; }
    @keyframes pulse-bar {
      from { transform: scaleY(0.4); }
      to   { transform: scaleY(1); }
    }
    .now-playing-title {
      font-size: 13px; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .now-playing-stop {
      flex-shrink: 0; background: none; border: none; font-family: inherit;
      font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
      color: var(--muted); cursor: pointer; padding: 6px 0 6px 8px;
      transition: color 0.1s;
    }
    .now-playing-stop:hover { color: var(--text); }

    /* push screen content down when bar is visible */
    .player-active .page-header { padding-top: 96px; }
    .player-active .detail-nav  { padding-top: 88px; }
    .player-active .med-top-bar { padding-top: 88px; }
    .player-active .med-end     { padding-top: 100px; }

    /* ── SPLASH ── */
    #splash {
      position: fixed; inset: 0; z-index: 1000;
      background: var(--bg);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 14px;
      opacity: 1; transition: opacity 0.5s ease;
      pointer-events: none;
    }
    #splash.fade { opacity: 0; }
    .splash-title { font-size: 28px; font-weight: 300; color: var(--text); letter-spacing: 0.01em; }
    .splash-sub { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }

    /* ── LANGUAGE TOGGLE (in account panel) ── */
    .lang-toggle {
      display: flex; gap: 6px;
    }
    .lang-toggle-btn {
      flex: 1; padding: 7px 0; font-size: 12px;
      font-family: inherit; cursor: pointer;
      background: none; border: 1px solid var(--faint); border-radius: 8px;
      color: var(--muted); transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .lang-toggle-btn.active {
      background: var(--text); border-color: var(--text); color: var(--bg);
    }

    /* ── AUTH SCREEN ── */
    #auth-screen {
      position: fixed; inset: 0; z-index: 800;
      background: var(--bg);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 28px;
      opacity: 0; transition: opacity 0.6s ease;
      pointer-events: none;
    }
    #auth-screen.visible { opacity: 1; pointer-events: all; }
    #auth-screen.out { opacity: 0; pointer-events: none; }
    .auth-logo { font-size: 26px; font-weight: 300; color: var(--text); letter-spacing: 0.01em; }
    .auth-subtitle { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: -20px; }
    .auth-tagline { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
    .auth-card {
      width: 280px; display: flex; flex-direction: column; gap: 12px;
    }
    .auth-input {
      width: 100%; padding: 15px 16px;
      background: none; border: 1px solid var(--faint); border-radius: 10px;
      font-family: inherit; font-size: 15px; color: var(--text);
      outline: none; transition: border-color 0.12s;
    }
    .auth-input:focus { border-color: var(--muted); }
    .auth-input::placeholder { color: var(--muted); }
    .auth-btn {
      width: 100%; padding: 15px 16px;
      background: var(--text); border: none; border-radius: 10px;
      font-family: inherit; font-size: 15px; color: var(--bg);
      cursor: pointer; transition: opacity 0.12s; margin-top: 4px;
    }
    .auth-btn:hover { opacity: 0.82; }
    .auth-btn:disabled { opacity: 0.38; cursor: default; }
    .auth-toggle {
      font-size: 13px; color: var(--muted); text-align: center;
      cursor: pointer; padding: 4px 0;
    }
    .auth-toggle span { color: var(--text); text-decoration: underline; }
    .auth-error {
      font-size: 13px; color: #c44; text-align: center;
      min-height: 18px; padding: 0 4px;
    }

    /* ── STREAK WIDGET ── */
    #streak-widget {
      display: none;
      position: fixed; top: 14px; right: 16px;
      z-index: 600;
      align-items: center; gap: 8px;
    }
    #streak-widget.visible { display: flex; }
    .streak-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; color: var(--muted);
      padding: 4px 10px 4px 7px;
      background: var(--bg);
      border: 1px solid var(--faint); border-radius: 20px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .streak-badge .streak-flame { font-size: 13px; }
    .streak-badge .streak-num { font-weight: 500; color: var(--text); }

    /* ── ACCOUNT ICON BUTTON ── */
    .account-btn {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--bg);
      border: 1px solid var(--faint);
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      padding: 0; transition: background 0.12s, border-color 0.12s;
      flex-shrink: 0;
    }
    .account-btn:hover { background: var(--faint); border-color: var(--muted); }
    .account-btn svg { display: block; }

    /* ── ACCOUNT PANEL ── */
    #account-panel {
      display: none;
      position: fixed; top: 54px; right: 16px;
      z-index: 650;
      background: var(--bg);
      border: 1px solid var(--faint);
      border-radius: 14px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.10);
      width: 230px;
      padding: 20px;
      flex-direction: column; gap: 14px;
      animation: panel-in 0.15s ease;
    }
    #account-panel.open { display: flex; }
    @keyframes panel-in {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .account-panel-email {
      font-size: 13px; color: var(--text);
      word-break: break-all; line-height: 1.4;
    }
    .account-panel-divider {
      height: 1px; background: var(--faint); margin: 0 -4px;
    }
    .account-panel-stats {
      display: flex; flex-direction: column; gap: 8px;
    }
    .account-stat-row {
      display: flex; align-items: center; justify-content: space-between;
    }
    .account-stat-label { font-size: 12px; color: var(--muted); }
    .account-stat-value { font-size: 13px; font-weight: 500; color: var(--text); }
    .account-panel-signout {
      font-size: 13px; color: var(--muted);
      background: none; border: none;
      cursor: pointer; padding: 0;
      font-family: inherit; text-align: left;
      transition: color 0.12s;
    }
    .account-panel-signout:hover { color: #c44; }
    #account-overlay {
      display: none; position: fixed; inset: 0; z-index: 640;
    }
    #account-overlay.open { display: block; }

    /* ── PRACTICE SUB-TABS ── */
    .practice-subtab-bar {
      display: flex; gap: 6px;
      padding: 0 20px 20px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .practice-subtab-bar::-webkit-scrollbar { display: none; }
    .practice-subtab-btn {
      flex-shrink: 0;
      padding: 7px 16px;
      background: none; border: 1px solid var(--faint); border-radius: 20px;
      font-family: inherit; font-size: 13px; color: var(--muted);
      cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .practice-subtab-btn.active {
      background: var(--text); border-color: var(--text); color: var(--bg);
    }
    .practice-subtab-content { flex: 1; overflow-y: auto; }
    .practice-empty {
      padding: 60px 28px 28px;
      text-align: center;
    }
    .practice-empty-title {
      font-size: 17px; font-weight: 400; color: var(--text); margin-bottom: 10px;
    }
    .practice-empty-sub {
      font-size: 14px; color: var(--muted); line-height: 1.6;
    }

    /* ── ROUTINES ── */
    .routine-list { padding: 4px 20px 120px; display: flex; flex-direction: column; gap: 10px; }
    .routine-card {
      display: flex; align-items: center; gap: 14px;
      background: var(--bg); border: 1px solid var(--faint);
      border-radius: 12px; padding: 18px 18px 18px 20px;
      cursor: pointer; transition: background 0.12s; width: 100%;
      text-align: left; font-family: inherit;
    }
    .routine-card:active { background: var(--faint); }
    .routine-card-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .routine-preset-tag {
      font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 2px; display: block;
    }
    .routine-card-name { font-size: 16px; font-weight: 500; color: var(--text); display: block; }
    .routine-card-meta { font-size: 13px; color: var(--muted); display: block; line-height: 1.4; }
    .routine-card-chevron { font-size: 20px; color: var(--muted); line-height: 1; flex-shrink: 0; }
    .routine-new-btn {
      display: flex; align-items: center; justify-content: center;
      padding: 16px; border: 1px dashed var(--faint); border-radius: 12px;
      background: none; font-family: inherit; font-size: 15px; color: var(--muted);
      cursor: pointer; transition: border-color 0.12s, color 0.12s; width: 100%;
    }
    .routine-new-btn:hover { border-color: var(--muted); color: var(--text); }

    /* Routine detail */
    .routine-detail { padding: 0 20px 120px; }
    .routine-detail-nav { padding-bottom: 20px; }
    .routine-detail-name { font-size: 22px; font-weight: 400; color: var(--text); margin-bottom: 4px; }
    .routine-detail-meta { font-size: 13px; color: var(--muted); margin-bottom: 28px; display: block; }
    .routine-step {
      display: flex; align-items: center; gap: 16px;
      padding: 16px 0; border-bottom: 1px solid var(--faint);
      cursor: pointer;
    }
    .routine-step:first-of-type { border-top: 1px solid var(--faint); }
    .routine-step:active { opacity: 0.6; }
    .step-num {
      width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--faint);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: var(--muted); flex-shrink: 0;
    }
    .step-info { flex: 1; }
    .step-type-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
    .step-name { font-size: 15px; color: var(--text); display: block; }
    .step-chevron { font-size: 18px; color: var(--muted); }
    .routine-delete-btn {
      margin-top: 28px; background: none; border: none; font-family: inherit;
      font-size: 13px; color: var(--muted); cursor: pointer; padding: 0;
      transition: color 0.12s;
    }
    .routine-delete-btn:hover { color: #c44; }

    /* Create routine */
    .routine-create { padding: 0 20px 120px; display: flex; flex-direction: column; gap: 20px; }
    .routine-create-nav { padding-bottom: 4px; }
    .routine-name-input {
      width: 100%; background: none; border: none; border-bottom: 1px solid var(--faint);
      font-family: inherit; font-size: 22px; font-weight: 400; color: var(--text);
      padding: 8px 0; outline: none; transition: border-color 0.15s;
    }
    .routine-name-input::placeholder { color: var(--muted); }
    .routine-name-input:focus { border-color: var(--muted); }
    .create-steps-list { display: flex; flex-direction: column; }
    .create-step-item {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 0; border-bottom: 1px solid var(--faint);
    }
    .create-step-item:first-child { border-top: 1px solid var(--faint); }
    .create-step-info { flex: 1; }
    .create-step-remove {
      background: none; border: none; font-size: 20px; color: var(--muted);
      cursor: pointer; padding: 4px; line-height: 1; transition: color 0.12s;
    }
    .create-step-remove:hover { color: #c44; }
    .step-picker { border: 1px solid var(--faint); border-radius: 12px; overflow: hidden; }
    .step-picker-label {
      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); padding: 14px 16px 10px; display: block;
    }
    .step-picker-category { border-top: 1px solid var(--faint); }
    .step-picker-cat-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; background: none; border: none; font-family: inherit;
      font-size: 15px; color: var(--text); cursor: pointer; text-align: left;
    }
    .step-picker-cat-btn:active { background: var(--faint); }
    .picker-arrow { font-size: 12px; color: var(--muted); transition: transform 0.15s; display: inline-block; }
    .picker-arrow.open { transform: rotate(90deg); }
    .step-picker-items { display: none; flex-direction: column; }
    .step-picker-items.open { display: flex; }
    .step-picker-item {
      padding: 12px 16px 12px 32px; background: none; border: none;
      border-top: 1px solid var(--faint);
      font-family: inherit; font-size: 14px; color: var(--muted);
      cursor: pointer; text-align: left; transition: color 0.1s;
    }
    .step-picker-item:active { color: var(--text); background: var(--faint); }
    .routine-save-btn {
      width: 100%; padding: 16px; background: var(--text); color: var(--bg);
      border: none; border-radius: 10px; font-family: inherit; font-size: 15px;
      cursor: pointer; transition: opacity 0.12s;
    }
    .routine-save-btn:hover { opacity: 0.85; }
    .routine-save-btn:disabled { opacity: 0.35; cursor: default; }