:root{
    --ink:#0b2a3a;
    --ink-soft:#3d5866;
    --sea:#0f4c66;
    --sea-deep:#0a3a4f;
    --sail:#faf7f0;
    --surface:#ffffff;
    --surface-2:#eef3f2;
    --line:#d7ded9;
    --signal:#d9622b;
    --signal-ink:#7a3011;
    --good:#2f7d5c;
    --good-bg:#e3f2ea;
    --warn:#b8811a;
    --warn-bg:#faf0dc;
    --bad:#b23a3a;
    --bad-bg:#fbe6e4;
    --focus:#0f4c66;
    --shadow: 0 1px 2px rgba(11,42,58,.06), 0 4px 14px rgba(11,42,58,.07);
    font-size:15px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#eaf1f0;
      --ink-soft:#a9c0c2;
      --sea:#4fa8c9;
      --sea-deep:#bfe3f2;
      --sail:#0b2530;
      --surface:#102f3b;
      --surface-2:#0d2830;
      --line:#1f4753;
      --signal:#e98a4e;
      --signal-ink:#ffd9bd;
      --good:#6bcf9d;
      --good-bg:#123a2c;
      --warn:#e3b45c;
      --warn-bg:#3a2f10;
      --bad:#e88686;
      --bad-bg:#3a1717;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --ink:#eaf1f0;
    --ink-soft:#a9c0c2;
    --sea:#4fa8c9;
    --sea-deep:#bfe3f2;
    --sail:#0b2530;
    --surface:#102f3b;
    --surface-2:#0d2830;
    --line:#1f4753;
    --signal:#e98a4e;
    --signal-ink:#ffd9bd;
    --good:#6bcf9d;
    --good-bg:#123a2c;
    --warn:#e3b45c;
    --warn-bg:#3a2f10;
    --bad:#e88686;
    --bad-bg:#3a1717;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--sail);
    color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  h1,h2,h3,.disp{font-family:"Space Grotesk", ui-sans-serif, sans-serif; text-wrap:balance; letter-spacing:-0.01em;}
  .mono, input.time, .time-val, .clock{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;}
  button{font-family:inherit;}
  ::selection{background:var(--signal); color:#fff;}

  #app{min-height:100%; display:flex; flex-direction:column;}

  /* ---------- Header ---------- */
  header.top{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
    background:var(--sea-deep); color:var(--sail);
    padding:10px 16px; padding-top:calc(10px);
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    box-shadow:var(--shadow);
  }
  .brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
  .brand svg{width:26px;height:26px;flex:none;}
  .brand-text{display:flex; flex-direction:column; line-height:1.1;}
  .brand-text b{font-family:"Space Grotesk"; font-size:1.05rem; font-weight:700;}
  .brand-text span{font-size:.68rem; opacity:.75; letter-spacing:.04em; text-transform:uppercase;}
  nav.tabs{display:flex; gap:2px; background:rgba(255,255,255,.08); padding:3px; border-radius:10px;}
  nav.tabs button{
    border:none; background:transparent; color:var(--sail); opacity:.75;
    padding:8px 13px; border-radius:8px; font-size:.86rem; font-weight:500; cursor:pointer;
    transition:background .15s, opacity .15s;
  }
  nav.tabs button.active{background:var(--sail); color:var(--sea-deep); opacity:1; font-weight:600;}
  nav.tabs button:not(.active):hover{opacity:1; background:rgba(255,255,255,.1);}

  main{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:20px 16px calc(48px + env(safe-area-inset-bottom, 0px)); width:100%;}

  /* ---------- generic building blocks ---------- */
  .card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
  .card-pad{padding:18px 18px;}
  .grid{display:grid; gap:14px;}
  .grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .grid.cols-2{grid-template-columns:repeat(2,1fr);}
  @media (max-width:760px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;} }

  .stat{display:flex; flex-direction:column; gap:4px;}
  .stat .num{font-family:"Space Grotesk"; font-size:2rem; font-weight:700; color:var(--sea);}
  .stat .label{font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    border-radius:10px; border:1px solid transparent; cursor:pointer;
    font-size:.88rem; font-weight:600; padding:10px 16px; line-height:1.2;
    transition:filter .12s, transform .05s; white-space:nowrap;
  }
  .btn:active{transform:scale(.98);}
  .btn-primary{background:var(--signal); color:#fff;}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-sea{background:var(--sea); color:#fff;}
  .btn-sea:hover{filter:brightness(1.08);}
  .btn-ghost{background:transparent; color:var(--sea); border-color:var(--line);}
  .btn-ghost:hover{background:var(--surface-2);}
  .btn-danger{background:transparent; color:var(--bad); border-color:var(--bad);}
  .btn-danger:hover{background:var(--bad-bg);}
  .btn-sm{padding:6px 11px; font-size:.78rem; border-radius:8px;}
  .btn-icon{padding:8px; border-radius:9px;}
  .btn:disabled{opacity:.4; cursor:not-allowed;}

  .page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
  .page-head h1{margin:0; font-size:1.5rem;}
  .page-head p{margin:2px 0 0; color:var(--ink-soft); font-size:.88rem;}
  .actions{display:flex; gap:8px; flex-wrap:wrap;}

  table{width:100%; border-collapse:collapse; font-size:.88rem;}
  th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
  td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .table-wrap{overflow-x:auto; border-radius:14px;}
  .empty{padding:38px 20px; text-align:center; color:var(--ink-soft);}
  .empty svg{width:40px;height:40px;opacity:.35;margin-bottom:8px;}

  .pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.02em;}
  .pill-group{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);}
  .pill-good{background:var(--good-bg); color:var(--good);}
  .pill-warn{background:var(--warn-bg); color:var(--warn);}
  .pill-bad{background:var(--bad-bg); color:var(--bad);}
  .pill-sea{background:var(--sea); color:#fff;}

  label{display:block; font-size:.76rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.03em;}
  input[type=text], input[type=number], input[type=date], input[type=time], select, textarea{
    width:100%; padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:var(--surface);
    color:var(--ink); font-size:.92rem; font-family:inherit;
  }
  input:focus, select:focus, textarea:focus, button:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
  .field{margin-bottom:12px;}
  .field-row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
  @media (max-width:600px){ .field-row{grid-template-columns:1fr;} }
  .hint{font-size:.74rem; color:var(--ink-soft); margin-top:4px;}
  .checkline{display:flex; align-items:center; gap:8px; font-weight:500; color:var(--ink); text-transform:none;}
  .checkline input{width:18px; height:18px;}

  /* modal */
  .overlay{position:fixed; inset:0; background:rgba(10,30,40,.45); display:flex; align-items:flex-end; justify-content:center; z-index:100; padding:0;}
  @media (min-width:640px){ .overlay{align-items:center; padding:20px;} }
  .modal{background:var(--surface); width:100%; max-width:560px; max-height:92vh; overflow-y:auto; border-radius:18px 18px 0 0; box-shadow:var(--shadow);}
  @media (min-width:640px){ .modal{border-radius:16px;} }
  .modal-head{position:sticky; top:0; background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line);}
  .modal-head h3{margin:0; font-size:1.1rem;}
  .modal-body{padding:18px;}
  .modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--surface);}
  .x-close{background:none;border:none;font-size:1.3rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px;border-radius:8px;}
  .x-close:hover{background:var(--surface-2);}

  .toast{position:fixed; bottom:calc(18px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:var(--sea-deep); color:var(--sail); padding:11px 18px; border-radius:11px; font-size:.86rem; box-shadow:var(--shadow); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}

  /* race list */
  .race-card{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:border-color .12s, box-shadow .12s;}
  .race-card:hover{border-color:var(--sea); box-shadow:var(--shadow);}
  .race-card .rc-main{display:flex; flex-direction:column; gap:3px;}
  .race-card .rc-main b{font-size:1rem;}
  .race-card .rc-meta{font-size:.78rem; color:var(--ink-soft);}

  /* timer screen */
  .clockbar{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--sea-deep); color:var(--sail); border-radius:14px; padding:14px 18px; margin-bottom:16px; flex-wrap:wrap;}
  .clockbar .clock{font-size:1.9rem; font-weight:600;}
  .clockbar .clabel{font-size:.7rem; text-transform:uppercase; opacity:.7; letter-spacing:.05em;}
  .group-block{margin-bottom:18px;}
  .group-head{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
  .group-head h3{margin:0; font-size:1rem;}
  .boat-row{display:grid; grid-template-columns:minmax(140px,1.4fr) repeat(var(--rn,1), 90px) 110px 230px; gap:8px; align-items:center; padding:8px 10px; border-radius:10px;}
  .boat-row:nth-child(odd){background:var(--surface-2);}
  .boat-row .bname{display:flex; flex-direction:column;}
  .boat-row .bname b{font-size:.9rem;}
  .boat-row .bname span{font-size:.72rem; color:var(--ink-soft);}
  .timebtn{border:1px dashed var(--line); background:var(--surface); border-radius:9px; padding:8px 4px; text-align:center; cursor:pointer; font-size:.86rem; color:var(--ink-soft); min-height:38px;}
  .timebtn.filled{border-style:solid; border-color:var(--sea); color:var(--ink); font-weight:600; background:var(--surface);}
  .timebtn:hover{border-color:var(--sea);}
  .statusbtns{display:flex; gap:4px;}
  .sbtn{flex:1; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 0; font-size:.72rem; font-weight:700; cursor:pointer; color:var(--ink-soft);}
  .sbtn.on-DNS{background:var(--warn-bg); color:var(--warn); border-color:var(--warn);}
  .sbtn.on-DNF{background:var(--warn-bg); color:var(--warn); border-color:var(--warn);}
  .sbtn.on-DSQ{background:var(--bad-bg); color:var(--bad); border-color:var(--bad);}
  .sbtn.on-penalty{background:var(--warn-bg); color:var(--warn); border-color:var(--warn);}

  @media (max-width:820px){
    .boat-row{grid-template-columns:1fr; gap:6px; padding:12px; border:1px solid var(--line); margin-bottom:6px; background:var(--surface)!important;}
    .boat-row .rounds{display:flex; gap:6px; flex-wrap:wrap;}
  }

  footer.app-foot{text-align:center; padding:16px; font-size:.72rem; color:var(--ink-soft);}
  a{color:var(--sea);}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .start-overlay{position:fixed; inset:0; background:#062230; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:9999;}
  .start-overlay .so-group{font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase; opacity:.8; text-align:center; padding:0 20px;}
  .start-overlay .so-count{font-size:min(40vw,320px); font-weight:800; font-family:"IBM Plex Mono", ui-monospace, monospace; line-height:1; color:#fff;}
  .start-overlay .so-count.so-go{color:#5cd85a; font-size:min(22vw,190px); letter-spacing:.05em;}
  .start-overlay .so-dismiss{position:absolute; top:18px; right:18px; background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3);}

  /* Sync-Anzeige */
  .syncpill{display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:var(--sail); border-radius:999px; padding:6px 12px; font-size:.76rem; font-weight:600; cursor:pointer;}
  .syncpill .dot{width:8px; height:8px; border-radius:50%; background:#6bcf9d;}
  .syncpill.pending .dot{background:#e3b45c;}
  .syncpill.offline .dot{background:#9aa9ad;}
  .syncpill.conflict .dot, .syncpill.login .dot{background:#e88686;}
  .syncpill.conflict, .syncpill.login{border-color:#e88686;}
  .clockwarn{margin-top:6px; font-size:.74rem; color:#ffd9a0; max-width:520px;}