:root{
    --bg:#f6f6f4;
    --surface:#ffffff;
    --line:#e2e2dd;
    --line-strong:#d2d2cb;
    --text:#1a1c1f;
    --muted:#71757c;
    --primary:#1a1c1f;
    --run:#0f7a4d;
    --run-bg:#f0f9f4;
    --danger:#b3261e;
    --radius:12px;
    --shadow:0 1px 2px rgba(20,22,26,.05), 0 4px 14px rgba(20,22,26,.05);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{background:var(--bg)}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px;line-height:1.45;min-height:100vh;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .wrap{max-width:640px;margin:0 auto;padding:22px 16px 40px}
  button{font-family:inherit;font-size:16px;border:none;cursor:pointer;border-radius:var(--radius)}
  input[type=text],input[type=password]{
    width:100%;background:var(--surface);border:1px solid var(--line-strong);color:var(--text);
    padding:13px 14px;border-radius:var(--radius);font-size:16px;outline:none;
  }
  input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,28,31,.07)}
  input::placeholder{color:#a3a7ae}

  /* ---- Login ---- */
  #login{max-width:360px;margin:14vh auto;padding:0 16px;text-align:center}
  #login .mark{width:52px;height:52px;margin:0 auto 18px}
  #login h1{font-size:20px;font-weight:600;margin:0 0 4px}
  #login p{color:var(--muted);font-size:14px;margin:0 0 24px}
  #login form{display:flex;flex-direction:column;gap:10px}
  .btn-primary{background:var(--primary);color:#fff;font-weight:600;padding:14px}
  .btn-primary:active{opacity:.85}
  .btn-primary[disabled]{opacity:.5;cursor:default}

  /* ---- Kopf ---- */
  header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
  h1.title{font-size:19px;font-weight:600;letter-spacing:.2px;margin:0}
  .sum{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

  form.add{display:flex;gap:8px;margin-bottom:20px}
  form.add input{flex:1;min-width:0}
  form.add button{background:var(--primary);color:#fff;font-weight:600;padding:0 20px;flex:0 0 auto}

  /* ---- Liste ---- */
  ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
     box-shadow:var(--shadow);padding:14px 14px 10px;transition:border-color .15s,background .15s}
  li.running{border-color:#bfe3d0;background:var(--run-bg)}
  .row{display:flex;align-items:center;gap:12px}
  .info{flex:1;min-width:0}
  .name{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .time{font-size:27px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:.5px;margin-top:1px}
  li.running .time{color:var(--run);font-weight:400}
  .sub{font-size:12px;color:var(--muted);margin-top:1px}
  .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--run);
       margin-right:5px;vertical-align:1px;animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

  .toggle{width:84px;height:54px;flex:0 0 auto;font-weight:600;font-size:13px;letter-spacing:.8px;
          background:var(--primary);color:#fff}
  li.running .toggle{background:var(--run)}
  .toggle:active{opacity:.85}
  .toggle[disabled]{opacity:.45;cursor:default}

  .tools{display:flex;gap:16px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
  li.running .tools{border-top-color:#d8ebe0}
  .tools button{background:none;color:var(--muted);font-size:13px;padding:3px 0}
  .tools button:active{color:var(--text)}
  .tools .del{color:var(--danger)}

  .empty{color:var(--muted);text-align:center;padding:54px 20px;font-size:15px}

  footer{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
         margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
  footer button, footer a{background:none;color:var(--muted);font-size:13px;
         text-decoration:underline;padding:4px;font-family:inherit;font-size:13px}
  footer a{color:var(--muted)}

  /* ---- Statusleiste ---- */
  #banner{position:fixed;left:0;right:0;bottom:0;padding:12px 16px;
          padding-bottom:calc(12px + env(safe-area-inset-bottom));
          background:var(--danger);color:#fff;font-size:14px;text-align:center;display:none;z-index:20}
  #banner.show{display:block}
  [hidden]{display:none !important}