.desktop-time-center { display: none; }

@media (min-width: 1024px) {
  .desktop-time-center {
    width: 100%;
    min-height: 132px;
    margin-top: auto;
    padding: 14px 12px;
    display: grid;
    grid-template-columns: 76px minmax(0,1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 7px 12px;
    border: 1px solid rgba(87,213,223,.16);
    border-radius: 18px;
    color: #dce6f4;
    background:
      radial-gradient(circle at 16% 42%, rgba(87,213,223,.13), transparent 105px),
      radial-gradient(circle at 100% 0, rgba(126,112,255,.09), transparent 118px),
      linear-gradient(135deg, rgba(18,31,47,.93), rgba(10,15,25,.94));
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.16);
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }

  .desktop-time-center:hover {
    border-color: rgba(87,213,223,.38);
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.2), 0 0 22px rgba(87,213,223,.06);
    transform: translateY(-1px);
  }

  .desktop-time-center.is-active {
    border-color: rgba(126,112,255,.46);
    background:
      radial-gradient(circle at 10% 20%, rgba(87,213,223,.15), transparent 78px),
      linear-gradient(135deg, rgba(31,30,67,.96), rgba(10,18,30,.96));
  }

  .desktop-time-center__clock {
    width: 76px;
    height: 76px;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #77e3ea;
    background: radial-gradient(circle,rgba(17,38,57,.94),rgba(7,14,24,.98));
    box-shadow: inset 0 0 0 1px rgba(98,220,229,.2),0 0 28px rgba(64,200,214,.08);
  }

  .desktop-time-center__dial { width: 100%; height: 100%; overflow: visible; }
  .desktop-time-center__dial-face { fill: rgba(8,17,29,.76); stroke: rgba(91,211,221,.48); stroke-width: 1.4; }
  .desktop-time-center__ticks { fill: none; stroke: rgba(197,225,235,.48); stroke-width: 1.25; stroke-linecap: round; }
  .desktop-time-center__hand { stroke-linecap: round; }
  .desktop-time-center__hand--hour { stroke: #f4f7fb; stroke-width: 2.8; }
  .desktop-time-center__hand--minute { stroke: #8ee7ec; stroke-width: 2.1; }
  .desktop-time-center__hand--second { stroke: #a886ff; stroke-width: 1.15; }
  .desktop-time-center__dial-center { fill: #f5f7fb; stroke: #8374ff; stroke-width: 1.2; }

  .desktop-time-center.is-active .desktop-time-center__clock {
    color: #c8b7ff;
    box-shadow: inset 0 0 0 1px rgba(158,108,255,.4),0 0 30px rgba(126,112,255,.14);
    animation: time-center-pulse 2.4s ease-in-out infinite;
  }

  .desktop-time-center__copy { min-width: 0; display: grid; align-content: center; gap: 2px; }
  .desktop-time-center__copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-time-center__label { color: #72dbe3; font-size: .46rem; font-weight: 720; letter-spacing: .13em; text-transform: uppercase; }
  .desktop-time-center__now { color: #f5f7fb; font-size: 1.35rem; font-weight: 620; letter-spacing: -.045em; line-height: 1.05; }
  .desktop-time-center__copy > span { margin-top: 2px; color: #d8e1ef; font-size: .53rem; font-weight: 630; }
  .desktop-time-center__copy > small:last-child { color: #7f8da1; font-size: .46rem; font-weight: 480; }
  .desktop-time-center__badge { min-width: 0; max-width: 100%; padding: 5px 8px; grid-column: 2; justify-self: start; overflow: hidden; border: 1px solid rgba(243,203,103,.18); border-radius: 999px; color: #f2d889; background: rgba(243,203,103,.07); font-size: .45rem; font-weight: 750; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-time-center.is-active .desktop-time-center__badge { color: #8ee8ed; border-color: rgba(87,213,223,.24); background: rgba(87,213,223,.08); }

  .desktop-time-center + .desktop-nav__footer { margin-top: 7px; }
}

@media (min-width: 1024px) and (max-height: 790px) {
  .desktop-time-center { min-height: 104px; padding: 10px; grid-template-columns: 60px minmax(0,1fr); }
  .desktop-time-center__clock { width: 60px; height: 60px; }
  .desktop-time-center__now { font-size: 1.12rem; }
  .desktop-time-center__copy > small:last-child { display: none; }
}

@keyframes time-center-pulse {
  0%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 0 rgba(158,108,255,.15); }
  50% { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 6px rgba(158,108,255,0); }
}

.app-dialog--time-center {
  width: min(calc(100vw - 52px), 1080px);
  max-height: calc(100dvh - 34px);
}

.app-dialog--time-center .app-dialog__surface {
  padding: 0;
  overflow: hidden auto;
  border-color: rgba(107,102,226,.29);
  background:
    radial-gradient(circle at 16% -8%, rgba(126,112,255,.18), transparent 380px),
    radial-gradient(circle at 100% 18%, rgba(87,213,223,.09), transparent 330px),
    linear-gradient(155deg, #101827, #070c14 70%);
}

.app-dialog--time-center .app-dialog__close {
  z-index: 5;
  top: 22px;
  right: 22px;
}

.time-center { padding: 25px; display: grid; gap: 15px; color: #f2f5fb; }
.time-center__header { min-height: 68px; padding: 0 58px 15px 2px; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 13px; border-bottom: 1px solid rgba(255,255,255,.07); }
.time-center__header > div:nth-child(2) { min-width: 0; }
.time-center__header > div:nth-child(2) > span { color: #b69fff; font-size: .55rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.time-center__header h2 { margin: 2px 0 1px; font-size: 1.45rem; line-height: 1.1; }
.time-center__header p { margin: 0; color: #8390a4; font-size: .65rem; }
.time-center__emblem { width: 52px; height: 52px; position: relative; display: grid; place-items: center; border: 1px solid rgba(87,213,223,.3); border-radius: 17px; color: #8deaf0; background: linear-gradient(145deg, rgba(87,213,223,.13), rgba(126,112,255,.12)); box-shadow: 0 12px 30px rgba(33,25,101,.2), inset 0 1px rgba(255,255,255,.08); }
.time-center__emblem i { width: 7px; height: 7px; position: absolute; top: 7px; right: 7px; border-radius: 50%; background: #69dfa7; box-shadow: 0 0 0 4px rgba(105,223,167,.1), 0 0 12px rgba(105,223,167,.45); }
.time-center__plan { padding: 6px 10px; border: 1px solid rgba(158,108,255,.25); border-radius: 999px; color: #c7b5ff; background: rgba(158,108,255,.08); font-size: .54rem; font-weight: 680; }
.time-center__mobile-nav { display: none; }

.time-access-card {
  min-height: 92px;
  padding: 17px 18px 20px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 45px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(243,203,103,.17);
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 20%, rgba(243,203,103,.11), transparent 210px),
    linear-gradient(115deg, rgba(24,31,43,.96), rgba(15,21,31,.94));
}
.time-access-card__icon { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgba(243,203,103,.26); border-radius: 14px; color: #efd179; background: rgba(243,203,103,.08); }
.time-access-card > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.time-access-card > div:nth-child(2) > span { color: #9ba6b7; font-size: .53rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.time-access-card > div:nth-child(2) strong { font-size: .9rem; }
.time-access-card > div:nth-child(2) small { color: #8995a7; font-size: .58rem; }
.time-access-card__value { min-width: 60px; display: grid; color: #f0d885; font-size: 1.38rem; font-weight: 730; line-height: 1; text-align: center; }
.time-access-card__value small { margin-top: 4px; color: #8e99aa; font-size: .46rem; font-weight: 550; text-transform: uppercase; }
.time-access-card > i { height: 3px; position: absolute; left: 17px; right: 17px; bottom: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.time-access-card > i::after { content: ""; width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#8b78ff,#58d5df,#f1cf72); box-shadow: 0 0 10px rgba(87,213,223,.35); transform: scaleX(0); transform-origin: left center; }
.time-access-card > i.time-access-progress--10::after { transform: scaleX(.1); }
.time-access-card > i.time-access-progress--20::after { transform: scaleX(.2); }
.time-access-card > i.time-access-progress--30::after { transform: scaleX(.3); }
.time-access-card > i.time-access-progress--40::after { transform: scaleX(.4); }
.time-access-card > i.time-access-progress--50::after { transform: scaleX(.5); }
.time-access-card > i.time-access-progress--60::after { transform: scaleX(.6); }
.time-access-card > i.time-access-progress--70::after { transform: scaleX(.7); }
.time-access-card > i.time-access-progress--80::after { transform: scaleX(.8); }
.time-access-card > i.time-access-progress--90::after { transform: scaleX(.9); }
.time-access-card > i.time-access-progress--100::after { transform: scaleX(1); }
.time-access-card--expired { border-color: rgba(255,111,120,.22); }
.time-access-card--expired .time-access-card__value { color: #ff9fa6; }

.time-center__tools { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(220px,.83fr) minmax(220px,.83fr); gap: 12px; }
.time-tool-card,
.time-alarms-card { min-width: 0; border: 1px solid rgba(255,255,255,.085); border-radius: 18px; background: linear-gradient(145deg, rgba(24,32,45,.96), rgba(13,19,29,.97)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 14px 30px rgba(0,0,0,.12); }
.time-tool-card { min-height: 268px; padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.time-tool-card > header,
.time-alarms-card > header,
.time-alarms-card > header > div { display: flex; align-items: center; gap: 10px; }
.time-tool-card > header > div,
.time-alarms-card > header > div > div { min-width: 0; display: grid; gap: 2px; }
.time-tool-card > header span:not(.time-tool-card__icon),
.time-alarms-card > header span:not(.time-tool-card__icon) { color: #7e8b9d; font-size: .49rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.time-tool-card h3,
.time-alarms-card h3 { margin: 0; font-size: .75rem; }
.time-tool-card > header > strong { margin-left: auto; color: #bbaaff; font-size: .78rem; font-variant-numeric: tabular-nums; }
.time-tool-card__icon { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; }
.time-tool-card__icon--study { color: #bca8ff; border-color: rgba(158,108,255,.27); background: rgba(158,108,255,.09); }
.time-tool-card__icon--timer { color: #6ee0e8; border-color: rgba(87,213,223,.24); background: rgba(87,213,223,.08); }
.time-tool-card__icon--stopwatch { color: #efd074; border-color: rgba(243,203,103,.23); background: rgba(243,203,103,.07); }
.time-tool-card__icon--alarm { color: #ff9fa7; border-color: rgba(255,111,120,.22); background: rgba(255,111,120,.07); }

.time-study-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.time-study-form > label,
.time-custom-breaks label { min-width: 0; display: grid; gap: 5px; color: #939fb0; font-size: .51rem; font-weight: 580; }
.time-study-form input,
.time-study-form select,
.time-alarm-form input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: #f0f3f8; background: rgba(4,9,16,.5); font: inherit; font-size: .62rem; color-scheme: dark; }
.time-study-form select option { background: #111827; }
.time-custom-breaks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.time-custom-breaks[hidden] { display: none; }
.time-custom-breaks label { position: relative; }
.time-custom-breaks small { position: absolute; right: 9px; bottom: 12px; color: #687589; font-size: .45rem; }
.time-primary-action { grid-column: 1 / -1; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(158,108,255,.38); border-radius: 12px; color: #fff; background: linear-gradient(135deg,#7c61f2,#5141c8); box-shadow: 0 10px 24px rgba(82,61,188,.22), inset 0 1px rgba(255,255,255,.18); font: inherit; font-size: .62rem; font-weight: 680; cursor: pointer; }
.time-plan-note { grid-column: 1 / -1; margin: -2px 0 0; color: #748196; font-size: .47rem; line-height: 1.45; }
.time-tool-card > footer { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.065); color: #7f8b9e; font-size: .53rem; }
.time-tool-card > footer strong { color: #dce3ee; font-size: .61rem; }

.time-active-session { flex: 1; display: grid; gap: 11px; }
.time-active-session > div:first-child { padding: 15px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid rgba(158,108,255,.18); border-radius: 14px; background: radial-gradient(circle,rgba(126,112,255,.11),transparent 75%); text-align: center; }
.time-active-session > div:first-child span { color: #7f8da1; font-size: .49rem; text-transform: uppercase; letter-spacing: .08em; }
.time-active-session > div:first-child strong { color: #d3c8ff; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.time-active-session > div:first-child small { color: #7b8799; font-size: .48rem; }
.time-active-session__actions,
.time-control-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.time-active-session__actions button,
.time-control-row button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: #b7c1cf; background: rgba(255,255,255,.035); font: inherit; font-size: .54rem; cursor: pointer; }
.time-active-session__actions button:first-child,
.time-control-row button:first-child { border-color: rgba(87,213,223,.2); color: #8ee7ed; background: rgba(87,213,223,.06); }

.time-display { flex: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; color: #edf3fb; background: radial-gradient(circle,rgba(87,213,223,.07),transparent 70%); font-size: clamp(1.25rem,2.1vw,1.72rem); font-weight: 680; letter-spacing: .045em; font-variant-numeric: tabular-nums; }
.time-display--stopwatch { background: radial-gradient(circle,rgba(243,203,103,.065),transparent 70%); }
.time-timer-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) 38px; gap: 5px; }
.time-timer-form label { min-width: 0; position: relative; }
.time-timer-form input { width: 100%; min-height: 38px; padding: 7px 5px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #eff3f9; background: rgba(4,9,16,.48); font: inherit; font-size: .68rem; text-align: center; }
.time-timer-form label span { position: absolute; left: 0; right: 0; bottom: 4px; color: #6d798b; font-size: .4rem; text-align: center; }
.time-timer-form button { border: 1px solid rgba(87,213,223,.27); border-radius: 11px; color: #8ceaf0; background: rgba(87,213,223,.09); cursor: pointer; }

.time-alarms-card { padding: 16px; display: grid; gap: 12px; }
.time-alarms-card > header { justify-content: space-between; }
.time-plan-chip { margin-left: auto; padding: 5px 9px; border: 1px solid rgba(255,111,120,.17); border-radius: 999px; color: #ffb3b8 !important; background: rgba(255,111,120,.05); font-size: .47rem !important; letter-spacing: 0 !important; text-transform: none !important; }
.time-alarm-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.time-alarm-list article { min-width: 0; padding: 9px 10px; display: grid; grid-template-columns: 27px minmax(0,1fr) 24px; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(255,255,255,.025); }
.time-alarm-list article > span { color: #ff9fa7; }
.time-alarm-list article > div { min-width: 0; display: grid; gap: 2px; }
.time-alarm-list article strong,
.time-alarm-list article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-alarm-list article strong { font-size: .57rem; }
.time-alarm-list article small { color: #778499; font-size: .46rem; }
.time-alarm-list article > button { width: 24px; height: 24px; border: 0; border-radius: 8px; color: #8e9aac; background: transparent; cursor: pointer; }
.time-alarm-list article.is-complete { opacity: .48; }
.time-alarm-empty { margin: 0; color: #7f8b9d; font-size: .53rem; }
.time-alarm-form { display: grid; grid-template-columns: minmax(160px,1fr) minmax(190px,.85fr) auto; gap: 7px; }
.time-alarm-form button { min-height: 40px; padding: 7px 13px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,111,120,.23); border-radius: 11px; color: #ffb6bb; background: rgba(255,111,120,.07); font: inherit; font-size: .54rem; cursor: pointer; }
.time-alarm-form button:disabled { opacity: .45; cursor: not-allowed; }
.time-notification-status { padding-top: 11px; display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 9px; border-top: 1px solid rgba(255,255,255,.06); }
.time-notification-status > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #69dca6; background: rgba(105,220,166,.07); }
.time-notification-status > div { min-width: 0; display: grid; gap: 2px; }
.time-notification-status strong { font-size: .54rem; }
.time-notification-status small { color: #748196; font-size: .45rem; line-height: 1.4; }
.time-notification-status button { padding: 6px 9px; border: 1px solid rgba(105,220,166,.2); border-radius: 9px; color: #82e4b5; background: rgba(105,220,166,.06); font: inherit; font-size: .49rem; cursor: pointer; }

@media (max-width: 880px) {
  .app-dialog--time-center { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }
  .time-center { padding: 18px; }
  .time-center__tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .time-tool-card--study { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .app-dialog--time-center { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  .app-dialog--time-center .app-dialog__surface { height: 100dvh; border: 0; border-radius: 0; }
  .app-dialog--time-center .app-dialog__close { top: max(14px,env(safe-area-inset-top)); right: 13px; }
  .time-center { min-height: 100dvh; padding: max(14px,env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)); align-content: start; gap: 9px; }
  .time-center__header { min-height: 58px; padding: 0 48px 10px 0; grid-template-columns: 43px minmax(0,1fr); gap: 9px; }
  .time-center__emblem { width: 43px; height: 43px; border-radius: 14px; }
  .time-center__emblem svg { width: 29px; height: 29px; }
  .time-center__header h2 { font-size: 1.06rem; }
  .time-center__header p { display: none; }
  .time-center__plan { display: none; }
  .time-center__mobile-nav {
    min-height: 43px;
    padding: 3px;
    position: sticky;
    z-index: 4;
    top: 0;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 3px;
    border: 1px solid rgba(115,139,184,.15);
    border-radius: 13px;
    background: rgba(5,12,22,.94);
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
    backdrop-filter: blur(16px);
  }
  .time-center__mobile-nav button {
    min-width: 0;
    min-height: 35px;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #8592a6;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }
  .time-center__mobile-nav button span { display: grid; place-items: center; color: currentColor; }
  .time-center__mobile-nav button strong { font-size: .52rem; font-weight: 650; }
  .time-center__mobile-nav button[aria-pressed="true"] {
    border-color: rgba(139,132,255,.34);
    color: #f4f2ff;
    background: linear-gradient(145deg,rgba(126,112,255,.28),rgba(87,213,223,.09));
    box-shadow: inset 0 1px rgba(255,255,255,.08);
  }
  .time-center [data-time-mobile-panel] { display: none !important; }
  .time-center[data-time-mobile-active="focus"] [data-time-mobile-panel="focus"] { display: grid !important; }
  .time-center[data-time-mobile-active="focus"] .time-tool-card--study { display: flex !important; }
  .time-center[data-time-mobile-active="tools"] [data-time-mobile-panel="tools"] { display: grid !important; }
  .time-center[data-time-mobile-active="alerts"] [data-time-mobile-panel="alerts"] { display: grid !important; }
  .time-access-card { min-height: 74px; padding: 11px 12px 17px; grid-template-columns: 37px minmax(0,1fr) auto; gap: 9px; border-radius: 14px; }
  .time-access-card__icon { width: 37px; height: 37px; border-radius: 11px; }
  .time-access-card > div:nth-child(2) strong { font-size: .72rem; }
  .time-access-card > div:nth-child(2) small { font-size: .47rem; }
  .time-access-card__value { min-width: 40px; font-size: 1rem; }
  .time-center__tools { display: contents; }
  .time-tool-card--study { grid-column: auto; }
  .time-tool-card { min-height: 0; padding: 12px; border-radius: 14px; }
  .time-tool-card--timer,
  .time-tool-card--stopwatch { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .time-tool-card--timer > header,
  .time-tool-card--stopwatch > header { grid-column: 1 / -1; }
  .time-display { min-height: 64px; padding: 8px; font-size: 1.25rem; }
  .time-control-row { min-width: 125px; grid-template-columns: 1fr; }
  .time-control-row button { min-height: 29px; padding: 5px 8px; }
  .time-timer-form { grid-column: 1 / -1; }
  .time-alarms-card { padding: 12px; border-radius: 14px; }
  .time-alarm-list { grid-template-columns: 1fr; }
  .time-alarm-form { grid-template-columns: 1fr; }
  .time-alarm-form button { grid-column: auto; }
  .time-notification-status { grid-template-columns: 28px minmax(0,1fr); }
  .time-notification-status button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-time-center.is-active .desktop-time-center__clock { animation: none; }
}