:root{
    --bg:#0f1c17; --surface:#16261f; --surface-2:#1c2e26;
    --text:#e4ede7; --text-dim:#8da99a;
    --accent:#6fae84; --accent-soft:rgba(111,174,132,.16);
    --ring-track:#223830; --border:#26382f;
    --danger:#b2776a;
    --radius:14px;
    color-scheme: dark;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#eef3ec; --surface:#ffffff; --surface-2:#f5f8f3;
      --text:#1f2e26; --text-dim:#6c8578;
      --accent:#4f8a68; --accent-soft:rgba(79,138,104,.12);
      --ring-track:#dce6dd; --border:#dce6dd;
      --danger:#9a5444;
      color-scheme: light;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0f1c17; --surface:#16261f; --text:#e4ede7; --text-dim:#8da99a;
    --accent:#6fae84; --ring-track:#223830; --border:#26382f; color-scheme: dark;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    min-height:100%; display:flex; flex-direction:column; align-items:center;
    padding:32px 20px 48px;
    transition:background .3s ease,color .3s ease;
  }
  .topbar{
    align-self:stretch; width:auto; max-width:none;
    background:var(--surface); background:var(--header, color-mix(in srgb, var(--accent) 24%, var(--bg))); color:var(--text);
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    margin:-32px -20px 28px; padding:24px 28px;
    border-bottom:2px solid var(--border);
    transition:background .3s ease, border-color .3s ease;
  }
  .topbar .mark{ font-size:1.45rem; letter-spacing:.015em; }
  .donate-btn{
    background:none; color:var(--accent); border:1px solid var(--accent); border-radius:999px;
    padding:7px 16px; font-family:inherit; font-size:.82rem; font-weight:500; cursor:pointer; text-decoration:none;
    transition:background .2s, color .2s;
  }
  .donate-btn:hover{ background:var(--accent-soft); }

  footer{
    width:100%; max-width:420px; margin-top:40px; padding-top:20px; border-top:1px solid var(--border);
    display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  }
  footer{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
  footer a{ color:var(--text-dim); font-size:.78rem; text-decoration:none; }
  footer a:hover{ color:var(--accent); }
  .mark{ font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:1.25rem; letter-spacing:.01em; }
  .mark{ min-width:0; line-height:1.2; }
  .mark-domain{ display:block; font-size:.72rem; font-weight:400; letter-spacing:.02em; color:var(--text-dim); margin-top:2px; }
  .mark em{ font-style:italic; color:var(--accent); }
  .icon-btn{
    background:none; border:1px solid var(--border); color:var(--text-dim);
    width:40px; height:40px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    transition:border-color .2s, color .2s, transform .2s;
  }
  .icon-btn:hover{ color:var(--text); border-color:var(--accent); }
  .icon-btn:active{ transform:scale(.94); }

  .tabs{ width:100%; max-width:420px; display:flex; gap:8px; margin-bottom:28px; }
  .tab-btn{
    flex:1; background:none; border:1px solid var(--border); color:var(--text-dim);
    border-radius:10px; padding:9px 6px; font-family:inherit; font-size:.82rem; cursor:pointer;
    transition:border-color .2s, color .2s, background .2s;
  }
  .tab-btn.active{ border-color:var(--accent); color:var(--text); background:var(--accent-soft); }

  main, .tab-panel{ width:100%; max-width:420px; display:none; flex-direction:column; align-items:center; }
  .tab-panel.active{ display:flex; }

  .breath-wrap{ position:relative; width:min(70vw,260px); height:min(70vw,260px); margin:12px 0 28px; display:flex; align-items:center; justify-content:center; }
  .breath-circle{
    width:46%; height:46%; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent);
    display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;
    transition:width 1s ease-in-out, height 1s ease-in-out;
  }
  .breath-circle span{ font-size:.85rem; color:var(--text); }
  .cycle-count{ font-size:.78rem; color:var(--text-dim); margin-top:14px; }

  .reflect-card{
    width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:32px 24px; text-align:center; margin:12px 0 24px; min-height:110px; display:flex; align-items:center; justify-content:center;
  }
  .reflect-card p{ font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:1.15rem; line-height:1.5; margin:0; }
  .reflect-btn{
    background:var(--accent); color:var(--bg); border:none; border-radius:10px; padding:12px 26px;
    font-family:inherit; font-size:.88rem; font-weight:500; cursor:pointer; transition:transform .15s;
  }
  .reflect-btn:active{ transform:scale(.96); }

  .ring-wrap{ position:relative; width:min(78vw,300px); height:min(78vw,300px); margin:12px 0 28px; }
  svg{ width:100%; height:100%; transform:rotate(-90deg); }
  circle.track{ fill:none; stroke:var(--ring-track); stroke-width:6; }
  circle.progress{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .25s linear; }
  .ring-center{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  }
  .time{ font-family:'Inter',system-ui,sans-serif; font-weight:300; font-size:3rem; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
  .phase{ font-size:.8rem; color:var(--text-dim); letter-spacing:.04em; min-height:1.1em; }

  .duration-row{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:.9rem; margin-bottom:26px; }
  select{
    appearance:none; background:var(--surface); color:var(--text); border:1px solid var(--border);
    border-radius:10px; padding:9px 34px 9px 14px; font-family:inherit; font-size:.9rem; cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
    background-position:calc(100% - 16px) center, calc(100% - 11px) center; background-size:5px 5px; background-repeat:no-repeat;
  }
  select:disabled{ opacity:.5; cursor:not-allowed; }

  .settings-btn{
    background:var(--surface); color:var(--text-dim); border:1px solid var(--border);
    border-radius:10px; padding:10px 20px; font-family:inherit; font-size:.85rem; cursor:pointer;
    margin-bottom:26px; transition:border-color .2s, color .2s;
  }
  .settings-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 16px; margin-bottom:26px; }
  .settings-row .settings-btn{ margin-bottom:0; }
  .theme-group{ display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:.85rem; }
  .settings-btn:hover{ color:var(--text); border-color:var(--accent); }

  .controls{ display:flex; align-items:center; gap:18px; }
  .btn{
    border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center;
  }
  .play-btn{
    width:76px; height:76px; border-radius:50%; background:var(--accent); color:var(--bg);
    font-size:1.6rem; box-shadow:0 6px 24px var(--accent-soft); transition:transform .15s;
  }
  .play-btn:active{ transform:scale(.93); }
  .reset-btn{
    width:52px; height:52px; border-radius:50%; background:var(--surface); color:var(--text-dim);
    border:1px solid var(--border); font-size:1.1rem; transition:color .2s, transform .15s;
  }
  .reset-btn:hover{ color:var(--text); }
  .reset-btn:active{ transform:scale(.93); }

  /* Settings panel */
  .backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .backdrop.open{ opacity:1; pointer-events:auto; }
  .panel{
    position:fixed; top:0; right:0; height:100%; width:min(360px,90vw); background:var(--surface);
    border-left:1px solid var(--border); transform:translateX(100%); transition:transform .3s ease;
    padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px));
    padding-top:calc(24px + env(safe-area-inset-top,0px));
    overflow-y:auto;
  }
  .panel.open{ transform:translateX(0); }
  .panel h2{ font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:1.3rem; margin:0 0 20px; }
  .panel-close{ position:absolute; top:20px; right:20px; }
  .field-group{ margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--border); }
  .field-group:last-of-type{ border-bottom:none; }
  .row-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .row-label span{ font-size:.92rem; }
  .row-note{ font-size:.78rem; color:var(--text-dim); margin:-8px 0 12px; line-height:1.4; }

  .switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
  .switch input{ opacity:0; width:100%; height:100%; margin:0; cursor:pointer; position:absolute; z-index:1; }
  .slider{
    position:absolute; inset:0; background:var(--ring-track); border-radius:999px; transition:background .2s;
  }
  .slider::before{
    content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--text);
    border-radius:50%; transition:transform .2s;
  }
  .switch input:checked + .slider{ background:var(--accent); }
  .switch input:checked + .slider::before{ transform:translateX(18px); background:var(--bg); }

  .mode-toggle{ display:flex; gap:8px; margin-bottom:14px; }
  .mode-toggle button{
    flex:1; padding:8px 10px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2,var(--surface));
    color:var(--text-dim); font-size:.82rem; cursor:pointer;
  }
  .mode-toggle button.active{ border-color:var(--accent); color:var(--text); background:var(--accent-soft); }

  .inline-row{ display:flex; align-items:center; gap:10px; }
  .inline-row select{ flex:1; }

  .chip-input{ display:flex; gap:8px; margin-top:4px; }
  .chip-input input{
    flex:1; background:var(--bg); border:1px solid var(--border); border-radius:9px; color:var(--text);
    padding:8px 10px; font-family:inherit; font-size:.85rem; min-width:0;
  }
  .chip-input button{
    border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); border-radius:9px; padding:8px 14px; font-size:.85rem; cursor:pointer;
  }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .chip{
    display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:999px;
    padding:5px 6px 5px 12px; font-size:.8rem; color:var(--text-dim);
  }
  .chip button{ background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:.95rem; padding:2px 6px; }
  .chip button:hover{ color:var(--danger); }
  .empty-note{ font-size:.78rem; color:var(--text-dim); font-style:italic; }

  .small-btn{
    border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); border-radius:10px;
    padding:9px 16px; min-height:44px; font-family:inherit; font-size:.85rem; cursor:pointer; flex-shrink:0;
  }
  .credits{ font-size:.72rem; color:var(--text-dim); line-height:1.5; margin:8px 0 0; }
  .sub-disabled{ opacity:.4; pointer-events:none; }

  /* ---------- Mobile ---------- */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  button, select, input, label{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  body{
    padding-left:max(20px, env(safe-area-inset-left, 0px));
    padding-right:max(20px, env(safe-area-inset-right, 0px));
  }
  .topbar{
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left, 0px)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right, 0px)));
  }
  .tab-btn, .settings-btn, select{ min-height:44px; }
  .icon-btn{ min-width:44px; min-height:44px; }
  .chip button{ min-width:32px; min-height:32px; }
  @media (max-width:600px){
    body{ padding-top:24px; padding-bottom:36px; }
    .topbar{ margin-top:-24px; margin-bottom:22px; padding:16px 20px; }
    .topbar .mark{ font-size:1.2rem; }
    /* 16px+ prevents iOS Safari from zooming when a field is focused */
    select, input, textarea{ font-size:16px !important; }
    .time{ font-size:2.6rem; }
    .ring-wrap{ margin:4px 0 22px; }
    .settings-row{ flex-direction:column; gap:12px; width:100%; }
    .settings-row .settings-btn{ width:100%; }
    .theme-group{ width:100%; justify-content:space-between; }
    .theme-group select{ flex:1; max-width:60%; }
    .panel{ width:100%; border-left:none; }
    .panel-close{ top:calc(14px + env(safe-area-inset-top, 0px)); }
    .chip-input input{ padding:11px 12px; }
    .chip-input button{ padding:11px 16px; }
    footer{ margin-top:28px; }
  }
  @media (max-width:360px){
    .tab-btn{ font-size:.78rem; padding:9px 2px; }
    .controls{ gap:14px; }
  }
  @media (max-height:520px) and (orientation:landscape){
    .ring-wrap{ width:min(40vh,220px); height:min(40vh,220px); margin-bottom:14px; }
    .breath-wrap{ width:min(40vh,200px); height:min(40vh,200px); }
  }

  /* ---------- Info pages (About / Privacy / Terms) ---------- */
  body.info-open nav.tabs, body.info-open .tab-panel{ display:none !important; }
  .info-view{ display:none; width:100%; max-width:560px; text-align:left; }
  body.info-open .info-view{ display:block; }
  .info-view article{ display:none; }
  .info-view article.show{ display:block; }
  .info-view .back-link{ display:inline-block; color:var(--accent); font-size:.85rem; text-decoration:none; margin:4px 0 18px; padding:8px 0; }
  .info-view .back-link:hover{ text-decoration:underline; }
  .info-view h1{ font-size:1.6rem; font-weight:500; margin:0 0 6px; letter-spacing:.005em; }
  .info-view .updated{ font-size:.78rem; color:var(--text-dim); margin:0 0 22px; }
  .info-view h2{ font-size:1.05rem; font-weight:600; margin:28px 0 8px; }
  .info-view p, .info-view li{ font-size:.92rem; line-height:1.65; color:var(--text); }
  .info-view p{ margin:0 0 12px; }
  .info-view ul{ margin:0 0 12px; padding-left:20px; }
  .info-view li{ margin-bottom:6px; }
  .info-view a{ color:var(--accent); }
  .info-view .lead{ font-size:1.02rem; color:var(--text); }
  .credit{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin:0 0 10px; }
  .credit h3{ font-size:.95rem; font-weight:600; margin:0 0 6px; }
  .credit p{ font-size:.85rem; margin:0 0 4px; color:var(--text-dim); line-height:1.55; }
  .credit p:last-child{ margin-bottom:0; }
  .badge{ display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.04em; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:2px 9px; margin-left:6px; vertical-align:middle; }
  .note-box{ background:var(--accent-soft); border-radius:12px; padding:12px 16px; font-size:.86rem; line-height:1.6; margin:0 0 14px; }
  /* ---------- Quick wins: access, inputs, volume ---------- */
  [hidden]{ display:none !important; }
  .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
  .panel{ visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s; }
  .panel.open{ visibility:visible; transition:transform .3s ease, visibility 0s; }
  .num-input{
    width:96px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px;
    padding:9px 12px; min-height:44px; font-family:inherit; font-size:.9rem;
  }
  #customLenRow{ margin-top:-12px; }
  .len-note{ font-size:.78rem; color:var(--text-dim); margin:-14px 0 22px; text-align:center; max-width:300px; line-height:1.5; }
  input[type=range]{ width:100%; min-height:32px; accent-color:var(--accent); cursor:pointer; }
  .shortcut-hint{ font-size:.74rem; color:var(--text-dim); margin:22px 0 0; text-align:center; }
  @media (hover:none){ .shortcut-hint{ display:none; } }

  /* ---------- Theme gear menu ---------- */
  .top-actions{ display:flex; align-items:center; gap:10px; }
  .theme-menu{ position:relative; }
  .theme-pop{
    position:absolute; top:calc(100% + 10px); right:0; z-index:30; min-width:230px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:8px;
  }
  .theme-pop label{ font-size:.8rem; color:var(--text-dim); }
  .theme-pop select{ width:100%; }
  /* ---------- Session length + Bell Settings row ---------- */
  .options-row{ display:flex; align-items:flex-end; justify-content:center; gap:12px; width:100%; max-width:420px; margin-bottom:26px; }
  .options-row .len-field{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
  .options-row .len-field label{ font-size:.72rem; color:var(--text-dim); letter-spacing:.04em; padding-left:2px; }
  .options-row select{ width:100%; min-width:0; text-overflow:ellipsis; }
  .options-row .settings-btn{ flex:1; min-width:0; margin-bottom:0; min-height:44px; white-space:nowrap; }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }
  .mark a{ color:inherit; text-decoration:none; }