:root{
    --bg:#F4F2EC;
    --surface:#FFFFFF;
    --surface-2:#ECE9E1;
    --border:#DEDAD0;
    --ink:#1D2126;
    --muted:#767267;
    --muted-2:#9B9789;
    --accent:#B4791F;
    --accent-ink:#FFFFFF;
    --danger:#B4432E;
    --good:#4C7A5A;
    --dial-face: transparent;
    --dial-ring:#1D2126;
    --shadow: 0 1px 2px rgba(29,33,38,0.06), 0 8px 24px -12px rgba(29,33,38,0.18);
    --shadow-lg: 0 10px 40px -12px rgba(29,33,38,0.28);
    --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  }
  [data-theme="dark"]{
    --bg:#14171B;
    --surface:#1C2026;
    --surface-2:#20242B;
    --border:#2C313A;
    --ink:#EDEEF0;
    --muted:#8A8F98;
    --muted-2:#5F636C;
    --accent:#E3A94C;
    --accent-ink:#14171B;
    --danger:#E17361;
    --good:#7FBE97;
    --dial-face: transparent;
    --dial-ring:#EDEEF0;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6);
    --shadow-lg: 0 20px 60px -14px rgba(0,0,0,0.7);
  }
  [data-theme="oled"]{
    --bg:#000000;
    --surface:#0A0A0A;
    --surface-2:#121212;
    --border:#222222;
    --ink:#F5F5F5;
    --muted:#8A8A8A;
    --muted-2:#555555;
    --accent:#E3A94C;
    --accent-ink:#000000;
    --danger:#E17361;
    --good:#7FBE97;
    --dial-face: transparent;
    --dial-ring:#F5F5F5;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 12px 32px -16px rgba(0,0,0,0.9);
    --shadow-lg: 0 20px 60px -14px rgba(0,0,0,0.95);
  }
  [data-theme="gradient"]{
    --bg:#1a1035;
    --surface:#241546;
    --surface-2:#2c1a56;
    --border:#3d2570;
    --ink:#F3EFFF;
    --muted:#B3A3E0;
    --muted-2:#8672C2;
    --accent:#FF7AC6;
    --accent-ink:#1a1035;
    --danger:#FF6B6B;
    --good:#6EE7B7;
    --dial-face: transparent;
    --dial-ring:#F3EFFF;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6);
    --shadow-lg: 0 20px 60px -14px rgba(0,0,0,0.7);
  }
  body[data-theme="gradient"]{
    background: linear-gradient(160deg, #1a1035 0%, #2c1a56 50%, #3d1f6b 100%);
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    transition: background .35s ease, color .35s ease;
    min-height:100vh;
  }
  ::selection{ background: var(--accent); color: var(--accent-ink); }

  /* ---------- Custom scrollbars (everywhere, instead of native) ---------- */
  *{
    scrollbar-width: thin;
    scrollbar-color: var(--muted-2) transparent;
  }
  ::-webkit-scrollbar{ width:7px; height:7px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background-color: var(--muted-2);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background-color: var(--accent); background-clip: content-box; }
  ::-webkit-scrollbar-corner{ background:transparent; }
  button{ font-family:inherit; }
  input{ font-family:inherit; }

.app{
  max-width:1100px;
  margin:0 auto;
  padding: 26px 40px 140px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding: 0 32px;
  box-sizing:border-box;
}

  /* ---------- Header ---------- */
  .topbar{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap:16px;
  }
  .topbar-center{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    justify-self:center;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:9px;
    justify-self:start;
  }
  .brand .mark{
    width:9px;height:9px;border-radius:50%;
    background: var(--accent);
    display:inline-block;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    flex:none;
    transition: background .3s ease;
  }
  .brand h1{
    font-size: 15.5px;
    letter-spacing: 0.01em;
    margin:0;
    font-weight:650;
  }
  .brand .sub{
    font-size:10px;
    color:var(--muted);
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .info-mini-btn{
    width:16px;height:16px;
    border-radius:50%;
    border:1px solid var(--border);
    background:transparent;
    color:var(--muted-2);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    flex:none;
    transition: border-color .2s ease, color .2s ease;
  }
  .info-mini-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .info-mini-btn svg{ width:10px; height:10px; }

  .header-right{
    display:flex;
    align-items:center;
    gap:10px;
    justify-self:end;
  }

  .tabs{
    display:flex;
    gap:2px;
    background:var(--surface-2);
    border:1px solid var(--border);
    padding:3px;
    border-radius: 999px;
  }
  .tab{
    border:none;
    background:transparent;
    color:var(--muted);
    padding:8px 16px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:650;
    letter-spacing:0.01em;
    cursor:pointer;
    transition: background .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .tab.active{
    background:var(--surface);
    color:var(--ink);
    box-shadow: var(--shadow);
  }

  .icon-btn{
    width:34px;height:34px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition: border-color .2s ease, transform .12s ease, background .2s ease;
    flex:none;
  }
  .icon-btn:hover{ border-color: var(--muted-2); }
  .icon-btn:active{ transform: scale(0.94); }
  .icon-btn svg{ width:16px;height:16px; }

  /* ---------- View shell (immersive, no card behind) ---------- */
  .view{ display:none; flex:1; }
  .view.active{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    animation: fade .3s ease;
    text-align:center;
    padding-top: 4vh;
  }
  @keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  .display-toggle{
    display:none;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:999px;
    padding:3px;
  }
  .display-toggle.visible{ display:flex; }
  .display-toggle button{
    border:none;background:transparent;
    color:var(--muted);
    font-size:10.5px;
    font-weight:700;
    padding:5px 13px;
    border-radius:999px;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .display-toggle button.active{
    background:var(--surface);
    color:var(--ink);
    box-shadow: var(--shadow);
  }

  /* ---------- Stopwatch: the immersive number ---------- */
  .readout{
    padding: 14px 0 6px;
  }
  .readout .time{
    font-family:var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(64px, 15vw, 148px);
    font-weight:600;
    letter-spacing: -0.015em;
    line-height:1;
    color:var(--ink);
  }
  .readout .time .ms{
    font-size: 0.32em;
    color: var(--muted);
    font-weight:600;
    margin-left:4px;
  }
  .readout .state-label{
    margin-top:14px;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--muted-2);
  }
  .readout .state-label.running{ color: var(--good); }

  /* ---------- Analog dial (large, no plate behind) ---------- */
  .dial-wrap{
    display:flex;
    justify-content:center;
    padding: 4px 0 10px;
  }
  .dial-wrap svg{ width: min(340px, 68vw); height: min(340px, 68vw); }

  /* ---------- Floating control dock (fixed, premium) ---------- */
  .dock{
    position:fixed;
    left:50%;
    bottom: 26px;
    transform: translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border:1px solid var(--border);
    box-shadow: var(--shadow-lg);
    border-radius: 999px;
    padding: 8px;
    z-index: 40;
  }
  .dock .btn{ margin:0; }

  .btn{
    border:none;
    cursor:pointer;
    font-weight:650;
    font-size:14px;
    border-radius: 999px;
    padding: 13px 24px;
    transition: transform .12s ease, filter .15s ease, background .2s ease;
  }
  .btn:active{ transform: scale(0.96); }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ filter:brightness(1.06); }
  .btn-ghost{ background:transparent; color:var(--ink); }
  .btn-ghost:hover{ background: var(--surface-2); }
  .btn-danger{ background:transparent; color:var(--danger); }
  .btn-danger:hover{ background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .btn-icon-only{ padding: 13px 16px; }

  /* ---------- Lap history: in-page, right side, fading list ---------- */
  .laps-panel{
    position:fixed;
    right: 34px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    width: min(220px, 24vw);
    max-height: 62vh;
    display:flex;
    flex-direction:column;
    z-index: 20;
    opacity:0;
    pointer-events:none;
    transition: opacity .3s ease, transform .3s ease;
  }
  .laps-panel.open{
    opacity:1;
    pointer-events:auto;
    transform: translateY(-50%) translateX(0);
  }
  .laps-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding: 0 4px 8px;
    flex:none;
  }
  .laps-panel-head h2{
    font-size:10px;
    margin:0;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted-2);
  }
  .laps-panel-head .count{ font-size:10.5px; color:var(--muted-2); }

  .lap-list{
    flex:1;
    overflow-y:auto;
    list-style:none;
    margin:0;
    padding: 14px 4px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
  }
  .lap-item{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    padding: 9px 2px;
    font-family:var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .lap-item .lap-no{
    color:var(--muted-2);
    font-family:var(--sans);
    font-weight:650;
    font-size:10px;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .lap-item .lap-split{ color:var(--ink); font-size:16px; font-weight:600; margin-top:2px; }
  .lap-item .lap-total{ color:var(--muted); font-size:10.5px; margin-top:1px; }
  .lap-item.best .lap-split{ color: var(--good); }
  .lap-item.worst .lap-split{ color: var(--danger); }

  .empty-hint{
    color:var(--muted-2);
    font-size:13.5px;
    padding: 30px 10px;
  }

  /* ---------- Modal (add timer) ---------- */
  .modal{
    position:fixed;
    inset:0;
    z-index: 70;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease;
    padding: 20px;
  }
  .modal.open{ opacity:1; pointer-events:auto; }
  .modal-card{
    background: var(--surface);
    border:1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 26px 24px;
    width: 100%;
    max-width: 400px;
    transform: translateY(10px) scale(0.98);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .modal.open .modal-card{ transform:none; }
  .modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
  }
  .modal-head h2{ font-size:15px; margin:0; font-weight:700; }

  /* ---------- Settings drawer: vertical panel, right side ---------- */
  .modal-scrim{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.32);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 75;
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease;
  }
  .modal-scrim.open{ opacity:1; pointer-events:auto; }
  .settings-drawer{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width: min(340px, 88vw);
    background: var(--surface);
    border-left:1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 80;
    display:flex;
    flex-direction:column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .settings-drawer.open{ transform:translateX(0); }
  .settings-drawer-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 20px 22px;
    border-bottom:1px solid var(--border);
    flex:none;
  }
  .settings-drawer-head h2{ font-size:15px; margin:0; font-weight:700; }
  .settings-drawer-body{
    flex:1;
    overflow-y:auto;
    padding: 22px;
  }

  .form-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em;
    font-weight:700; color:var(--muted);
  }
  .field input{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:11px 12px;
    color:var(--ink);
    font-size:14.5px;
    outline:none;
    transition: border-color .2s ease;
    width:100%;
  }
  .field input:focus{ border-color: var(--accent); }
  [data-theme="dark"] .field input::-webkit-calendar-picker-indicator{ filter: invert(0.85); }

  .duration-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
  .form-actions{ margin-top:6px; }
  .form-actions .btn{ width:100%; }

  .settings-section{ margin-top:4px; }
  .settings-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em;
    font-weight:700; color:var(--muted); margin-bottom:10px;
  }
  .theme-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .theme-option{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 10px;
    color:var(--ink);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition: border-color .2s ease, transform .15s ease;
  }
  .theme-option:hover{ border-color:var(--muted-2); }
  .theme-option:active{ transform:scale(0.96); }
  .theme-option.active{ border-color:var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .theme-swatch{
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(0,0,0,0.08);
    flex:none;
  }
  .theme-swatch-light{ background:#F4F2EC; }
  .theme-swatch-dark{ background:#14171B; }
  .theme-swatch-oled{ background:#000000; }
  .theme-swatch-gradient{ background:linear-gradient(135deg,#1a1035,#3d1f6b,#FF7AC6); }

  /* ---------- Fab (add new) ---------- */
  .fab{
    position:fixed;
    right: 28px;
    bottom: 26px;
    width:56px; height:56px;
    border-radius:50%;
    background:var(--accent);
    color:var(--accent-ink);
    border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    box-shadow: var(--shadow-lg);
    z-index:40;
    transition: transform .15s ease, filter .15s ease;
  }
  .fab:hover{ filter:brightness(1.06); }
  .fab:active{ transform: scale(0.94); }
  .fab svg{ width:24px; height:24px; }

  /* ---------- Timer item display (unboxed) ---------- */
  .card-scroll{
    width:100%;
    max-width: 620px;
    display:flex;
    flex-direction:column;
    gap: 6px;
  }
  .item-card{
    padding: 22px 6px;
    border-bottom: 1px solid var(--border);
  }
  .item-card:last-child{ border-bottom:none; }
  .item-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:14px;
    text-align:left;
  }
  .item-title{ font-weight:700; font-size:15px; }
  .item-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .item-remove{
    background:transparent; border:none; color:var(--muted-2);
    cursor:pointer; font-size:19px; line-height:1; padding:4px; flex:none;
  }
  .item-remove:hover{ color:var(--danger); }

  .breakdown{
    display:flex;
    gap: 22px;
    justify-content:center;
    padding: 4px 0 2px;
    flex-wrap:wrap;
  }
  .unit{ text-align:center; min-width:52px; }
  .unit .val{
    font-family:var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(30px, 6vw, 44px);
    font-weight:650;
    line-height:1;
  }
  .unit .lab{
    font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em;
    color:var(--muted); font-weight:700; margin-top:6px; display:block;
  }

  .progress-track{
    height:3px; border-radius:3px; background:var(--surface-2);
    overflow:hidden; margin-top:16px; max-width:340px; margin-left:auto; margin-right:auto;
  }
  .progress-fill{ height:100%; background:var(--accent); border-radius:3px; transition: width .3s linear; }

  .item-card.done .unit .val{ color: var(--good); }
  .item-card .status-line{
    text-align:center; font-size:11px; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--good); padding-top:10px; display:none;
  }
  .item-card.done .status-line{ display:block; }

  .item-actions{ display:flex; gap:8px; margin-top:16px; justify-content:center; align-items:center; }
  .item-actions .btn{ padding: 9px 18px; font-size:12.5px; background:var(--surface-2); color:var(--ink); }
  .item-actions .btn.tm-toggle{ background:var(--accent); color:var(--accent-ink); }
  .item-actions .btn:disabled{ opacity:.4; }
  .tm-sound{ color:var(--ink); }
  .tm-sound .icon-off{ display:none; }
  .tm-sound.muted .icon-on{ display:none; }
  .tm-sound.muted .icon-off{ display:block; }
  .tm-sound.muted{ color:var(--muted-2); border-color:var(--border); }

  .mini-dial{ display:flex; justify-content:center; padding:2px 0 8px; }
  .mini-dial svg{ width: min(148px, 46vw); height: min(148px, 46vw); }

  /* ---------- About page: full-page overlay, two-column grid ---------- */
  .about-page{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:100;
    opacity:0;
    pointer-events:none;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
    overflow-y:auto;
  }
  .about-page.open{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .about-scroll{
    max-width:920px;
    margin:0 auto;
    padding: 64px 40px 100px;
    position:relative;
  }
  .about-close{
    position:fixed;
    top:22px;
    right:28px;
    z-index:101;
  }
  .about-content h2{
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--accent);
    font-weight:800;
    margin: 30px 0 10px;
  }
  .about-grid-col > h2:first-child,
  .about-content > h2:first-child{ margin-top:0; }
  .about-content p{ font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 14px; }
  .about-body-text{ font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 14px; }
  .about-content a{ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
  .about-content a:hover{ border-bottom-color:var(--accent); }
  .about-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 44px;
    align-items:start;
  }
  .about-grid-col{ min-width:0; }
  .changelog{ margin-bottom:10px; }
  .changelog-entry{
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-2);
    margin-bottom:10px;
  }
  .changelog-version{
    font-size:11px;
    font-weight:800;
    letter-spacing:0.06em;
    color:var(--accent);
    margin-bottom:8px;
  }
  .changelog-entry ul{ margin:0; padding-left:18px; }
  .changelog-entry li{ font-size:13px; line-height:1.6; color:var(--ink); margin-bottom:4px; }
  .changelog-entry li:last-child{ margin-bottom:0; }
  .about-version-bottom{
    display:flex;
    justify-content:center;
    margin-top:38px;
  }
  .about-version-badge{
    display:inline-flex;
    align-items:center;
    padding: 5px 12px;
    border-radius:999px;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.04em;
  }
  @media (max-width: 780px){
    .about-grid{ grid-template-columns: 1fr; gap:0; }
    .about-scroll{ padding: 54px 22px 90px; }
  }

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce){
    .view.active, .icon-btn, .btn, .progress-fill, .laps-panel, .modal, .modal-card, .settings-drawer, .modal-scrim{ animation:none !important; transition:none !important; }
  }

  /* ---------- Responsive: tablet & mobile ---------- */
  @media (max-width: 900px){
    .app{ padding: 22px 24px 130px; }
  }

  @media (max-width: 720px){
    .app{ padding: 18px 18px 130px; }
    .readout .time{ font-size: clamp(52px, 16vw, 120px); }
  }

  @media (max-width: 640px){
    .topbar{ grid-template-columns:1fr; row-gap:10px; }
    .brand{ justify-self:center; }
    .topbar-center{ justify-self:center; flex-wrap:wrap; row-gap:8px; }
    .header-right{ justify-self:center; }
    .tabs{ width:100%; justify-content:center; }
    .tab{ flex:1; text-align:center; padding:8px 10px; }
    .dock{ width: calc(100% - 24px); justify-content:space-between; bottom:14px; gap:6px; padding:7px; }
    .dock .btn{ flex:1; padding:13px 8px; font-size:13px; }
    .fab{ right:16px; bottom: 88px; width:50px; height:50px; }
    .laps-panel{
      right:0; left:0; top:auto; bottom:92px; transform:translateY(8px);
      width:100%; max-height:36vh; align-items:center; padding:0 18px;
    }
    .laps-panel.open{ transform:translateY(0); }
    .laps-panel-head{ justify-content:center; gap:8px; }
    .lap-list{ width:100%; }
    .lap-item{ align-items:center; text-align:center; }
    .breakdown{ gap:14px; }
    .settings-drawer{ width:100vw; }
    .item-card{ padding: 18px 4px; }
    .item-actions{ flex-wrap:wrap; }
    .modal-card{ padding: 22px 18px; width: calc(100% - 8px); }
    .about-close{ top:14px; right:14px; }
    .about-scroll{ padding: 50px 16px 80px; }
  }

  @media (max-width: 380px){
    .readout .time{ font-size: clamp(40px, 17vw, 90px); }
    .unit{ min-width:44px; }
    .unit .val{ font-size: clamp(24px, 8vw, 36px); }
    .breakdown{ gap:10px; }
    .duration-row{ gap:6px; }
    .dock .btn{ padding:11px 6px; font-size:12px; }
    .icon-btn{ width:32px; height:32px; }
    .item-title{ font-size:13.5px; }
  }