.timer-workspace { display: grid; grid-template-columns: minmax(340px,1.15fr) minmax(280px,.85fr); gap: 22px; margin-bottom: 23px; align-items: stretch; }
.timer-focus-card { background: #0b1f3a; color: #fff; border-radius: 24px; padding: 25px 28px 22px; position: relative; overflow: hidden; border: 1px solid #173557; }
.timer-focus-card::after { content: ''; position: absolute; width: 390px; height: 390px; left: -210px; bottom: -190px; border: 1px solid #ffffff0a; border-radius: 50%; pointer-events: none; }
.timer-card-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.timer-person { display: flex; align-items: center; gap: 9px; }
.timer-avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; background: #294b78; color: #a9caff; font: 600 16px 'Space Grotesk',sans-serif; }
.timer-person strong { display: block; font: 500 13px 'Space Grotesk',sans-serif; }
.timer-person small { display: block; font-size: 9px; color: #8ba2c1; margin-top: 5px; }
.timer-state { display: flex; align-items: center; gap: 7px; background: #ffffff08; border: 1px solid #ffffff0c; color: #a2b7d1; padding: 7px 10px; border-radius: 20px; font-size: 10px; }
.timer-state i { width: 6px; height: 6px; background: #90a5c4; border-radius: 50%; }
.timer-state.is-recording { color: #82dbb4; background: #52cda510; border-color: #52cda520; }
.timer-state.is-recording i { background: #69dca6; }
.timer-dial { --timer-angle: 0deg; width: min(100%,278px); aspect-ratio: 1; padding: 6px; margin: 27px auto 19px; border-radius: 50%; background: conic-gradient(from 0deg,#77aefe var(--timer-angle),#233c5b 0); transform: rotate(-90deg); box-shadow: 0 0 0 12px #1c345126, 0 0 0 13px #35506a22; }
.timer-dial-inner { width: 100%; height: 100%; border-radius: 50%; background: #0b1f3a; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: rotate(90deg); }
.timer-dial-label { font-size: 10px; color: #a0b5d0; margin-bottom: 16px; }
#page-time .timer-display { font: 500 clamp(35px,3.7vw,47px) 'Space Grotesk',sans-serif; letter-spacing: -.045em; color: #fff; margin: 0; font-variant-numeric: tabular-nums; }
.timer-unit-labels { display: flex; direction: ltr; width: 180px; justify-content: space-between; padding: 0 6px; margin-top: 7px; }
.timer-unit-labels b { color: #728caa; font-size: 8px; font-weight: 400; }
.timer-dial-caption { color: #94b6e7; background: #1c385d; border-radius: 20px; padding: 5px 12px; margin-top: 22px; font-size: 9px; }
.timer-message { font-size: 11px; text-align: center; color: #96acc8; margin: 0 0 22px; }
.timer-controls { display: grid; gap: 10px; max-width: 335px; margin: 0 auto; }
#page-time .timer-button { width: 100%; justify-content: center; margin: 0; border-radius: 12px; height: 50px; font-size: 13px; color: #fff; background: #2d73e5; box-shadow: 0 8px 20px #00000018; }
#page-time .timer-button.running { background: #213e60; border: 1px solid #42658e; }
#page-time .timer-button:hover { filter: brightness(1.1); }
.timer-finish-button { width: 100%; height: 46px; background: transparent; border: 1px solid #2e4766; color: #9fb9db; border-radius: 12px; font-size: 11px; }
.timer-finish-button span { padding-left: 7px; }
.timer-finish-button:disabled { color: #526982; border-color: #233c57; cursor: default; }
.timer-save-note { text-align: center; font-size: 9px; color: #6681a0; margin-top: 20px; line-height: 1.8; }
.timer-save-note span { font-size: 12px; padding-left: 4px; }
.timer-summary-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.timer-summary-column .panel { flex: 1; padding: 25px; }
.timer-summary-icon { display: grid; place-items: center; width: 33px; height: 33px; background: #eef4ff; border-radius: 10px; color: #6a92ce; font-size: 20px; }
.timer-summary-total { display: flex; align-items: baseline; gap: 11px; margin: 5px 0 22px; }
.timer-summary-total strong { font: 600 35px 'Space Grotesk',sans-serif; color: #183456; }
.timer-summary-total span { font-size: 10px; color: #8b9db4; }
.timer-goal-track { height: 6px; background: #edf2f9; border-radius: 5px; overflow: hidden; }
.timer-goal-track i { background: #2d73e5; display: block; height: 100%; border-radius: 5px; }
.timer-goal-meta { display: flex; justify-content: space-between; font-size: 9px; color: #9aa8ba; margin-top: 9px; }
.timer-goal-meta b { color: #6791cc; font: 500 10px 'Space Grotesk',sans-serif; }
.timer-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--line); margin-top: 23px; padding-top: 18px; }
.timer-metrics > div + div { border-right: 1px solid var(--line); padding-right: 20px; }
.timer-metrics span { display: block; color: #95a5b9; font-size: 10px; margin-bottom: 6px; }
.timer-metrics strong { display: block; font: 500 21px 'Space Grotesk',sans-serif; color: #546e90; text-align: right; }
.timer-summary-note { font-size: 9px; color: #9faebf; margin: 18px 0 0; }
.timer-demo-tag { font-size: 9px; padding: 5px 8px; border: 1px solid #e8edf4; border-radius: 7px; color: #99a7b9; }
#page-time .hours-total { margin: 15px 0; }
#page-time .hours-total strong { font-size: 28px; }
#page-time .hours-total span { font-size: 9px; }
#page-time .bar-chart { height: 94px; gap: 15px; }
#page-time .bar-chart i { min-height: 0; background: #e1eaf8; border-radius: 5px 5px 0 0; }
#page-time .bar-chart i.active { background: #2d73e5; }
.timer-chart-note { font-size: 9px; color: #9da9bb; line-height: 1.7; margin: 16px 0 0; }
.timer-session-row { display: flex; gap: 12px; align-items: center; padding: 17px 0; border-bottom: 1px solid #edf1f7; }
.timer-session-row:last-child { border-bottom: 0; }
.timer-session-icon { display: grid; place-items: center; width: 31px; height: 31px; background: #eef7f2; color: #6caf8d; border-radius: 10px; font-size: 12px; }
.timer-session-row > div { flex: 1; }
.timer-session-row strong { font-size: 12px; display: block; font-weight: 500; }
.timer-session-row small { font-size: 9px; color: #94a3b7; display: block; margin-top: 5px; }
.timer-session-row b { font: 500 13px 'Space Grotesk',sans-serif; color: #6d82a0; }
.timer-session-tag { font-size: 9px; padding: 6px 8px; background: #f4f7fb; border-radius: 6px; color: #8c9caf; }
.timer-session-empty { display: flex; align-items: center; gap: 15px; padding: 18px 0 21px; }
.timer-session-empty > span { font-size: 27px; color: #b2c3da; width: 45px; height: 45px; background: #f5f8fc; border-radius: 14px; display: grid; place-items: center; }
.timer-session-empty strong { font-size: 12px; font-weight: 500; color: #647b99; }
.timer-session-empty p { font-size: 10px; color: #9caabd; margin: 7px 0 0; }
.timer-history-caption { font-size: 9px; color: #a2aebe; border-top: 1px solid #eff3f8; margin-top: 12px; padding-top: 15px; }
.timer-back { min-height: 38px; }
@media (max-width:1100px) {
  .timer-workspace { grid-template-columns: 1fr; }
  .timer-summary-column { display: grid; grid-template-columns: 1fr 1fr; }
  .timer-focus-card { padding-bottom: 25px; }
}
@media (max-width:720px) {
  .timer-workspace { gap: 15px; }
  .timer-focus-card { border-radius: 19px; padding: 20px 20px 22px; }
  .timer-dial { width: 258px; max-width: calc(100% - 16px); margin: 32px auto 23px; }
  #page-time .timer-display { font-size: 42px; }
  .timer-card-header { gap: 8px; }
  .timer-state { font-size: 9px; }
  .timer-summary-column { display: flex; gap: 15px; }
  .timer-summary-column .panel { padding: 21px; }
  .timer-session-row { flex-wrap: wrap; gap: 10px; }
  .timer-session-row > div { flex: 1; min-width: 150px; }
  .timer-session-tag { display: none; }
  .timer-session-row b { font-size: 12px; }
  #page-time .page-heading { flex-wrap: nowrap; align-items: flex-start; }
  .timer-back { font-size: 9px; white-space: nowrap; padding: 0 9px; margin-top: 5px; }
  #page-time .page-heading h1 { font-size: 25px; }
  #page-time .page-heading .muted { font-size: 11px; }
}
@media (max-width:380px) {
  #page-time .timer-display { font-size: 36px; }
  .timer-dial { width: 225px; }
  .timer-unit-labels { width: 155px; }
}