/* ═══ PRACTICE TIMER ═══ */
  .timer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:var(--bg2);
    border:0.5px solid var(--border);
    border-radius:16px;
    padding:16px 18px;
    transition:border-color 0.3s;
  }
  .timer.running { border-color:rgba(239,123,46,0.34); }
  .timer.paused  { border-color:rgba(217,164,65,0.28); }
  .timer.over    { border-color:rgba(239,123,46,0.5); }

  .timer-face { display:flex; flex-direction:column; gap:3px; }
  .timer-label {
    font-size:9px; letter-spacing:0.26em; text-transform:uppercase;
    color:var(--gold-dim);
  }
  .timer-val {
    font-family:'Forum', serif;
    font-size:30px;
    line-height:1;
    color:var(--cream);
    font-variant-numeric:tabular-nums;
  }
  .timer.running .timer-val,
  .timer.over    .timer-val { color:var(--orange); }

  .timer-ctrl { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .t-btn {
    font-family:'Jost', sans-serif;
    font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    padding:10px 14px;
    border-radius:11px;
    border:0.5px solid rgba(239,123,46,0.4);
    background:rgba(239,123,46,0.1);
    color:var(--orange);
    cursor:pointer;
    transition:all 0.18s;
    white-space:nowrap;
  }
  .t-btn:hover { background:rgba(239,123,46,0.18); }
  .t-btn.ghost {
    border-color:var(--border2);
    background:transparent;
    color:var(--muted);
  }
  .t-btn.ghost:hover { color:var(--cream-dim); }

  /* timer finish screen */
  .ts-actions {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    width:min(255px, 70vw);
    margin:0 auto;
  }
  .ts-actions .qs-btn {
    width:100%;
    padding:15px 16px 15px calc(16px + 0.24em);
  }
  .qs-btn.alt {
    background:transparent;
    border:0.5px solid rgba(239,123,46,0.45);
    color:var(--orange);
  }
  .qs-btn.alt:hover {
    background:rgba(239,123,46,0.1);
    transform:translateY(-1px);
  }

  .timer-splash .qs-inner { margin-bottom:6vh; }
  .ts-ring {
    display:flex; justify-content:center;
    color:var(--orange);
    margin:6px 0 22px;
    filter:drop-shadow(0 0 14px rgba(239,123,46,0.4));
  }
  .ts-ring svg { display:block; }
  .ts-title {
    font-family:'Forum', serif;
    font-size:23px;
    color:var(--cream);
    line-height:1.35;
    margin-bottom:14px;
  }
  .ts-text {
    font-size:12px;
    color:var(--cream-dim);
    line-height:1.75;
    margin-bottom:38px;
  }


  .lightbox {
    position:fixed; inset:0; z-index:100;
    background:rgba(10,9,7,0.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:none;
    align-items:center; justify-content:center;
    padding:20px;
    animation:lbIn 0.25s ease both;
  }
  .lightbox.open { display:flex; }
  @keyframes lbIn { from { opacity:0; } to { opacity:1; } }

  .lightbox img {
    max-width:100%; max-height:82vh;
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    background:#fff;
    animation:lbImgIn 0.3s cubic-bezier(.3,1.2,.4,1) both;
  }
  @keyframes lbImgIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }

  .lightbox-close {
    position:absolute; top:24px; right:20px;
    width:40px; height:40px;
    border:0.5px solid rgba(240,232,216,0.25);
    border-radius:50%;
    background:rgba(24,23,20,0.8);
    color:var(--cream);
    font-size:16px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:all 0.2s;
  }
  .lightbox-close:hover { border-color:var(--gold); color:var(--gold); }

  .lightbox-hint {
    position:absolute; bottom:28px; left:0; right:0;
    text-align:center;
    font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--muted);
    pointer-events:none;
  }