:root{
    --bg:#f7f5f2;
    --card:#ffffff;
    --border:rgba(17,24,39,0.12);
    --text:#111827;
    --muted:rgba(17,24,39,0.58);
    --accent:#0f766e;
    --accent-soft:#14b8a6;
    --panel: rgba(17,24,39,0.04);
    --panel-2: rgba(17,24,39,0.06);
    --ink: var(--text);
    --lav: rgba(171, 140, 255, .95);
    --lav-soft: rgba(171, 140, 255, .32);
  }
  
  html, body{
    height:100%;
    margin:0;
    overflow:hidden;
  }
  
  body{
    margin:0;
    background:
      radial-gradient(circle at 50% 30%, rgba(20,184,166,0.12) 0%, rgba(20,184,166,0.00) 48%),
      radial-gradient(circle at 50% 70%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.00) 60%),
      linear-gradient(180deg, #fbfaf8 0%, var(--bg) 100%);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
  }
  
  .card{
    width:min(760px, 100%);
    background: var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:36px;
    box-shadow: 0 22px 60px rgba(17,24,39,0.12);
    max-height: calc(100vh - 48px);
    overflow: auto;
  }
  
  h1{
    margin:0 0 8px 0;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing:-0.02em;
  }
  
  .sub{
    margin:0 0 26px 0;
    color: var(--muted);
    max-width: 60ch;
  }
  
  .spinner-stage{
    position:relative;
    height:420px;
    overflow:hidden;
    display:grid;
    place-items:center;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 18%,
      black 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 18%,
      black 82%,
      transparent 100%
    );
  }
  
  .active-mark{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:min(560px, 100%);
    height:64px;
    border-radius:999px;
    background: radial-gradient(circle at center,
      rgba(20,184,166,0.22) 0%,
      rgba(20,184,166,0.10) 40%,
      rgba(20,184,166,0.00) 72%
    );
    filter: blur(1px);
    pointer-events:none;
    z-index:2;
  }
  
  .spinner-list{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    will-change: transform;
    z-index:3;
  }
  
  .item{
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:800;
    letter-spacing:0.03em;
    padding:0 14px;
    text-align:center;
    opacity: var(--o, 0.45);
    transform: scale(var(--s, 0.95));
    filter: blur(var(--b, 0px));
    will-change: transform, opacity, filter;
    transition:none;
    color: rgba(17,24,39,0.75);
    text-shadow: none;
  }
  
  .controls{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:18px;
    align-items:center;
  }
  
  button{
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    color:#ffffff;
    font-weight:700;
    border:none;
    border-radius:999px;
    padding:14px 24px;
    cursor:pointer;
    box-shadow: 0 10px 26px rgba(15,118,110,0.22);
    transition: all 0.2s ease;
  }
  
  button:hover{
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 14px 34px rgba(15,118,110,0.28);
  }
  
  button:active{
    transform: translateY(0px) scale(.99);
  }
  
  button:disabled{
    opacity:0.65;
    cursor:not-allowed;
    transform:none;
  }
  
  .btn-outline{
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
  }
  
  .btn-outline:hover{
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 14px 34px rgba(17,24,39,0.12);
  }
  
  .meds-toggle{
    margin-top:16px;
  }
  
  .meds-toggle > summary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-weight:900;
    letter-spacing:-0.01em;
    color: var(--text);
  }
  
  .meds-toggle > summary::-webkit-details-marker{
    display:none;
  }
  
  .meds-summary-hint{
    font-weight:800;
    color: rgba(17,24,39,0.45);
    font-size:12px;
    letter-spacing:0.10em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  
  textarea{
    width:100%;
    margin-top:12px;
    padding:14px 14px;
    border-radius:18px;
    border:1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    resize:vertical;
    min-height:140px;
    line-height:1.35;
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
    box-sizing: border-box;
  }
  
  textarea::placeholder{
    color: rgba(17,24,39,0.35);
  }
  
  .hint{
    margin-top:10px;
    color: rgba(17,24,39,0.55);
    font-size:12px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .hidden{
    display:none !important;
  }
  
  .timer-page{
    width: min(860px, 100%);
    display:grid;
    gap:18px;
    justify-items:center;
  }
  
  .timer-top{
    text-align:center;
    display:grid;
    gap:6px;
    margin-top: 8px;
  }
  
  .timer-label{
    letter-spacing:.18em;
    font-size:12px;
    color: var(--muted);
    font-weight:800;
  }
  
  .timer-topic{
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 850;
    letter-spacing: -0.02em;
  }
  
  .ringWrap{
    position:relative;
    width:min(560px, 86vw);
    aspect-ratio: 1 / 1;
    display:grid;
    place-items:center;
    margin-top: 8px;
  }
  
  .ring{
    width:100%;
    height:100%;
    transform: rotate(-90deg);
  }
  
  .ringTrack{
    fill:none;
    stroke: rgba(17,24,39,0.10);
    stroke-width: 8;
    stroke-linecap: round;
  }
  
  .ringProg{
    fill:none;
    stroke: var(--lav);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 578;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 80ms linear;
  }
  
  .timeText{
    position:absolute;
    font-size: clamp(58px, 7vw, 96px);
    font-weight: 900;
    color: var(--text);
    line-height:1;
  }
  
  .timerControls{
    display:grid;
    grid-template-columns: auto auto;
    justify-content:center;
    align-items:center;
    gap:14px;
  }
  
  .iconBtn{
    width:46px;
    height:46px;
    border-radius:999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 18px;
    display:grid;
    place-items:center;
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
    cursor:pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    padding:0;
  }
  
  .iconBtn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(17,24,39,0.12);
  }
  
  .mainBtn{
    height:46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(171, 140, 255, .55);
    background: var(--lav-soft);
    color: var(--text);
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(17,24,39,0.10);
    cursor:pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  
  .mainBtn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(17,24,39,0.12);
  }
  
  .backRow{
    width:100%;
    display:flex;
    justify-content:flex-start;
  }