.timer-view {
      min-height: 100vh;
      background: #eef4f8;
      padding: 8px;
    }

    .timer-shell {
      min-height: calc(100vh - 16px);
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(31, 41, 55, 0.08);
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .timer-workspace {
      display: grid;
      grid-template-columns: 310px minmax(0, 1fr);
      min-height: 0;
    }

    .timer-panel {
      border-right: 1px solid #dce3ee;
      background: #f7fafc;
      padding: 14px;
      display: grid;
      gap: 11px;
      align-content: start;
    }

    .timer-panel h2 {
      margin: 0;
      color: var(--blue);
    }

    .timer-panel label {
      display: grid;
      gap: 5px;
      color: #164266;
      font-size: 12px;
      font-weight: 900;
    }

    .timer-panel input,
    .timer-panel textarea {
      border-color: #98b9d7;
    }

    .timer-panel textarea {
      min-height: 82px;
    }

    .timer-routines {
      display: grid;
      gap: 8px;
    }

    .timer-routines button {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;
      text-align: left;
      border: 1px solid #bfd0e2;
      background: white;
      color: #123d63;
      font-weight: 900;
    }

    .timer-routines button span {
      display: block;
      color: #667085;
      font-size: 12px;
      font-weight: 700;
    }

    .timer-routines button.active {
      border-color: var(--blue);
      background: #eef6ff;
    }

    .timer-status {
      border: 1px solid #cfe3d4;
      border-radius: 8px;
      background: #f0fdf4;
      color: #166534;
      padding: 9px 10px;
      font-size: 12px;
      font-weight: 900;
    }

    .timer-stage {
      min-width: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      padding: 14px;
      background: linear-gradient(180deg, #fbfdff 0%, #eef4f8 100%);
    }

    .timer-mode-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .timer-mode-tabs button {
      border: 1px solid #bfd0e2;
      background: #eef5fb;
      color: var(--blue);
      font-weight: 900;
    }

    .timer-mode-tabs button.active {
      border-color: var(--blue);
      background: var(--blue);
      color: white;
    }

    .timer-display-card {
      border: 1px solid #d8e5ef;
      border-radius: 8px;
      background: white;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 18px;
      padding: clamp(18px, 4vw, 42px);
      min-height: 420px;
      text-align: center;
      box-shadow: 0 12px 28px rgba(31, 41, 55, 0.08);
    }

    .timer-display-card.warning {
      background: #fffaf0;
      border-color: #f4d76f;
    }

    .timer-display-card.danger {
      background: #fff5f5;
      border-color: #ef7777;
    }

    .timer-context {
      display: grid;
      gap: 4px;
      color: #667085;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .timer-context strong {
      color: var(--blue);
      font-size: clamp(20px, 3vw, 34px);
      text-transform: none;
    }

    .timer-time {
      color: #123d63;
      font-size: clamp(72px, 16vw, 190px);
      line-height: 0.9;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
    }

    .timer-progress {
      width: min(760px, 100%);
      height: 16px;
      border-radius: 999px;
      overflow: hidden;
      background: #dce7f2;
    }

    .timer-progress span {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: #2e7d32;
      transition: width 0.2s ease, background 0.2s ease;
    }

    .timer-display-card.warning .timer-progress span {
      background: #f59e0b;
    }

    .timer-display-card.danger .timer-progress span {
      background: #dc2626;
    }

    .timer-prompt {
      width: min(820px, 100%);
      color: #203247;
      font-size: clamp(18px, 3vw, 30px);
      font-weight: 800;
      line-height: 1.25;
    }

    .timer-stage-list {
      width: min(760px, 100%);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .timer-stage-list div {
      border: 1px solid #d8e5ef;
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
      color: #475467;
      font-size: 12px;
      font-weight: 800;
    }

    .timer-stage-list div.active {
      border-color: var(--blue);
      background: #eef6ff;
      color: var(--blue);
    }

    .timer-stage-list button {
      border: 1px solid #d8e5ef;
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
      color: #475467;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      cursor: pointer;
    }

    .timer-stage-list button.active {
      border-color: var(--blue);
      background: #eef6ff;
      color: var(--blue);
    }

    .timer-stage-editor {
      border: 1px solid #cfe3d4;
      border-radius: 8px;
      background: #f8fffb;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .timer-stage-editor h3 {
      margin: 0;
      color: var(--blue);
      font-size: 14px;
    }

    .timer-stage-picker {
      display: grid;
      gap: 6px;
    }

    .timer-stage-picker button {
      width: 100%;
      border: 1px solid #d7e2ef;
      border-radius: 8px;
      background: white;
      color: #164266;
      padding: 9px 10px;
      text-align: left;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .timer-stage-picker button.active {
      border-color: var(--blue);
      background: #eef6ff;
      color: var(--blue);
    }

    .timer-stage-editor .stage-editor-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 92px;
      gap: 8px;
    }

    .timer-stage-editor button {
      width: 100%;
    }

    .timer-controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .timer-controls button {
      min-width: 150px;
      min-height: 44px;
      font-weight: 900;
    }

    .timer-controls .primary {
      flex: 0 0 auto;
    }