.add-routine-page {
      display: none;
      height: 100vh;
      padding: 18px 16px calc(18px + var(--safe-bottom));
      flex-direction: column;
    }

    .add-routine-page.active { display: flex; }

    .mode-add-save {
      min-width: 44px;
      height: 38px;
      border-radius: 14px;
      background: var(--green);
      color: white;
      font-size: 13px;
      font-weight: 900;
    }

    .mode-add-save:disabled {
      background: var(--gray);
      color: var(--muted);
    }

    .add-routine-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 14px 0 24px;
    }

    .add-section {
      margin-bottom: 12px;
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 14px;
      border: 1px solid transparent;
    }

    .add-section.highlight-active {
      border-color: var(--green);
      background: linear-gradient(0deg, rgba(97, 195, 139, .12), rgba(97, 195, 139, .12)), var(--panel);
    }

    .routine-name-row {
      display: grid;
      grid-template-columns: 1fr 56px;
      gap: 10px;
      align-items: center;
    }

    .routine-name-input {
      width: 100%;
      min-height: 54px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #f8faf6;
      color: var(--text);
      font: inherit;
      font-size: 18px;
      font-weight: 900;
      padding: 0 14px;
      outline: none;
    }

    .icon-picker-button {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      background: #eef1ed;
      font-size: 28px;
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .setting-row,
    .toggle-row {
      width: 100%;
      min-height: 54px;
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      text-align: left;
      font-weight: 900;
    }

    .setting-row:last-child,
    .toggle-row:last-child { border-bottom: 0; }

    .setting-row strong {
      max-width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--muted);
      font-size: 13px;
    }

    .repeat-summary-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-height: 64px;
      padding: 0;
    }

    .repeat-summary-main {
      width: 100%;
      min-height: 64px;
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      text-align: left;
      font-weight: 900;
      padding: 0;
    }

    .repeat-summary-main strong {
      max-width: 100%;
      display: grid;
      gap: 2px;
      justify-items: start;
      text-align: left;
      color: var(--muted);
      font-size: 13px;
    }

    .repeat-summary-main strong span {
      display: block;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .repeat-summary-main strong:empty {
      display: none;
    }

    .repeat-summary-main small {
      grid-column: 1 / -1;
      min-height: 14px;
      margin-top: -14px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .repeat-summary-main small:empty {
      display: none;
    }

    .repeat-summary-add-button {
      margin-right: 10px;
      flex: 0 0 auto;
    }

    .repeat-summary-add-button[hidden] {
      display: none;
    }

    .repeat-notification-add {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: var(--green);
      color: white;
      font-size: 22px;
      font-weight: 900;
    }

    .inline-picker-row {
      min-height: 62px;
      border-radius: 16px;
      background: #f4f6f1;
      display: grid;
      place-items: center;
      font-size: 16px;
      font-weight: 900;
    }

    .inline-picker-row select {
      width: 76px;
      min-height: 88px;
      margin-right: 4px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8faf6;
      color: var(--text);
      font: inherit;
      font-size: 22px;
      font-weight: 900;
      text-align: center;
    }

    .toggle-row input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .toggle-row i {
      width: 48px;
      height: 28px;
      border-radius: 999px;
      background: var(--gray);
      position: relative;
    }

    .toggle-row i::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: white;
      transition: transform .18s ease;
    }

    .toggle-row input:checked + i {
      background: var(--green);
    }

    .toggle-row input:checked + i::after {
      transform: translateX(20px);
    }

    .color-swatches {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }

    .color-swatches[hidden] {
      display: none;
    }

    .color-swatches button {
      height: 40px;
      border-radius: 14px;
      background: var(--swatch);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    }

    .color-swatches button.selected {
      box-shadow: inset 0 0 0 3px var(--green-dark), 0 8px 18px rgba(35, 148, 86, .22);
      transform: translateY(-1px);
    }

    .icon-dialog {
      max-height: calc(100% - 32px);
      display: flex;
      flex-direction: column;
    }

    .icon-grid {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      overflow-y: auto;
      max-height: 52vh;
    }

    .icon-grid button {
      min-height: 42px;
      border-radius: 12px;
      background: #f4f6f1;
      font-size: 23px;
    }

    .icon-empty {
      grid-column: 1 / -1;
      min-height: 96px;
      border-radius: 16px;
      background: #f4f6f1;
      color: var(--muted);
      display: grid;
      place-items: center;
      gap: 8px;
      padding: 12px;
      font-size: 13px;
      font-weight: 900;
    }

    .icon-empty .icon-direct-button {
      width: 100%;
      min-height: 42px;
      border-radius: 14px;
      background: var(--green);
      color: white;
      font-size: 13px;
    }

    .number-picker-range,
    .number-picker-select {
      width: 100%;
      margin-top: 20px;
      accent-color: var(--green);
    }

    .number-picker-select {
      min-height: 120px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #f8faf6;
      color: var(--text);
      font: inherit;
      font-size: 22px;
      font-weight: 900;
      text-align: center;
    }

    .number-picker-value {
      margin-top: 8px;
      text-align: center;
      font-size: 30px;
      font-weight: 900;
    }

    .repeat-tabs {
      margin-top: 8px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .repeat-tabs button {
      min-height: 44px;
      border-radius: 14px;
      background: #f4f6f1;
      font-weight: 900;
    }

    .repeat-tabs button.selected {
      background: var(--green);
      color: white;
    }

    .group-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 38px;
      font-weight: 900;
    }

    .group-routine-list {
      margin-top: 10px;
      display: grid;
      gap: 8px;
    }

    .group-routine-list .task-row {
      margin-bottom: 0;
      grid-template-columns: 2fr 7fr 2fr;
      cursor: grab;
      touch-action: none;
    }

    .group-routine-list .task-row.dragging {
      opacity: .58;
      transform: scale(.99);
    }

    .group-row-actions {
      gap: 6px;
      padding: 0 8px;
    }

    .drag-handle {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: #eef1ed;
      color: var(--muted);
      font-weight: 900;
    }

    .repeat-panel {
      margin-top: 14px;
      color: var(--text);
      font-weight: 900;
    }

    .repeat-step-panel { display: none; }
    .repeat-step-panel.active { display: block; }

    .repeat-step-label {
      margin-top: 14px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .repeat-set-toolbar {
      margin-top: 10px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .repeat-set-list {
      flex: 1;
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    .repeat-set-chip {
      min-height: 34px;
      max-width: 190px;
      border-radius: 999px;
      background: #f4f6f1;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
      padding: 0 8px 0 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .repeat-set-chip.selected {
      background: var(--green);
      color: white;
    }

    .repeat-set-chip span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .repeat-set-chip i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.08);
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      font-style: normal;
      font-size: 11px;
    }

    .repeat-set-add-button {
      flex: 0 0 auto;
    }

    .repeat-header .repeat-back-button {
      visibility: hidden;
      font-size: 24px;
    }

    .repeat-header.can-go-back .repeat-back-button {
      visibility: visible;
    }

    .repeat-notification-list {
      min-height: 0;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .notification-pill {
      min-height: 34px;
      border-radius: 999px;
      background: #f4f6f1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 8px 0 12px;
      color: var(--text);
      font-size: 13px;
      font-weight: 900;
    }

    .notification-time-button {
      min-height: 34px;
      padding: 0;
      color: inherit;
      font: inherit;
    }

    .notification-pill button {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e4e9df;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .notification-pill .notification-time-button {
      width: auto;
      min-width: 42px;
      height: auto;
      border-radius: 0;
      background: transparent;
      color: inherit;
      font-size: inherit;
    }

    .notification-add-pill {
      justify-content: center;
      min-width: 52px;
      padding: 0 16px;
      color: var(--text);
    }

    .repeat-modal-add-notification[hidden] {
      display: none;
    }

    .weekday-select,
    .month-day-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
    }

    .weekday-select button,
    .month-day-grid button {
      min-height: 38px;
      border-radius: 12px;
      background: #f4f6f1;
      font-size: 12px;
      font-weight: 900;
    }

    .weekday-select button.selected,
    .month-day-grid button.selected {
      background: var(--green);
      color: white;
    }

    .time-picker {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .time-picker select {
      min-height: 112px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #f8faf6;
      color: var(--text);
      font: inherit;
      font-weight: 900;
      text-align: center;
    }

    .task-check.icon-check {
      border-radius: 12px;
      border-color: transparent;
      background: #eef1ed;
      color: var(--muted);
      font-size: 18px;
    }

    .task-check.icon-check.checked {
      background: var(--green);
      color: white;
    }

    .task-check.icon-check.checked::after { content: attr(data-icon); }

    .routine-row-menu {
      top: 66px;
      right: 16px;
      z-index: 22;
    }

    .routine-row-menu #deleteRoutineButton {
      color: #d85151;
    }

    .confirm-primary.danger {
      background: #d85151;
      color: white;
    }

    @media (min-width: 768px) {
      .add-routine-page { height: 100%; }
    }

    body.dark-mode .add-section,
    body.dark-mode .routine-name-input,
    body.dark-mode .icon-picker-button,
    body.dark-mode .icon-grid button,
    body.dark-mode .repeat-tabs button,
    body.dark-mode .repeat-set-chip,
    body.dark-mode .weekday-select button,
    body.dark-mode .month-day-grid button,
    body.dark-mode .time-picker select,
    body.dark-mode .number-picker-select,
    body.dark-mode .notification-pill,
    body.dark-mode .inline-picker-row,
    body.dark-mode .inline-picker-row select {
      background: var(--panel);
    }

    body.dark-mode .repeat-set-chip.selected {
      background: var(--green);
      color: white;
    }

    body.dark-mode .icon-empty {
      background: #30372e;
    }