:root{
      /* Dark UI */
      --bg:#0b1220;
      --panel:#0f172a;
      --panel-2:#111c33;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --border:#243049;
      --shadow: 0 10px 24px rgba(0,0,0,.35);

      --radius:12px;          /* panels */
      --btnRadius:10px;       /* buttons a bit less rounded */
      --controlH:46px;       /* consistent control height */
      --accent:#2f6fed;
      --accent-weak:rgba(47,111,237,.16);

      --danger:#ff6b6b;
      --danger-weak:rgba(255,107,107,.14);

      --warn:#f59e0b;
      --warn-weak:rgba(245,158,11,.14);

      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: var(--sans);
      color:var(--text);
      -webkit-text-size-adjust: 100%;
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    a{ color: #8fb0ff; }

    /* Mobile-first layout */
    .app{
      max-width: 1100px;
      margin: 0 auto;
      padding: calc(16px + env(safe-area-inset-top)) 16px calc(80px + env(safe-area-inset-bottom));
      width: 100%;
    }
    .app{ flex: 1 0 auto; }
    footer{ margin-top: auto; }
    .topbar{ display:flex; flex-direction:column; gap:12px; margin-bottom: 12px; }
    .topbarRow{ display:flex; align-items:center; gap:12px; width:100%; }
    .appMode .topbar{ display:none; }
    .appMode .app{ padding-top: calc(12px + env(safe-area-inset-top)); }
    .authMode .app{ display:none; }
    .authPending .app{ display:none; }

    .brand{ display:flex; gap:12px; align-items:flex-start; }
    .brandLogo{ height:76px; }
    .mark{ width:40px; height:40px; border-radius:12px; background: var(--accent); box-shadow: var(--shadow); flex:0 0 auto; }
    .brand h1{ margin:0; font-size:16px; font-weight:850; letter-spacing:.2px; }
    .brand p{ margin:4px 0 0 0; color: var(--muted); font-size:13px; line-height:1.35; }

    .menuWrap{ position:relative; margin-left:auto; }
    .menuBtn{ display:inline-flex; align-items:center; justify-content:center; width:76px; height:76px; border:0; background: transparent; box-shadow:none; }
    .menuBtn:hover{ background: rgba(255,255,255,.04); }
    .menuList{
      position:absolute;
      right:0;
      top:48px;
      min-width: 300px;
      background: rgba(15,23,42,.96);
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      box-shadow: var(--shadow);
      padding:6px;
      display:none;
      z-index: 20;
      backdrop-filter: blur(10px);
    }
    .menuList.open{ display:block; }
    .menuItem{
      width:100%;
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:10px;
      background: transparent;
      border:0;
      color: var(--text);
      font: inherit;
      cursor: pointer;
      text-align:right;
      justify-content:flex-end;
    }
    .menuItem:hover{ background: rgba(255,255,255,.06); }
    .menuItem.disabled{
      opacity:.5;
      pointer-events:none;
      cursor: default;
    }
    .menuItemDanger{ color: var(--danger); }
    .menuItemDanger:hover{ background: rgba(255,107,107,.10); }
    .menuSep{ height:1px; background: rgba(255,255,255,.08); margin:6px; }
    .menuItem.loading .ico svg{ animation: spin 1s linear infinite; }
    .pwaOnly{ display:none; }
    .menuPulse{
      animation: menuPulse 1.2s ease-in-out infinite;
      box-shadow:
        0 0 0 2px rgba(255,77,77,.45),
        0 0 18px rgba(255,77,77,.45);
    }
    @keyframes menuPulse{
      0%,100%{
        box-shadow:
          0 0 0 2px rgba(255,77,77,.35),
          0 0 12px rgba(255,77,77,.35);
      }
      50%{
        box-shadow:
          0 0 0 2px rgba(255,77,77,.7),
          0 0 22px rgba(255,77,77,.7);
      }
    }
    @media (max-width: 520px){
      .brandLogo{ height:56px; }
      .menuBtn{ width:56px; height:56px; }
    }

    .authOverlay{
      position:fixed; inset:0;
      background: radial-gradient(1200px 700px at 10% 0%, rgba(47,111,237,.18), transparent 60%),
        radial-gradient(900px 600px at 95% 10%, rgba(46,213,115,.14), transparent 55%),
        #0b1220;
      display:none;
      align-items:center; justify-content:center;
      z-index: 90;
      padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
      overflow:auto;
      flex-direction: column;
      gap: 18px;
      min-height: 100vh;
    }
    .loginPage .authOverlay{
      padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    .authOverlay.open{ display:flex; }
    .authPending .authOverlay{ display:none !important; }
    .splashOverlay{
      position:fixed; inset:0;
      background: #0b1220;
      display:none;
      align-items:center; justify-content:center;
      z-index: 92;
      padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
      text-align:center;
    }
    .splashOverlay.open{ display:flex; }
    .splashInner{ display:flex; flex-direction:column; gap:16px; align-items:center; }
    .spinner{
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.2);
      border-top-color: rgba(255,255,255,.7);
      animation: spin 1s linear infinite;
    }
    @keyframes spin{ to{ transform: rotate(360deg); } }
    .authLayout{
      --authCol: 420px;
      width: min(calc((var(--authCol) * 2) + 26px), 100%);
      display:grid;
      grid-template-columns: var(--authCol) var(--authCol);
      gap: 26px;
      align-items:stretch;
      align-content:center;
      justify-content:center;
      justify-items:stretch;
      min-height: calc(100vh - 48px);
      margin: 0 auto;
      flex: 1 0 auto;
    }
    .authIntro{
      color: var(--text);
    }
    .authLayout .authIntro{
      grid-column: 1;
      grid-row: 1;
    }
    .authLayout .authGrid{
      grid-column: 1;
      grid-row: 2;
    }
    .authLayout .authCard{
      grid-column: 2;
      grid-row: 2;
    }
    .authIntro .authLead,
    .authIntro .authBrand,
    .authIntro .authGrid{
      max-width: var(--authCol);
    }
    .authBrand{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }
    .authLogoWide{
      display:block;
      width: min(calc((var(--authCol) * 2) + 26px), 100%);
      height:auto;
      object-fit: contain;
    }
    .authBrand img{
      width:46px;
      height:46px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.10);
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
      object-fit: cover;
    }
    .authBrand h1{
      margin:0;
      font-size: 26px;
      letter-spacing: .2px;
    }
    .authLead{
      margin: 0 0 16px 0;
      color: var(--muted);
      line-height: 1.55;
      font-size: 15px;
    }
    .authGrid{
      display:grid;
      grid-template-rows: repeat(3, 1fr);
      gap:12px;
      margin: 0;
      justify-items: start;
      align-content: stretch;
      height: 100%;
    }
    .authFeature{
      display:grid;
      grid-template-columns: 36px minmax(0,1fr);
      gap:12px;
      padding:12px;
      border-radius: 14px;
      background: rgba(15,23,42,.7);
      border: 1px solid rgba(255,255,255,.06);
      width: 100%;
      max-width: var(--authCol);
    }
    .authIcon{
      width:36px;
      height:36px;
      border-radius: 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(47,111,237,.16);
      color: #8fb6ff;
    }
    .authFeature h4{
      margin:0 0 4px 0;
      font-size: 14px;
    }
    .authFeature p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .authCard{
      width: min(var(--authCol), 100%);
      background: rgba(15,23,42,.98);
      border:1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding:18px;
      justify-self:end;
    }
    .authCard h3{ margin:0 0 6px 0; font-size:16px; }
    .authCard .meta{ margin-bottom:12px; color: var(--muted); }
    .authRow{ display:flex; gap:10px; flex-wrap:wrap; }
    .authBtn{
      flex:1;
      min-width:150px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      border-radius: 10px;
      padding:10px 12px;
      color: var(--text);
    }
    .authBtn:hover{ background: rgba(255,255,255,.08); }
    .authError{ color: #ffb3b3; font-size:12px; margin-top:10px; }
    .authInfo{ color: #b9d0ff; font-size:12px; margin-top:10px; }
    .authHelper{
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
    }
    .authLoading{
      display:none;
      align-items:center;
      gap:8px;
      margin-top:10px;
      font-size:12px;
      color: var(--muted);
    }
    .authLoading.show{ display:flex; }
    .spinner{
      width:14px;
      height:14px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.15);
      border-top-color: rgba(255,255,255,.7);
      animation: spin .8s linear infinite;
    }
    @keyframes spin{ to { transform: rotate(360deg); } }
    .authCard .modalClose{
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.12);
      color: var(--text);
    }
    .authLink{
      border:0;
      background:none;
      color:#9bb7ff;
      padding:0;
      min-height:auto;
      justify-content:flex-start;
      font-size:12px;
      text-decoration:none;
    }
    .authLink:hover{ text-decoration: underline; }
    .offlineBanner{
      position: fixed;
      left: 12px;
      right: 12px;
      top: calc(12px + env(safe-area-inset-top));
      z-index: 95;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(245,158,11,.16);
      border: 1px solid rgba(245,158,11,.35);
      color: #f8d39a;
      font-size: 12px;
      backdrop-filter: blur(8px);
    }
    .offlineBanner.show{ display:flex; }
    footer {
      padding: 18px 16px;
      margin-bottom: 30px;
      text-align: center;
      font-size: 0.9rem;
      line-height: 1.6;
      opacity: 0.9;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    @media (prefers-color-scheme: dark) {
      footer {
        border-top-color: rgba(255, 255, 255, 0.12);
      }
    }
    footer small { display: inline-block; }
    footer a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid currentColor;
      border-bottom-color: rgba(0, 0, 0, 0.25);
      padding-bottom: 1px;
    }
    @media (prefers-color-scheme: dark) {
      footer a {
        border-bottom-color: rgba(255, 255, 255, 0.28);
      }
    }
    footer a:hover {
      opacity: 1;
      border-bottom-color: currentColor;
    }
    footer a.bmcLink{
      color: #f7d452;
      border-bottom-color: rgba(247,212,82,.6);
    }
    footer a.bmcLink:hover{
      border-bottom-color: #f7d452;
    }
.authOverlay footer{ margin-top: auto; }
.authTabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.authTab{
  padding:10px 12px;
  border:0;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  font-weight:700;
}
.authTab + .authTab{
  border-left:1px solid rgba(255,255,255,.08);
}
.authTab.active{
  background: rgba(47,111,237,.18);
  color: var(--text);
}
.authPanel{ display:none; margin-top:0; }
.authPanel.active{ display:block; }
.authCheck{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.authCheck input{
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color:#2f6fed;
}
.authCheck span{ flex:1; }
.inviteNote{ color: var(--muted); font-size:12px; margin-top:6px; }
.authInlineLinks a{ color: var(--text); text-decoration:none; }
.authInlineLinks a:hover{ text-decoration:underline; }
.authPassHints{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:6px 10px;
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
}
.authPassHints .hintItem{
  position:relative;
  padding-left:16px;
}
.authPassHints .hintItem::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color: var(--muted);
}
.authPassHints .hintItem.ok{
  color:#9fe7b6;
}
.authPassHints .hintItem.ok::before{
  color:#9fe7b6;
}
.loginPage .authFeature{
  align-content:center;
  align-items:center;
}
    .xlsxGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:12px;
      align-items:stretch;
    }
    .xlsxGrid .card{ height:100%; }
    .xlsxCard{
      display:flex;
      flex-direction:column;
    }
    .xlsxDownloads{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin: 8px 0 16px;
    }
    .xlsxDownloads .btnGood{
      min-width: 160px;
    }
    .emptyActionBtn{
      min-width: 180px;
    }
    .emptyActionsRow{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .emptyActionsRow .emptyActionBtn{
      width: 100%;
    }
    @media (max-width: 700px){
      .emptyActionsRow{
        grid-template-columns: 1fr;
      }
    }
    .xlsxHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .xlsxHeader .tiny{ margin:0; }
    .xlsxFileRow{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .xlsxHint{
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(15, 24, 44, 0.55);
      display: grid;
      gap: 6px;
    }
    .xlsxFileRow button{
      min-width: 160px;
    }
    .xlsxActions .btnGood{
      min-width: 160px;
    }
    .xlsxActions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:12px;
    }
    .xlsxBottom{
      margin-top:auto;
      display:flex;
      justify-content:flex-start;
      padding-top:12px;
    }
    .xlsxSummary{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px;
      margin-top:10px;
    }
    .xlsxStat{
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px;
      padding:10px 12px;
      background: rgba(17,28,51,.6);
      font-size:12px;
    }
    .xlsxStat strong{
      display:block;
      margin-bottom:2px;
    }
    .xlsxStat.full{ grid-column: 1 / -1; }
    .xlsxErrors{
      margin-top:10px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px;
      overflow:hidden;
      max-height:260px;
      overflow:auto;
    }
    .xlsxErrors table{
      width:100%;
      border-collapse: collapse;
      font-size:12px;
    }
    .xlsxErrors th,
    .xlsxErrors td{
      text-align:left;
      padding:8px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .xlsxErrors th{
      position: sticky;
      top: 0;
      background: #0f172a;
      z-index: 1;
    }
    @media (max-width: 900px){
      .authOverlay{
        align-items:flex-start;
      }
      .xlsxGrid{
        grid-template-columns: 1fr;
      }
      .authLayout{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-items: center;
        min-height: auto;
        padding-bottom: 24px;
      }
      .authLayout .authIntro{ grid-column: 1; grid-row: 1; }
      .authLayout .authGrid{ grid-column: 1; grid-row: 2; }
      .authLayout .authCard{ grid-column: 1; grid-row: 3; }
      .authIntro,
      .authCard{
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
      }
      .authBrand{
        justify-content:center;
      }
      .authGrid{
        justify-items: stretch;
      }
      .authFeature{
      }
      .authCard{
        justify-self: stretch;
      }
    }
    @media (max-width: 700px){
      .stackMobile{
        flex-direction: column;
      }
      .stackMobile .s_fieldDate{ order: 1; }
      .stackMobile .s_fieldBooked{ order: 2; }
      .modal .check{
        align-items:center;
      }
      .modal .check .iconBtn{
        margin-top:0 !important;
      }
    }

    .ico{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center}
    .ico svg{width:18px; height:18px; display:block}
    .btnText{display:inline-flex; align-items:center; gap:8px}

    button{
      appearance:none;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: var(--btnRadius);
      padding: 12px 12px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font: inherit;
      min-height: 44px;
      transition: transform .06s ease, background .14s ease, border-color .14s ease, filter .14s ease;
    }
    button:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(47,111,237,.35);
    }
    button:active{ transform: translateY(1px); }

    button:disabled{
      opacity:.55;
      cursor: default;
      transform:none;
      filter:none;
    }
    button:disabled:hover{
      background: rgba(255,255,255,.03);
      border-color: var(--border);
    }

    .btnPrimary{
      background: rgba(47,111,237,.95);
      border-color: rgba(47,111,237,.95);
      color:white;
    }
    .btnPrimary:hover{ filter: brightness(1.03); }

    .btnDanger{
      background: var(--danger-weak);
      border-color: rgba(255,107,107,.30);
      color: var(--danger);
    }
    .btnDanger:hover{ border-color: rgba(255,107,107,.55); }
    .btnInlineDanger{
      background: var(--danger-weak);
      border-color: rgba(255,107,107,.30);
      color: var(--danger);
      min-height:32px;
      padding:6px 8px;
      border-radius: 10px;
    }
    .btnInlineDanger:hover{ border-color: rgba(255,107,107,.55); }
    .btnInlineDanger--plain{
      background: transparent;
      border-color: transparent;
      padding: 0;
      min-height: auto;
      border-radius: 0;
    }
    .btnInlineDanger--plain:hover{
      background: transparent;
      border-color: transparent;
    }

    .btnGood{
      background: var(--accent-weak);
      border-color: rgba(47,111,237,.30);
      color: #b8c9ff;
    }
    .btnGood:hover{ border-color: rgba(47,111,237,.55); }
    .btnGoodGreen{
      background: rgba(47,237,156,.14);
      border-color: rgba(47,237,156,.30);
      color: #aef3d7;
    }
    .btnGoodGreen:hover{ border-color: rgba(47,237,156,.55); }

    .pill{
      display:inline-flex; align-items:center; justify-content:center;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      color: rgba(229,231,235,.92);
      font-size:12px;
      white-space:nowrap;
    }
    .pillAccent{ background: var(--accent-weak); border-color: rgba(47,111,237,.25); color: #c6d4ff; }
    .pillWarn{ background: var(--warn-weak); border-color: rgba(245,158,11,.28); color: #f7c465; }

    /* Mobile tabs */
    .tabs{
      display:flex;
      gap:8px;
      background: rgba(15,23,42,.72);
      border:1px solid rgba(255,255,255,.06);
      padding:6px;
      border-radius: 14px;
      box-shadow: 0 1px 0 rgba(0,0,0,.25);
      position: sticky;
      top: 10px;
      z-index: 10;
      backdrop-filter: blur(10px);
    }
    .tab{
      flex:1;
      border-radius: 12px;
      padding: 10px 12px;
      border:1px solid transparent;
      background: transparent;
      color: var(--muted);
      font-weight: 800;
      min-height: 40px;
      justify-content:center;
    }
    .tab.active{
      background: rgba(255,255,255,.05);
      border-color: rgba(47,111,237,.25);
      color: var(--text);
      box-shadow: 0 6px 14px rgba(0,0,0,.25);
    }

    .panel{
      background: rgba(15,23,42,.86);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hd{
      padding: 14px 14px 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    }
    .hd h2{ margin:0; font-size:14px; font-weight:850; }
    .hd small{ color: var(--muted); font-size:12px; line-height:1.35; display:block; margin-top:4px; }
    .bd{ padding: 14px; }

    input, select, textarea{
      width:100%;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      padding: 12px 12px;          /* nice padding top/bottom */
      font: inherit;
      background: rgba(255,255,255,.03);
      color: var(--text);
      outline:none;
      min-height: var(--controlH);
    }
    input, select{ height: var(--controlH); }
    textarea{ height: auto; }
    select{ padding-top: 12px; padding-bottom: 12px; color-scheme: dark; }
    select option, select optgroup{
      background: #0f172a;
      color: var(--text);
    }
    textarea{ min-height: 120px; resize: vertical; padding-top: 12px; padding-bottom: 12px; }
    input:focus, select:focus, textarea:focus{
      border-color: rgba(47,111,237,.55);
      box-shadow: 0 0 0 4px rgba(47,111,237,.14);
    }

    /* Custom select (dark dropdown) */
    .nativeSelectHidden{
      position:absolute;
      opacity:0;
      pointer-events:none;
      width:0;
      height:0;
    }
    .cSelect{ position:relative; width:100%; }
    .cSelectBtn{
      width:100%;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      padding: 12px 12px;
      font: inherit;
      background: rgba(255,255,255,.03);
      color: var(--text);
      min-height: var(--controlH);
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:10px;
      text-align:left;
    }
    .cSelectLabel{ text-align:left; }
    .cSelectCaret{ margin-left:auto; }
    .cSelectBtn:focus{
      border-color: rgba(47,111,237,.55);
      box-shadow: 0 0 0 4px rgba(47,111,237,.14);
      outline:none;
    }
    .cSelectCaret{ display:inline-flex; width:18px; height:18px; opacity:.8; }
    .cSelectList{
      position:absolute;
      left:0;
      right:0;
      top: calc(100% + 6px);
      background: rgba(15,23,42,.98);
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px;
      box-shadow: var(--shadow);
      padding:6px;
      display:none;
      z-index: 30;
      max-height:260px;
      overflow:auto;
      text-align:left;
    }
    .cSelectList.open{ display:block; }
    .cSelectOption{
      width:100%;
      display:flex;
      justify-content:flex-start;
      background: transparent;
      border:0;
      color: var(--text);
      text-align:left;
      padding:8px 10px;
      border-radius:8px;
      cursor:pointer;
      font: inherit;
    }
    .cSelectOption:hover{ background: rgba(255,255,255,.06); }
    .cSelectOption.active{ background: rgba(47,111,237,.18); color:#cfe0ff; }
    .cSelectGroup{
      font-size:11px;
      color: var(--muted);
      padding:6px 10px 2px 10px;
    }
    ::placeholder{ color: rgba(156,163,175,.72); }  /* “unscharf” */
    .tiny{ font-size:12px; color: rgba(156,163,175,.85); line-height:1.35; }
    .meta{ color: rgba(156,163,175,.88); font-size: 12px; margin-top:5px; line-height:1.35; }
    .sub{ color: var(--muted); font-size:12px; padding-top:8px; }

    .row{ display:flex; gap:10px; align-items:center; }
    .col{ display:flex; flex-direction:column; gap:10px; }
    .list{ display:flex; flex-direction:column; gap:10px; }
    .card{
      border:1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 12px;
      background: rgba(255,255,255,.03);
    }
    .card h3{ margin:0; font-size:13px; font-weight:850; }
    .hr{ height:1px; background: rgba(255,255,255,.08); margin: 12px 0; }
    .nanoViewCard{
      padding:14px 16px;
      background: rgb(15 23 42 / 98%);
    }
    .nanoTimeline{
      position:relative;
      height:80px;
      margin-top:30px;
      margin-bottom:30px;
      padding:12px 24px 28px;
    }
    .nanoLine{
      position:absolute;
      top:40px;
      left:6px;
      right:6px;
      height:2px;
      background: rgba(255,255,255,.12);
    }
    .nanoDot{
      position:absolute;
      top:32px;
      width:20px;
      height:20px;
      border-radius:50%;
      border:1px solid rgba(0,0,0,.4);
      box-shadow: 0 0 0 4px rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#0b1220;
      font-size:11px;
      font-weight:700;
      line-height:1;
    }
    .nanoDot.big{ width:26px; height:26px; top:28px; }
    .nanoDot.xl{ width:32px; height:32px; top:24px; }
    .nanoDot.xxl{ width:40px; height:40px; top:20px; }
    .nanoDot.xxxl{ width:52px; height:52px; top:14px; }
    .nanoTooltip{
      position:absolute;
      background: rgba(15,23,42,.98);
      color: var(--text);
      border:1px solid rgba(255,255,255,.12);
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 12px;
      box-shadow: 0 8px 20px rgba(0,0,0,.35);
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -6px);
      transition: opacity .15s ease, transform .15s ease;
      white-space: nowrap;
      z-index: 3;
    }
    .nanoTooltip.show{
      opacity: 1;
      transform: translate(-50%, -12px);
    }
    .legend{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      font-size:12px;
      color:var(--muted);
      margin-top:8px;
    }
    .legendItem{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .legendSwatch{ width:12px; height:12px; border-radius:2px; display:inline-block; }

    .cohortCard{
      border:1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 12px;
      background: rgb(15 23 42 / 98%);
      cursor: pointer;
    }
    .cohortCard.isSelected{
      border-color: rgba(47,111,237,.65);
      box-shadow: 0 0 0 1px rgba(47,111,237,.35) inset;
      background: rgb(15 23 42 / 98%);
    }
    .cohortCard.isPinned{
      border-color: rgba(34,197,94,.55);
      box-shadow: 0 0 0 3px rgba(34,197,94,.12);
    }
    .cohortTop{ display:flex; flex-direction:column; gap:10px; }
    .cohortTop .rightBtns{ display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap; align-items:center; }
    .iconBtn{ padding: 10px 12px; min-height: 40px; }
    .classLabelGreen{ color: #45d38a; font-weight: 800; }
    .iconBtnBlue{
      background: rgba(47,111,237,.18);
      border-color: rgba(47,111,237,.45);
      color: #c6d4ff;
    }
    .iconBtnBlue:hover{ border-color: rgba(47,111,237,.65); }
    .iconBtnPdf{ padding: 8px 10px; display:flex; align-items:center; justify-content:center; }
    .pdfIcon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .4px;
      color: currentColor;
    }
    .searchClearWrap{
      position:relative;
      display:flex;
      align-items:center;
      width:100%;
    }
    .searchClearWrap input{
      padding-right:34px;
      flex:1 1 auto;
    }
    .searchClearBtn{
      position:absolute;
      right:8px;
      width:22px;
      height:22px;
      border-radius:0;
      border:none;
      background: transparent;
      color: var(--text);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:14px;
      cursor:pointer;
      opacity:0.85;
    }
    .searchClearBtn:hover{ opacity:1; }
    .plainLink{ text-decoration:none; color:inherit; }
    .plainLink:hover{ text-decoration:underline; }
    .cohortExpand{
      margin-top: 14px;
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 14px;
      display: none;
      cursor: default;
    }
    .cohortCard.isSelected .cohortExpand{ display: block; }
    .expandToolbar{ display:flex; flex-direction:column; gap:12px; align-items:stretch; margin-bottom: 12px; }
    .fullWidthBtn{ width: 100%; }
    .workshopCard{ padding: 14px; margin-bottom: 16px; }
    .workshopHeader{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
    .workshopTitle{ font-size: 15px; font-weight: 800; }
    .workshopActions{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
    .workshopDetails ul{ margin: 6px 0 8px 18px; padding: 0; }
    .workshopNote{ margin-top: 6px; padding: 10px; border-radius: 12px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
    .emptyWorkshops{ padding: 12px; border-radius: 12px; border:1px dashed rgba(255,255,255,.12); color: var(--muted); }

    details{
      border:1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      background: rgba(255,255,255,.03);
      overflow:hidden;
    }
    summary{
      list-style:none; cursor:pointer;
      padding: 12px;
      display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
    }
    summary::-webkit-details-marker{ display:none; }
    .sumLeft{ display:flex; flex-direction:column; gap:4px; }
    .sumTitle{ font-size:13px; font-weight:850; }
    .sumSub{ font-size:12px; color: var(--muted); }
    .badge{
      font-size:12px; padding:6px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(229,231,235,.92);
      white-space:nowrap;
    }
    .badgeAccent{ background: var(--accent-weak); border-color: rgba(47,111,237,.25); color: #c6d4ff; }

    .detailBody{ padding: 0 12px 12px 12px; }
    .progress{
      height:10px; border-radius:999px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      margin-top:6px;
    }
    .progress > div{ height:100%; background: var(--accent); width:0%; }

    .checklist{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
    .check{
      display:flex; gap:10px; align-items:center;
      padding:10px;
      border:1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      background: rgba(255,255,255,.02);
    }
    .check input{ width:20px; height:20px; margin-top:2px; }
    .sessionActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
    .sessionActions .ico{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center}
    .ico svg{width:18px; height:18px; display:block}
    .btnText{display:inline-flex; align-items:center; gap:8px}

    button{ justify-content:center; }

    /* Modal (centered) */
    .modal{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      display:none; align-items:center; justify-content:center;
      padding: calc(26px + env(safe-area-inset-top)) 18px 18px 18px;
      padding-bottom: calc(18px + env(safe-area-inset-bottom));
      z-index: 50;
      overscroll-behavior: contain;
    }
    .modal.open{ display:flex; }
    .modalBox{
      width: min(900px, 100%);
      max-height: calc(100dvh - (36px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
      overflow:auto;
      border-radius: 16px;
      background: rgba(15,23,42,.98);
      border:1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow);
    }
    .modalBox .hd{
      position: sticky;
      top:0;
      background: rgba(15,23,42,.98);
      z-index:2;
      padding: 12px 16px 10px 16px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .modalBox .hd .hdCloseRow{ display:flex; width:100%; justify-content:flex-end; }
    .modalClose{ min-height: 40px; }
    body.modalOpen{ overflow: hidden; position: fixed; width: 100%; }

    /* Dialog (confirm/alert) */
    .dialog{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      display:none; align-items:center; justify-content:center;
      padding: calc(18px + env(safe-area-inset-top)) 18px 18px 18px;
      z-index: 70;
      overscroll-behavior: contain;
    }
    .dialog.open{ display:flex; }
    .dialogBox{
      width: min(520px, 100%);
      border-radius: 16px;
      background: rgba(15,23,42,.98);
      border:1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .dialogBox .hd{ padding: calc(12px + env(safe-area-inset-top)) 16px 0 16px; }
    .dialogBox .bd{ padding: 10px 16px 16px 16px; color: var(--muted); }
    .dialogActions{ padding: 12px 16px 16px 16px; gap:10px; justify-content:flex-end; }
    .dialogActions.dialogActionsXlsx{
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .dialogActions.dialogActionsXlsx > button{
      flex:1;
      min-width:0;
      justify-content:center;
      white-space: nowrap;
      font-size: 13px;
      line-height: 1.1;
      min-height: 40px;
    }
    .dialog.dialogWide .dialogBox{
      width: min(680px, 100%);
    }
    .dialogActions.dialogActionsXlsx .xlsxBtnExtra{
      font-size: 13px;
      letter-spacing: 0;
      padding: 10px 12px;
    }
@media (max-width: 899px){
  .dialogActions.dialogActionsXlsx{
    flex-direction:column;
  }
}

.protoToggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
.protoToggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.protoSwitch{
  width:38px;
  height:22px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  position:relative;
  transition: background .15s ease, border-color .15s ease;
}
.protoSwitch::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#e2e8f0;
  top:2px;
  left:2px;
  transition: transform .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.protoToggle input:checked + .protoSwitch{
  background: rgba(34,197,94,.2);
  border-color: rgba(34,197,94,.45);
}
.protoToggle input:checked + .protoSwitch::after{
  transform: translateX(16px);
  background: #a7f3d0;
}
.protoLabel{
  font-size:12px;
  color:var(--text);
}
@media (max-width: 899px){
  .dialogActions.dialogActionsXlsx > button{
    width:100%;
  }
}
    .autosaveNote{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:8px 10px;
      border:1px solid rgba(74,125,255,.35);
      border-radius:10px;
      background: rgba(255,255,255,.02);
      font-size:12px;
      color: var(--muted);
    }
    .autosaveLeft{ display:flex; align-items:center; gap:8px; }
    .autosaveDot{
      width:8px; height:8px; border-radius:50%;
      background: #25c26e;
      box-shadow: 0 0 0 3px rgba(37,194,110,.2);
      flex:0 0 auto;
    }
    .autosaveStatus{ font-weight:600; color: var(--text); }

    /* Desktop enhancements */
    @media (min-width: 980px){
      .app{ padding-bottom: 16px; }
      .topbar{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
      .actions{ display:flex; gap:10px; }
      .tabs{ display:none; }
      .layout{ display:grid; grid-template-columns: 360px 1fr; gap:16px; }
      .cohortTop{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
    .cohortTop .rightBtns{ justify-content:flex-end; }
    .modal{ align-items:center; padding:18px; }
  }

  .tplHead{ justify-content:space-between; align-items:flex-start; gap:10px; }
  .tplActions{ gap:8px; flex-wrap:nowrap; }
  .tplActions button{ min-width:40px; }
  .workshopActions{ flex-wrap:nowrap; }

  @media (max-width: 720px){
    .tplHead{ flex-direction:column; align-items:stretch; }
    .tplActions{ justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .workshopActions{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  }

    /* Mobile view switching */
    .layout{ display:block; }
    .view{ display:none; }
    .view.active{ display:block; }
  
    /* ===== Print (A4 / Weiß / ohne Popups) ===== */
    #printLayer{
      position: fixed;
      inset: 0;
      background: #fff;
      color: #0f172a;
      z-index: 9999;
      overflow: auto;
      padding: 20mm 16mm;
      display:none;
    }
    #printLayer .box{
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 14px;
    }
    #printLayer h1{ margin:0 0 6px 0; font-size:20px; }
    #printLayer .meta{ color:#475569; font-size:12px; margin-bottom: 14px; }
    #printLayer table{ width:100%; border-collapse: collapse; }
    #printLayer tr{ border-bottom: 1px solid #e2e8f0; }
    #printLayer tr:last-child{ border-bottom: none; }
    #printLayer td{ padding: 6px 0; vertical-align: top; }

    @media print{
      /* In Print dürfen UI & Modal nicht mitgedruckt werden */
      .app, .modal, #toast { display:none !important; }
      #printLayer{ display:block !important; position: static; inset:auto; padding: 16mm; }
      @page{ size: A4; margin: 0; }
    }

    /* Consistent spacing for "Add item" buttons (smartphone-first) */
    .addBtn{ margin-top:10px; width:100%; }

    /* ===== Checkbox (dark, consistent) ===== */
    .checkRow{ display:flex; align-items:center; gap:10px; user-select:none; }
    .checkRow input[type="checkbox"]{
      appearance:none;
      width:16px; height:16px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.04);
      display:inline-grid;
      place-content:center;
      transform: translateY(1px);
      cursor:pointer;
      box-sizing:border-box;
      flex:0 0 16px;
      min-width:16px;
      min-height:16px;
      max-width:16px;
      max-height:16px;
    }
    .checkRow input[type="checkbox"]::after{
      content:"";
      width:9px; height:9px;
      transform: scale(0);
      transition: transform .08s ease;
      background: #fff;
      clip-path: polygon(14% 44%, 0 59%, 44% 100%, 100% 14%, 84% 0, 40% 65%);
    }
    .checkRow input[type="checkbox"]:checked{
      background: rgba(47, 111, 237, 0.55);
      border-color: rgba(47, 111, 237, 0.55);
    }

    /* Date input + picker */
    .dateInput{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
    }
    .datePicker{
      position:fixed;
      background: rgba(15,23,42,.98);
      border:1px solid rgba(255,255,255,.08);
      border-radius:14px;
      box-shadow: var(--shadow);
      padding:12px;
      z-index: 80;
      width: 280px;
      display:none;
    }
    .datePicker.open{ display:block; }
    .datePickerHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:8px;
    }
    .datePickerTitle{ font-weight:800; font-size:13px; }
    .dateNav{
      border:0;
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius:8px;
      width:28px; height:28px;
      display:inline-flex; align-items:center; justify-content:center;
    }
    .dateGrid{
      display:grid;
      grid-template-columns: repeat(7, 1fr);
      gap:6px;
      font-size:12px;
    }
    .dateCell{
      border:0;
      background: transparent;
      color: var(--text);
      border-radius:8px;
      padding:6px 0;
      cursor:pointer;
    }
    .dateCell.muted{ color: var(--muted); }
    .dateCell.today{ border:1px solid rgba(47,111,237,.5); }
    .dateCell.selected{
      background: rgba(47,111,237,.35);
      color:#e6eeff;
    }
    .checkRow input[type="checkbox"]:checked::after{ transform: scale(1); }
    .checkRow input[type="checkbox"]:focus-visible{
      outline:none;
      box-shadow: 0 0 0 4px rgba(47,111,237,.18);
    }
    .checkRow span{ color: var(--muted); font-size:13px; }

.gradeOk{ color: var(--good, #30d158); font-weight:900; }
.gradeBad{ color: var(--danger, #ff453a); font-weight:900; }

/* Entfernt: Fortschrittszeile im Workshop-Modal */
#s_openInfo{display:none !important;}

    .pillDanger{ background: var(--danger-weak); border-color: rgba(255,107,107,.26); color: #ffb3b3; }
    .pillGood{ background: var(--good-weak); border-color: rgba(48,209,88,.26); color: #9df0b3; }
    @media (max-width: 720px){
      .workshopHeader{ flex-direction: column; align-items: flex-start; }
    .workshopActions{ order: 2; margin-top: 8px; margin-bottom: 6px; }
    }