body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
      @media (max-width: 600px) {
        body, #message { margin-top: 0; background: white; box-shadow: none; }
        body { border-top: 16px solid #ffa100; }
      }

html[data-theme="light"], html[data-theme="light"] body { background: #f5f7fb; }
    html[data-theme="dark"], html[data-theme="dark"] body { background: #0b0f14; }

:root{
      --radius: 16px;
      --radius2: 12px;
      --pad: 14px;
      --gap: 12px;
      --ui: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --mono: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    body{
      margin:0;
      font-family: var(--ui);
      background: var(--bg);
      color: var(--text);
      color-scheme: dark;
    }
    body.light{ color-scheme: light; }
    .page{ max-width: 100%; width: 100%; margin: 0 auto; padding: 18px; }
    h1{ margin: 6px 0 14px; font-size: 22px; letter-spacing: .2px; }
    .muted{ color: var(--muted); }
    .muted2{ color: var(--muted2); }
    .error{ color: var(--danger); margin-top: 10px; white-space: pre-wrap; }
    .hidden{ display:none !important; }

    input, select, button{ font: inherit; }
    input[type="text"], input[type="time"], input[type="date"], input[type="email"], input[type="password"], select{
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color: var(--text);
    }
    body.light input[type="text"],
    body.light input[type="time"],
    body.light input[type="date"],
    body.light input[type="email"],
    body.light input[type="password"],
    body.light select{
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(0,0,0,.03);
      color: var(--text);
    }

    .topRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .topRight{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .pill{
      display:inline-block;
      padding: 2px 10px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
      background: rgba(255,255,255,.02);
      font-weight: 800;
      white-space: nowrap;
    }
    body.light .pill{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.02);
    }

    .whoamiBtn{
      cursor:pointer;
      position:relative;
      display:inline-flex;
      align-items:center;
      gap: 0;
      border-radius: 999px;
    }
    .whoamiBtn:focus{
      outline: none;
      box-shadow: 0 0 0 3px rgba(61,220,151,.14);
      border-color: rgba(61,220,151,.35);
    }

    .iconBtn{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
      text-decoration: none;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      white-space: nowrap;
    }
    body.light .iconBtn{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }
    .iconBtn:hover{ background: rgba(255,255,255,.06); }
    body.light .iconBtn:hover{ background: rgba(0,0,0,.06); }

    button{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      font-weight: 900;
      white-space: nowrap;
    }
    body.light button{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }
    button:hover{ background: rgba(255,255,255,.06); }
    body.light button:hover{ background: rgba(0,0,0,.06); }
    button:disabled{ opacity:.5; cursor:not-allowed; }

    .cards{ display: grid; grid-template-columns: 1fr; gap: var(--gap); }
    .card{
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .cardHeader{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--panel2);
    }
    .cardTitle{
      font-weight: 800;
      letter-spacing: .2px;
      flex: 1;
      min-width: 200px;
      display:flex;
      align-items: baseline;
      gap: 8px;
    }
    .cardSub{
      font-size: 12px;
      color: var(--muted2);
      font-weight: 700;
    }
    .cardActions{
      display:flex;
      gap: 8px;
      align-items:center;
      flex-wrap: wrap;
    }
    .cardBody{ padding: var(--pad); }
    .card.collapsed .cardBody{ display:none; }
    .grid2{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
      align-items: start;
    }
    .fieldRow{
      display:flex;
      gap: 8px;
      align-items:center;
    }
    .fieldRow > *{ flex: 1; }
    .table{
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,.02);
    }
    .table th, .table td{
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      font-size: 13px;
    }
    .table th{
      font-weight: 900;
      background: rgba(255,255,255,.04);
    }
    body.light .table{
      background: rgba(0,0,0,.02);
    }
    body.light .table th{
      background: rgba(0,0,0,.04);
    }
    .emptyState{
      padding: 20px;
      border: 1px dashed var(--border2);
      border-radius: 12px;
      text-align: center;
      color: var(--muted);
    }

    .dropdownMenu{
      position:absolute;
      right:0;
      top: calc(100% + 6px);
      z-index: 9999;
      min-width: 220px;
      border-radius: 14px;
      box-shadow: 0 18px 55px rgba(0,0,0,.45);
      padding: 6px;
    }
    .dropdownMenu .dropdownItem{
      all: unset;
      box-sizing: border-box;
      width: 100%;
      display:flex;
      align-items:center;
      padding: 10px 12px;
      border-radius: 12px;
      cursor: pointer;
      font: inherit;
      font-weight: 900;
    }
    .dropdownSection{
      padding: 8px 10px;
      display:flex;
      flex-direction: column;
      gap: 6px;
    }
    .dropdownLabel{
      font-size: 11px;
      letter-spacing: .2px;
      text-transform: uppercase;
    }
    .dropdownValue{
      font-size: 13px;
      font-weight: 900;
    }
    .dropdownDivider{
      height: 1px;
      margin: 6px 6px;
    }

    .modalBackdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,1);
      display:none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 999;
    }
    .modal{
      width: min(520px, 100%);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      background: rgba(15,17,21,1);
      box-shadow: 0 20px 60px rgba(0,0,0,.55);
      overflow: hidden;
    }
    body.light .modal{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(246,247,251,1);
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .modalHeader{
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      gap: 12px;
    }
    body.light .modalHeader{
      border-bottom: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.02);
    }
    .modalTitle{
      font-weight: 900;
      display:flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .modalBody{ padding: 14px; }
    .modalFooter{
      padding: 12px 14px;
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      flex-wrap: wrap;
    }
    body.light .modalFooter{ border-top: 1px solid rgba(0,0,0,.10); }
    .modalFooter .rightBtns{
      display:flex;
      gap: 10px;
      align-items:center;
      flex-wrap: wrap;
    }

:root{
      --radius: 18px;
      --radius2: 12px;
      --pad: 14px;
      --gap: 12px;
      --shadow: 0 18px 40px rgba(0,0,0,.45);
    }
    body.light{
      color-scheme: light;
      --shadow: 0 12px 28px rgba(15,23,42,.10);
    }
    *{ box-sizing: border-box; }
    body{
      margin:0;
      font-family: 'Barlow Daxko', 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      color-scheme: dark;
    }
    .page{ max-width: 100%; width: 100%; margin: 0 auto; padding: 18px; }
    h1{ margin: 6px 0 14px; font-size: 22px; letter-spacing: .2px; }
    .muted{ color: var(--muted); }
    .muted2{ color: var(--muted2); }
    .error{ color: var(--danger); margin-top: 10px; white-space: pre-wrap; }
    .hidden{ display:none !important; }

    .topRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .topRight{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .cards{ display:flex; flex-direction: column; gap: var(--gap); }
    .card{
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position: relative;
    }
    .dragHandle{
      width: 28px;
      height: 28px;
      margin-right: 10px;
      opacity: .8;
      cursor: grab;
      display: grid;
      place-items: center;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      flex: 0 0 auto;
      font-size: 20px;
    }
    body.light .dragHandle{
      border:1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.03);
    }
    .dragHandle:active{ cursor: grabbing; }
    .dropPlaceholder{
      height: 14px;
      background: rgba(255,255,255,.08);
      border: 1px dashed rgba(255,255,255,.22);
      border-radius: 999px;
      margin: 10px 10px;
    }
    body.light .dropPlaceholder{
      background: rgba(0,0,0,.08);
      border: 1px dashed rgba(0,0,0,.22);
    }
    .cardHeader{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 12px;
      background: var(--panel2);
      border-bottom: 1px solid var(--border);
      user-select:none;
    }
    .cardTitle{
      font-weight:800; letter-spacing:.2px; flex:1;
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
      min-width:0;
    }
    .cardSub{ font-size:12px; color: var(--muted2); font-weight:700; margin-left:6px; }
    .cardActions{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }
    .cardBody{ padding: var(--pad); }
    .collapsed .cardBody{ display:none; }

    .iconBtn{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
      text-decoration: none;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      white-space: nowrap;
    }
    body.light .iconBtn{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }
    .iconBtn:hover{ background: rgba(255,255,255,.06); }
    body.light .iconBtn:hover{ background: rgba(0,0,0,.06); }

    .modalBackdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.65);
      display:none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 999;
    }
    .modal{
      width: min(860px, 100%);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      background: rgba(15,17,21,1);
      box-shadow: 0 20px 60px rgba(0,0,0,.55);
      overflow: hidden;
    }
    body.light .modal{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(246,247,251,1);
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .modalHeader{
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      gap: 12px;
    }
    body.light .modalHeader{
      border-bottom: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.02);
    }
    .modalTitle{
      font-weight: 900;
      letter-spacing: .2px;
    }
    .modalBody{ padding: 14px; }
    .modalClose{
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.05);
      color: var(--text);
      border-radius: 10px;
      padding: 4px 8px;
      cursor: pointer;
    }
    body.light .modalClose{
      border: 1px solid rgba(0,0,0,.2);
      background: rgba(0,0,0,.05);
    }

    .pill{
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.04);
      color: var(--text);
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 12px;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      white-space: nowrap;
    }
    body.light .pill{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }

    .dropdownMenu{
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      z-index: 9999;
      min-width: 240px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 18px 55px rgba(0,0,0,.45);
      padding: 8px;
    }
    .dropdownMenu .dropdownItem{
      all: unset;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 12px;
      border-radius: 12px;
      cursor: pointer;
      font: inherit;
      font-weight: 800;
      color: var(--text);
    }
    .dropdownMenu .dropdownItem:hover{ background: rgba(255,255,255,.06); }
    body.light .dropdownMenu .dropdownItem:hover{ background: rgba(0,0,0,.06); }
    .dropdownSection{ padding: 8px 10px; }
    .dropdownLabel{
      font-size: 11px;
      letter-spacing: .2px;
      font-weight: 900;
      color: var(--muted2);
      text-transform: uppercase;
    }
    .dropdownValue{
      margin-top: 2px;
      font-size: 12px;
      font-weight: 900;
      color: var(--text);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dropdownDivider{
      height:1px;
      background: rgba(255,255,255,.10);
      margin: 8px 6px;
    }
    body.light .dropdownDivider{ background: rgba(0,0,0,.10); }
    .dangerItem{ border: 1px solid rgba(232,35,107,.22); }
    .dangerItem:hover{ background: rgba(232,35,107,.14); }

  @font-face {
    font-family: 'Barlow Daxko';
    src: url('/assets/Barlow Daxko Weights/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Barlow Daxko';
    src: url('/assets/Barlow Daxko Weights/Barlow-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }
  @font-face {
    font-family: 'Barlow Daxko';
    src: url('/assets/Barlow Daxko Weights/Barlow-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: 'Barlow Daxko';
    src: url('/assets/Barlow Daxko Weights/Barlow-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
  }
  @font-face {
    font-family: 'Barlow Daxko';
    src: url('/assets/Barlow Daxko Weights/Barlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'Barlow Daxko';
    src: url('/assets/Barlow Daxko Weights/Barlow-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }

  :root{
    --bg: #0b0f14;
    --panel: #11161d;
    --panel2: #161c26;
    --border: #1f2a37;
    --border2: #2a3647;
    --text: #e7ebf2;
    --muted: #b6bfcc;
    --muted2: #8b94a3;

    --agility:  #038BED; /* Primary */
    --vitality: #E8236B; /* Danger/Warning */
    --core:     #B81CB5; /* Secondary accent */
    --champion: #FBB03B; /* Caution/Highlight */
    --flex:     #595959; /* Neutral */

    --success:  #037C57;

    --primary:   var(--agility);
    --secondary: var(--core);
    --caution:   var(--champion);
    --danger:    var(--vitality);
    --ok:        var(--success);

    --focusRing: rgba(3,139,237,.22);
    --focusRing2: rgba(3,139,237,.12);

    --radius: 18px;
    --radius2: 12px;
    --shadow: 0 18px 40px rgba(0,0,0,.45);
    --pad: 14px;
    --dayGapPx: 0px;
    --dayGapCount: 0;
    --gap: 12px;
    --ui: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --mono: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --time: var(--ui);

    --rowH: 34px;
    --axisH: 36px;
    --coverageRowH: 18px;

    --vZoom: 2.35; /* vertical sizing only */
    --hZoom: 2.35; /* horizontal timeline zoom */

    --nameW: 180px;
    --timeW: 120px;
    --swapTimeW: 90px;
    --swapColW: 110px;
    --swapCoverageScale: 0.5;
    --swapCoverageW: calc(var(--swapColW) * var(--swapCoverageScale));

    --tickW: 64px;
    --minorTickW: 12px;

    --dayStart: 07:00;
    --dayEnd: 18:00;

    --hoursCount: 22; /* (11 hours * 2 ticks per hour) */
  }

  body.light{
    color-scheme: light;
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel2: #f1f4f9;
    --border: #e3e7ef;
    --border2: #d6dbe6;
    --text: #1f2937;
    --muted: #4b5563;
    --muted2: #6b7280;

    --focusRing: rgba(3,139,237,.18);
    --focusRing2: rgba(3,139,237,.10);
    --shadow: 0 12px 28px rgba(15,23,42,.10);
  }

  * { box-sizing: border-box; }
  body{
    margin:0;
    font-family: var(--ui);
    background: var(--bg);
    color: var(--text);
    color-scheme: dark;
  }
  .page{ max-width: 100%; width: 100%; margin: 0 auto; padding: 18px; }
  h1{ margin: 6px 0 14px; font-size: 22px; letter-spacing: .2px; }
  .muted{ color: var(--muted); }
  .muted2{ color: var(--muted2); }
  .error{ color: var(--danger); margin-top: 10px; white-space: pre-wrap; }
  .ok{ color: var(--ok); }
  .hidden{ display:none !important; }

  .topRow{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .topRight{
    display:flex;
    gap: 10px;
    align-items:center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .cards{ display: grid; grid-template-columns: 1fr; gap: var(--gap); width: 100%; }
  .card{
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .cardHeader{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 12px 12px;
    background: var(--panel2);
    border-bottom: 1px solid var(--border);
    user-select: none;
  }
  .dragHandle{
    width: 18px; height: 18px;
    opacity: .8;
    cursor: grab;
    display:grid;
    place-items:center;
    border-radius: 8px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    flex: 0 0 auto;
  }
  body.light .dragHandle{
    border:1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.03);
  }
  .dragHandle:active{ cursor: grabbing; }
  .cardTitle{ font-weight: 800; letter-spacing: .2px; flex: 1; min-width: 200px; }
  .cardSub{ font-size: 12px; color: var(--muted2); font-weight: 700; margin-left: 8px; }
  .cardActions{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
  .iconBtn{
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    color: var(--text);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    display:inline-flex;
    align-items:center;
    gap: 8px;
    white-space: nowrap;
  }
  body.light .iconBtn{
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(0,0,0,.03);
  }
  .iconBtn:hover{ background: rgba(255,255,255,.06); }
  body.light .iconBtn:hover{ background: rgba(0,0,0,.06); }
  .iconBtn.active{
    border-color: rgba(3,139,237,.55);
    background: rgba(3,139,237,.16);
  }
  body.light .iconBtn.active{
    border-color: rgba(3,139,237,.45);
    background: rgba(3,139,237,.12);
  }
  .cardBody{ padding: var(--pad); }
  .collapsed .cardBody{ display:none; }

  .dropPlaceholder{
    height: 14px;
    background: rgba(255,255,255,.08);
    border: 1px dashed rgba(255,255,255,.22);
    border-radius: 999px;
    margin: 10px 10px;
  }
  body.light .dropPlaceholder{
    background: rgba(0,0,0,.08);
    border: 1px dashed rgba(0,0,0,.22);
  }

  label{ display:block; font-size: 12px; color: var(--muted2); font-weight: 700; margin-bottom: 6px; }
  input, select, button{ font: inherit; }

  .checkRow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 8px;
    justify-content: flex-start;
    text-align: left;
    width: fit-content;
  }
  .checkRow label{
    margin: 0;
    display: inline-block;
    white-space: nowrap;
  }

  input[type="text"], input[type="time"], input[type="date"], input[type="email"], input[type="password"], select{
    width: 100%;
    background: rgba(255,255,255,.03);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 10px 10px;
    outline: none;
  }
  body.light input[type="text"],
  body.light input[type="time"],
  body.light input[type="date"],
  body.light input[type="email"],
  body.light input[type="password"],
  body.light select{
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.14);
  }

  select{ background-color: rgba(255,255,255,.03); }
  body.light select{ background-color: rgba(0,0,0,.03); }

  select option{ background: var(--bg); color: var(--text); }

  select:focus,
  input[type="text"]:focus,
  input[type="time"]:focus,
  input[type="date"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus{
    border-color: rgba(3,139,237,.55);
    box-shadow: 0 0 0 3px var(--focusRing);
  }

  input[type="checkbox"]{ transform: translateY(1px); }

  button{
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 800;
  }
  body.light button{
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(0,0,0,.03);
  }
  button:hover{ background: rgba(255,255,255,.06); }
  body.light button:hover{ background: rgba(0,0,0,.06); }
  button:disabled{ opacity: .5; cursor: not-allowed; }

  .tinyBtn{
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
  }

  .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .grid4{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
  .row{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

  .pill{
    display:inline-block;
    padding: 2px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    font-size: 12px;
    color: var(--muted);
    background: rgba(255,255,255,.02);
    font-weight: 800;
    white-space: nowrap;
  }

  body.light .pill{
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(0,0,0,.02);
  }

  .whoamiBtn{
    cursor:pointer;
    position:relative;
    display:inline-flex;
    align-items:center;
    gap: 0;
    border-radius: 999px;
  }
  .whoamiBtn:focus{
    outline: none;
    box-shadow: 0 0 0 3px var(--focusRing2);
    border-color: rgba(3,139,237,.45);
  }

  .dropdownMenu{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    z-index:1000;
    min-width: 240px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
    padding: 8px;
  }

  .dropdownMenu .dropdownItem{
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    color: var(--text);
  }

  .dropdownMenu .dropdownItem:hover{ background: rgba(255,255,255,.06); }
  body.light .dropdownMenu .dropdownItem:hover{ background: rgba(0,0,0,.06); }

  .dropdownMenu .dangerItem{
    border: 1px solid rgba(232,35,107,.22);
  }
  .dropdownMenu .dangerItem:hover{
    background: rgba(232,35,107,.14);
  }

  .dropdownSection{ padding: 8px 10px; }
  .dropdownLabel{
    font-size: 11px;
    letter-spacing: .2px;
    font-weight: 900;
    color: var(--muted2);
    text-transform: uppercase;
  }
  .dropdownValue{
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 900;
    color: var(--text);
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dropdownDivider{
    height:1px;
    background: rgba(255,255,255,.10);
    margin: 8px 6px;
  }
  body.light .dropdownDivider{ background: rgba(0,0,0,.10); }

  .dangerItem{ border-color: rgba(232,35,107,.16); }
  .dangerItem:hover{ background: rgba(232,35,107,.14); }

  .divider{ height:1px; background: rgba(255,255,255,.10); margin: 10px 0; }
  body.light .divider{ background: rgba(0,0,0,.10); }

  .legendGrid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px 12px;
    margin-top: 8px;
    align-items: start;
  }
  .legendItem{
    display:grid;
    grid-template-columns: 18px 14px 1fr;
    align-items:center;
    column-gap: 10px;
  }
  .legendItem input[type="checkbox"]{
    margin: 0;
    justify-self: start;
  }
  .swatch{
    width: 12px; height: 12px;
    border-radius: 4px;
    border: 1px solid var(--swatch-border, rgba(255,255,255,.22));
    background: var(--swatch-bg, rgba(255,255,255,.08));
    flex: 0 0 auto;
  }
  body.light .swatch{
    border: 1px solid var(--swatch-border, rgba(0,0,0,.22));
    background: var(--swatch-bg, rgba(0,0,0,.08));
  }
  .colorPreview{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.2);
    background: var(--preview-color, #777777);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    flex: 0 0 auto;
  }
  body.light .colorPreview{
    border: 1px solid rgba(0,0,0,.18);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  }

  .blockList{ display:flex; flex-direction: column; gap: 8px; }
  .blockRow{ display:grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items:center; }
  .blockChip{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(0,0,0,.12);
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 10px;
    min-height: 42px;
  }
  body.light .blockChip{
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(0,0,0,.06);
  }
  .blockLeft{ display:flex; align-items:center; gap: 10px; min-width: 0; }
  .blockCat{ font-weight: 900; font-size: 13px; white-space: nowrap; }
  .blockInfo{
    font-size: 12px;
    color: var(--muted2);
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
  }
  .blockTime{
    font-family: var(--time);
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    font-weight: 800;
  }

  .dangerBtn{ border-color: rgba(232,35,107,.55); color: rgba(255,210,226,.95); }
  body.light .dangerBtn{ color: rgba(160,0,0,.92); }
  .dangerBtn:hover{ background: rgba(232,35,107,.14); }
  body.light .dangerBtn:hover{ background: rgba(232,35,107,.10); }

  .formGrid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    align-items: end;
  }
  .formField label{
    min-height: 28px;
    display:flex;
    align-items:flex-end;
  }

  .teamStickyTop{
    position: sticky;
    top: 0;
    z-index: 30;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(15,17,21,1);
    padding: 10px 12px;
    text-align: center;
    font-weight: 900;
    letter-spacing: .2px;
    margin-bottom: 10px;
  }
  body.light .teamStickyTop{
    background: rgba(246,247,251,1);
    border: 1px solid rgba(0,0,0,.10);
  }
  .teamStickyTop .sub{
    display:block;
    margin-top: 2px;
    font-family: var(--time);
    font-weight: 900;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .teamWrap{
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(0,0,0,.10);
    position: relative;
    display: flex;
    justify-content: flex-start;
  }
  body.light .teamWrap{
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.04);
  }

  .teamGrid{ position: relative; width: max-content; margin: 0 auto; }
  .teamGrid.swapAxis{
    min-width: calc(var(--timeW) + (var(--swapCols, 1) * var(--swapColW)));
  }

  .onCallBannerTop{
    text-align: center;
    font-weight: 900;
    color: #6d28d9;
    background: rgba(109,40,217,.12);
    border: 1px solid rgba(109,40,217,.35);
    border-radius: 999px;
    padding: 6px 12px;
  }
  body.light .onCallBannerTop{
    color: #5b21b6;
    background: rgba(109,40,217,.08);
    border: 1px solid rgba(109,40,217,.28);
  }

  .teamAxisRow, .teamRow{ display:grid; grid-template-columns: var(--nameW) 1fr; }
  .teamAxisRow{
    height: calc(var(--axisH) * var(--vZoom));
    border-bottom: 1px solid rgba(255,255,255,.10);
    position: sticky;
    top: 0;
    background: rgba(15,17,21,1);
    z-index: 6;
  }
  body.light .teamAxisRow{
    border-bottom: 1px solid rgba(0,0,0,.10);
    background: rgba(246,247,251,1);
  }

  .axisLeft{
    padding: 8px 10px;
    font-weight: 900;
    border-right: 1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    gap: 10px;
    position: sticky;
    left: 0;
    z-index: 7;
    background: rgba(15,17,21,1);
    min-width: var(--nameW);
    box-shadow: 10px 0 18px rgba(0,0,0,.28);
  }
  body.light .axisLeft{
    border-right: 1px solid rgba(0,0,0,.10);
    background: rgba(246,247,251,1);
  }

  .axisRight{
    position: relative;
    height: calc(var(--axisH) * var(--vZoom));
    width: calc((var(--hoursCount) * var(--tickW) * var(--hZoom)) + (var(--dayGapPx, 0px) * var(--dayGapCount, 0)));
    min-width: calc((var(--hoursCount) * var(--tickW) * var(--hZoom)) + (var(--dayGapPx, 0px) * var(--dayGapCount, 0)));
  }
  .axisTicks{ position:absolute; inset: 0; display:flex; }
  .tick{
    flex: 0 0 auto;
    width: calc(var(--tickW) * var(--hZoom));
    border-right: 1px solid rgba(255,255,255,.08);
    position: relative;
  }
  body.light .tick{ border-right: 1px solid rgba(0,0,0,.08); }
  .tick:last-child{ border-right:none; }
  .tick.major{ border-right: 1px solid rgba(255,255,255,.14); }
  body.light .tick.major{ border-right: 1px solid rgba(0,0,0,.14); }
  .tickGap{
    flex: 0 0 auto;
    width: var(--dayGapPx, 0px);
    background: rgba(0,0,0,.35);
    border-left: 1px solid rgba(255,255,255,.12);
    border-right: 1px solid rgba(255,255,255,.12);
  }
  body.light .tickGap{
    background: rgba(0,0,0,.08);
    border-left: 1px solid rgba(0,0,0,.12);
    border-right: 1px solid rgba(0,0,0,.12);
  }

  .tickLabel{
    position:absolute;
    left: 6px;
    top: 8px;
    font-family: var(--time);
    font-size: calc(12px * (0.92 + (var(--vZoom) - 1) * 0.12));
    color: var(--muted);
    white-space: nowrap;
  }
  .tickLabelBottom{
    top: auto;
    bottom: 6px;
  }

  .teamRow{
    height: calc(var(--rowH) * var(--vZoom));
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  body.light .teamRow{ border-bottom: 1px solid rgba(0,0,0,.06); }
  .teamRow:last-child{ border-bottom:none; }

  .teamNameCell{
    padding: 8px 10px;
    border-right: 1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    gap: 8px;
    font-weight: 900;
    background: rgba(15,17,21,1);
    position: sticky;
    left: 0;
    z-index: 5;
    min-width: var(--nameW);
    box-shadow: 10px 0 18px rgba(0,0,0,.28);
  }
  .teamNameCell .teamNameText{
    display:block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  body.light .teamNameCell{
    border-right: 1px solid rgba(0,0,0,.10);
    background: rgba(246,247,251,1);
  }
  body.light .teamLane,
  body.light .coverageLane{
    background-image: repeating-linear-gradient(
      to right,
      rgba(0,0,0,.08) 0 1px,
      transparent 1px var(--minorTickW)
    ),
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,.18) 0 1px,
      transparent 1px calc(var(--minorTickW) * 6)
    ),
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,.30) 0 2px,
      transparent 2px calc(var(--minorTickW) * 12)
    );
  }

  .teamLane{
    position: relative;
    height: calc(var(--rowH) * var(--vZoom));
    width: calc((var(--hoursCount) * var(--tickW) * var(--hZoom)) + (var(--dayGapPx, 0px) * var(--dayGapCount, 0)));
    min-width: calc((var(--hoursCount) * var(--tickW) * var(--hZoom)) + (var(--dayGapPx, 0px) * var(--dayGapCount, 0)));
    background-image: repeating-linear-gradient(
      to right,
      rgba(255,255,255,.06) 0 1px,
      transparent 1px var(--minorTickW)
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.18) 0 1px,
      transparent 1px calc(var(--minorTickW) * 6)
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.30) 0 2px,
      transparent 2px calc(var(--minorTickW) * 12)
    );
  }
  .dayGap{
    position:absolute;
    top: 0;
    bottom: 0;
    width: var(--dayGapPx, 0px);
    background: rgba(0,0,0,.35);
    border-left: 1px solid rgba(255,255,255,.12);
    border-right: 1px solid rgba(255,255,255,.12);
    pointer-events: none;
  }
  body.light .dayGap{
    background: rgba(0,0,0,.08);
    border-left: 1px solid rgba(0,0,0,.12);
    border-right: 1px solid rgba(0,0,0,.12);
  }

  .bar{
    position:absolute;
    top: calc(8px * var(--vZoom));
    height: calc(18px * var(--vZoom));
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.22);
    display:flex;
    align-items:center;
    padding: 0 8px;
    font-size: calc(12px * (0.92 + (var(--vZoom) - 1) * 0.10));
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    cursor: pointer;
    touch-action: none;
  }
  body.light .bar{ border: 1px solid rgba(0,0,0,.22); }
  .bar.canEdit{ cursor: grab; }
  .bar.dragging{ cursor: grabbing; opacity: .9; }
  .bar.resizing{ cursor: ew-resize; }
  .teamGrid.swapAxis .bar.resizing{ cursor: ns-resize; }
  .bar.selected{
    box-shadow: 0 0 0 2px rgba(61,220,151,.35);
  }
  .bar:hover{
    filter: brightness(1.08);
    box-shadow: 0 0 0 2px rgba(255,255,255,.08);
  }
  body.light .bar:hover{ box-shadow: 0 0 0 2px rgba(0,0,0,.08); }
  .bar.canEdit:hover::before,
  .bar.canEdit:hover::after{
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.55);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    opacity: .75;
    pointer-events: none;
  }
  .bar.canEdit:hover::before{ left: 2px; }
  .bar.canEdit:hover::after{ right: 2px; }
  body.light .bar.canEdit:hover::before,
  body.light .bar.canEdit:hover::after{
    background: rgba(0,0,0,.25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  }
  .teamGrid.swapAxis .bar.canEdit:hover::before,
  .teamGrid.swapAxis .bar.canEdit:hover::after{
    left: 3px;
    right: 3px;
    width: auto;
    height: 6px;
  }
  .teamGrid.swapAxis .bar.canEdit:hover::before{
    top: 2px;
    bottom: auto;
  }
  .teamGrid.swapAxis .bar.canEdit:hover::after{
    bottom: 2px;
    top: auto;
  }
  .bar small{ font-weight: 800; opacity: .85; margin-left: 8px; font-family: var(--time); }

  .rangeSelect{
    position:absolute;
    top: 2px;
    height: calc(100% - 4px);
    border-radius: 10px;
    border: 1px dashed rgba(61,220,151,.75);
    background: rgba(61,220,151,.18);
    pointer-events: none;
    z-index: 19;
  }
  body.light .rangeSelect{
    border: 1px dashed rgba(27,155,103,.65);
    background: rgba(27,155,103,.18);
  }
  .rangeSelect.swap{
    left: 6px;
    right: 6px;
    width: calc(100% - 12px);
    border-radius: 8px;
  }

  .swapAxisRow{
    display:grid;
    grid-template-columns: var(--swapTimeW, var(--timeW)) 1fr;
    position: sticky;
    top: 0;
    z-index: 6;
    background: rgba(15,17,21,1);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  body.light .swapAxisRow{
    background: rgba(246,247,251,1);
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
  .swapAxisLeft{
    padding: 8px 10px;
    font-weight: 900;
    border-right: 1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    position: sticky;
    left: 0;
    z-index: 7;
    background: rgba(15,17,21,1);
    width: var(--swapTimeW, var(--timeW));
    max-width: var(--swapTimeW, var(--timeW));
    min-width: var(--swapTimeW, var(--timeW));
    box-shadow: 10px 0 18px rgba(0,0,0,.28);
    overflow: hidden;
  }
  body.light .swapAxisLeft{
    border-right: 1px solid rgba(0,0,0,.10);
    background: rgba(246,247,251,1);
  }
  .swapAxisRight{
    width: calc(var(--swapCols, 1) * var(--swapColW));
    min-width: calc(var(--swapCols, 1) * var(--swapColW));
  }
  .swapHeaderRow{
    display:flex;
  }
  .swapHeaderGroupRow{
    display:flex;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  body.light .swapHeaderGroupRow{
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .swapHeaderSubRow{
    display:flex;
  }
  .swapStaffGroup{
    padding: 8px 10px;
    font-weight: 900;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.light .swapStaffGroup{ border-right: 1px solid rgba(0,0,0,.08); }
  .swapStaffGroup.sep{
    border-right: 2px solid rgba(255,255,255,.20);
  }
  body.light .swapStaffGroup.sep{
    border-right: 2px solid rgba(0,0,0,.18);
  }
  .swapDayHead{
    width: var(--swapColW);
    min-width: var(--swapColW);
    padding: 6px 8px;
    font-weight: 800;
    font-size: 11px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.08);
    white-space: nowrap;
  }
  body.light .swapDayHead{ border-right: 1px solid rgba(0,0,0,.08); }
  .swapDayHead.sep{
    border-right: 2px solid rgba(255,255,255,.20);
  }
  body.light .swapDayHead.sep{
    border-right: 2px solid rgba(0,0,0,.18);
  }
  .swapStaffHead{
    width: var(--swapColW);
    min-width: var(--swapColW);
    padding: 8px 10px;
    font-weight: 900;
    border-right: 1px solid rgba(255,255,255,.08);
    white-space: normal;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.light .swapStaffHead{ border-right: 1px solid rgba(0,0,0,.08); }

  .swapBody{
    display:grid;
    grid-template-columns: var(--swapTimeW, var(--timeW)) 1fr;
  }
  .swapTimeCol{
    position: sticky;
    left: 0;
    z-index: 5;
    background: rgba(15,17,21,1);
    border-right: 1px solid rgba(255,255,255,.10);
    width: var(--swapTimeW, var(--timeW));
    max-width: var(--swapTimeW, var(--timeW));
    min-width: var(--swapTimeW, var(--timeW));
    box-shadow: 10px 0 18px rgba(0,0,0,.28);
    overflow: hidden;
  }
  body.light .swapTimeCol{
    background: rgba(246,247,251,1);
    border-right: 1px solid rgba(0,0,0,.10);
  }
  .swapTimeCell{
    height: var(--swapTickH, 24px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display:flex;
    align-items:flex-start;
    padding: 4px 10px 0;
    font-family: var(--time);
    font-weight: 900;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.light .swapTimeCell{ border-bottom: 1px solid rgba(0,0,0,.06); }

  .swapLanes{
    display:flex;
    width: calc(var(--swapCols, 1) * var(--swapColW));
    min-width: calc(var(--swapCols, 1) * var(--swapColW));
  }
  .swapStaffLane{
    position: relative;
    width: var(--swapColW);
    min-width: var(--swapColW);
    height: var(--swapTotalH, 400px);
    border-right: 1px solid rgba(255,255,255,.08);
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0 1px,
      transparent 1px var(--minorTickH, 10px)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.18) 0 1px,
      transparent 1px calc(var(--minorTickH, 10px) * 6)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.30) 0 2px,
      transparent 2px calc(var(--minorTickH, 10px) * 12)
    );
  }
  body.light .swapStaffLane{
    border-right: 1px solid rgba(0,0,0,.08);
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.08) 0 1px,
      transparent 1px var(--minorTickH, 10px)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.18) 0 1px,
      transparent 1px calc(var(--minorTickH, 10px) * 6)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.30) 0 2px,
      transparent 2px calc(var(--minorTickH, 10px) * 12)
    );
  }
  .swapStaffLane.sep{
    border-right: 2px solid rgba(255,255,255,.20);
  }
  body.light .swapStaffLane.sep{
    border-right: 2px solid rgba(0,0,0,.18);
  }
  .swapCoverageLane{
    position: relative;
    width: var(--swapCoverageW);
    min-width: var(--swapCoverageW);
    height: var(--swapTotalH, 400px);
    border-right: 1px solid rgba(255,255,255,.18);
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px var(--minorTickH, 10px)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.14) 0 1px,
      transparent 1px calc(var(--minorTickH, 10px) * 6)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.22) 0 2px,
      transparent 2px calc(var(--minorTickH, 10px) * 12)
    );
    display:flex;
    flex-direction: column;
  }
  .swapCoverageLane.sep{
    border-right: 2px solid rgba(255,255,255,.20);
  }
  body.light .swapCoverageLane{
    border-right: 1px solid rgba(0,0,0,.18);
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.06) 0 1px,
      transparent 1px var(--minorTickH, 10px)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.16) 0 1px,
      transparent 1px calc(var(--minorTickH, 10px) * 6)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.24) 0 2px,
      transparent 2px calc(var(--minorTickH, 10px) * 12)
    );
  }
  body.light .swapCoverageLane.sep{
    border-right: 2px solid rgba(0,0,0,.18);
  }
  .swapCoverageLane .coverageCell{
    position: static;
    width: 100%;
    min-width: 18px;
    height: var(--swapTickH, 22px);
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 11px;
    padding: 0 4px;
  }
  body.light .swapCoverageLane .coverageCell{
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  .teamGrid.swapAxis .bar{
    left: 6px;
    right: 22px;
    width: calc(100% - 28px);
    align-items: flex-start;
    flex-direction: column;
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: normal;
  }
  .teamGrid.swapAxis .bar small{
    margin-left: 0;
    margin-top: 2px;
  }
  .teamGrid.swapAxis .bar span{
    display:block;
    width:100%;
    white-space: normal;
  }

  .nowLine.swapLine{
    height: 2px;
    width: 100%;
    left: 0;
    bottom: auto;
  }
  .nowTag.swapTag{
    transform: translateY(-50%);
    left: 6px;
  }

  .coverageName{
    font-weight: 1000;
    letter-spacing: .2px;
    color: var(--text);
  }
  .coverageRow{
    height: calc(var(--coverageRowH) * var(--vZoom));
  }
  .coverageLane{
    position: relative;
    height: calc(var(--coverageRowH) * var(--vZoom));
    width: calc((var(--hoursCount) * var(--tickW) * var(--hZoom)) + (var(--dayGapPx, 0px) * var(--dayGapCount, 0)));
    min-width: calc((var(--hoursCount) * var(--tickW) * var(--hZoom)) + (var(--dayGapPx, 0px) * var(--dayGapCount, 0)));
    background-image: repeating-linear-gradient(
      to right,
      rgba(255,255,255,.06) 0 1px,
      transparent 1px var(--minorTickW)
    );
  }
  .coverageCell{
    position:absolute;
    top: calc(2px * var(--vZoom));
    height: calc(12px * var(--vZoom));
    width: calc(var(--tickW) * var(--hZoom));
    min-width: 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: var(--mono);
    font-weight: 1000;
    font-size: calc(11px * (0.90 + (var(--vZoom) - 1) * 0.10));
    border-radius: 10px;
    border: 1px solid rgba(3,139,237,.45);
    background: rgba(3,139,237,.12);
    color: var(--text);
    user-select: none;
    pointer-events: none;
    padding: 0 4px;
    white-space: nowrap;
    overflow: visible;
  }
  body.light .coverageCell{
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.04);
    color: rgba(15,17,21,.92);
  }
  .coverageCell.band-0{
    background: var(--cov-band-0, #BDBDBD) !important;
    border-color: var(--cov-band-0, #BDBDBD) !important;
    color: var(--cov-band-0-text, #fff) !important;
  }
  .coverageCell.band-1{
    background: var(--cov-band-1, #FF4D4D) !important;
    border-color: var(--cov-band-1, #FF4D4D) !important;
    color: var(--cov-band-1-text, #fff) !important;
  }
  .coverageCell.band-2{
    background: var(--cov-band-2, #FFD600) !important;
    border-color: var(--cov-band-2, #FFD600) !important;
    color: var(--cov-band-2-text, #222) !important;
  }
  .coverageCell.band-3{
    background: var(--cov-band-3, #3DDC97) !important;
    border-color: var(--cov-band-3, #3DDC97) !important;
    color: var(--cov-band-3-text, #fff) !important;
  }

  .nowLine{
    position:absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(61,220,151,.95);
    box-shadow: 0 0 0 2px rgba(61,220,151,.18);
    z-index: 50;
    pointer-events: none;
  }
  .nowTag{
    position:absolute;
    top: 6px;
    transform: translateX(-50%);
    background: rgba(61,220,151,.16);
    border: 1px solid rgba(61,220,151,.55);
    color: var(--text);
    font-family: var(--mono);
    font-weight: 900;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    z-index: 51;
    pointer-events: none;
    white-space: nowrap;
  }

  .modalBackdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,1);
    display:none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 999;
  }
  .modal{
    width: min(860px, 100%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(15,17,21,1);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    overflow: hidden;
  }
  body.light .modal{
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(246,247,251,1);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
  }
  .modalHeader{
    padding: 12px 14px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    gap: 12px;
  }
  body.light .modalHeader{
    border-bottom: 1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.02);
  }
  .modalTitle{
    font-weight: 900;
    display:flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .modalTitle small{
    color: var(--muted2);
    font-weight: 800;
    font-family: var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .modalBody{ padding: 14px; }
  .modalFooter{
    padding: 12px 14px;
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
    flex-wrap: wrap;
  }
  body.light .modalFooter{ border-top: 1px solid rgba(0,0,0,.10); }
  .modalFooter .rightBtns{
    display:flex;
    gap: 10px;
    align-items:center;
    flex-wrap: wrap;
  }
  #aeStaffMulti option:checked{
    background: rgba(56,189,248,.35);
    color: #fff;
  }
  body.light #aeStaffMulti option:checked{
    background: rgba(14,165,233,.25);
    color: #111827;
  }

  table{ width:100%; border-collapse: collapse; }
  th, td{
    border: 1px solid rgba(255,255,255,.10);
    padding: 8px 10px;
    font-size: 12px;
    vertical-align: top;
  }
  body.light th, body.light td{ border: 1px solid rgba(0,0,0,.10); }
  th{ text-align:left; font-weight: 900; color: var(--muted); }
  .mono{ font-family: var(--mono); }

  @media (max-width: 980px){
    .grid4{ grid-template-columns: 1fr 1fr; }
    .formGrid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 840px){
    .grid2, .grid3, .grid4{ grid-template-columns: 1fr; }
    .legendGrid{ grid-template-columns: 1fr; }
    .formGrid{ grid-template-columns: 1fr; }
  }

:root{
      --bg:#0b0f14;
      --panel:#11161d;
      --border:#1f2a37;
      --text:#e7ebf2;
      --muted:#8b94a3;
      --danger:#ff5b5b;
      --ok:#3ccf91;
      --radius:18px;
      --shadow: 0 18px 40px rgba(0,0,0,.45);
    }

    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font:14px/1.45 "Barlow Daxko","Barlow",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    }

    .wrap{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    .logo{
      display:block;
      max-width: 220px;
      width: 60%;
      height: auto;
      margin: 0 auto;
    }

    .logoTop{ margin-bottom: 10px; }
    .logoBottom{ margin-top: 30px; }

    .card{
      width:min(520px,100%);
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      padding:22px;
    }

    h1{margin:0 0 6px;font-size:18px}
    p{margin:0 0 14px;color:var(--muted)}

    label{display:block;margin:10px 0 6px;color:var(--muted)}

    input{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      color:var(--text);
      outline:none;
    }

    .row{
      display:flex;
      gap:10px;
      align-items:center;
      margin-top:14px;
    }

    button{
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.06);
      color:var(--text);
      cursor:pointer;
    }

    button.primary{
      background:#0ea5e9;
      border-color:#0ea5e9;
      color:#fff;
    }

    #signOutBtn{
      background:#595959;
      border-color:#595959;
      color:#fff;
    }

    button:disabled{
      opacity:.55;
      cursor:not-allowed;
    }

    .status{margin-top:12px;color:var(--muted)}
    .status.ok{color:var(--ok)}
    .status.bad{color:var(--danger)}

    .tiny{
      margin-top:10px;
      font-size:12px;
      color:var(--muted);
    }

    .linkBtn{
      background:none;
      border:none;
      padding:0;
      color:#038BED;
      cursor:pointer;
      font:inherit;
      text-decoration:underline;
    }

    code{
      font-family:"Barlow Daxko","Barlow",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    }

html[data-theme="light"], html[data-theme="light"] body { background: #f5f7fb; }
    html[data-theme="dark"], html[data-theme="dark"] body { background: #0b0f14; }

:root{
      --radius: 16px;
      --radius2: 12px;
      --pad: 14px;
      --gap: 12px;
      --ui: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --mono: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    body{
      margin:0;
      font-family: var(--ui);
      background: var(--bg);
      color: var(--text);
      color-scheme: dark;
    }
    body.light{ color-scheme: light; }
    .page{ max-width: 100%; width: 100%; margin: 0 auto; padding: 18px; }
    h1{ margin: 6px 0 14px; font-size: 22px; letter-spacing: .2px; }
    .muted{ color: var(--muted); }
    .muted2{ color: var(--muted2); }
    .error{ color: var(--danger); margin-top: 10px; white-space: pre-wrap; }
    .hidden{ display:none !important; }

    .topRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .topRight{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .pill{
      display:inline-block;
      padding: 2px 10px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
      background: rgba(255,255,255,.02);
      font-weight: 800;
      white-space: nowrap;
    }
    body.light .pill{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.02);
    }

    .whoamiBtn{
      cursor:pointer;
      position:relative;
      display:inline-flex;
      align-items:center;
      gap: 0;
      border-radius: 999px;
    }
    .whoamiBtn:focus{
      outline: none;
      box-shadow: 0 0 0 3px rgba(61,220,151,.14);
      border-color: rgba(61,220,151,.35);
    }

    .dropdownMenu{
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      z-index:1000;
      min-width: 240px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 18px 55px rgba(0,0,0,.45);
      padding: 8px;
    }
    .dropdownMenu .dropdownItem{
      all: unset;
      box-sizing: border-box;
      width: 100%;
      display:flex;
      align-items:center;
      padding: 10px 12px;
      border-radius: 12px;
      cursor: pointer;
      font: inherit;
      font-weight: 800;
      color: var(--text);
    }
    .dropdownMenu .dropdownItem:hover{ background: rgba(255,255,255,.06); }
    body.light .dropdownMenu .dropdownItem:hover{ background: rgba(0,0,0,.06); }
    .dropdownSection{ padding: 8px 10px; }
    .dropdownLabel{
      font-size: 11px;
      letter-spacing: .2px;
      font-weight: 900;
      color: var(--muted2);
      text-transform: uppercase;
    }
    .dropdownValue{
      margin-top: 2px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 900;
      color: var(--text);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dropdownDivider{
      height:1px;
      background: rgba(255,255,255,.10);
      margin: 8px 6px;
    }
    body.light .dropdownDivider{ background: rgba(0,0,0,.10); }

    .modalBackdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,1);
      display:none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 999;
    }
    .modal{
      width: min(520px, 100%);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      background: rgba(15,17,21,1);
      box-shadow: 0 20px 60px rgba(0,0,0,.55);
      overflow: hidden;
    }
    body.light .modal{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(246,247,251,1);
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .modalHeader{
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      gap: 12px;
    }
    body.light .modalHeader{
      border-bottom: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.02);
    }
    .modalTitle{
      font-weight: 900;
      display:flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .modalBody{ padding: 14px; }
    .modalFooter{
      padding: 12px 14px;
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      flex-wrap: wrap;
    }
    body.light .modalFooter{ border-top: 1px solid rgba(0,0,0,.10); }
    .modalFooter .rightBtns{
      display:flex;
      gap: 10px;
      align-items:center;
      flex-wrap: wrap;
    }

    .iconBtn{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
      text-decoration: none;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      white-space: nowrap;
    }
    body.light .iconBtn{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }
    .iconBtn:hover{ background: rgba(255,255,255,.06); }
    body.light .iconBtn:hover{ background: rgba(0,0,0,.06); }
    .iconBtn.active{
      background: var(--focusRing) !important;
      border-color: rgba(56,189,248,.7) !important;
      color: var(--text) !important;
      box-shadow: 0 0 0 1px rgba(56,189,248,.35), 0 6px 16px rgba(56,189,248,.22);
    }
    body.light .iconBtn.active{
      background: var(--focusRing) !important;
      border-color: rgba(14,165,233,.7) !important;
      color: var(--text) !important;
      box-shadow: 0 0 0 1px rgba(14,165,233,.35), 0 6px 16px rgba(14,165,233,.18);
    }

    button{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      font-weight: 900;
      white-space: nowrap;
    }
    body.light button{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }
    button:hover{ background: rgba(255,255,255,.06); }
    body.light button:hover{ background: rgba(0,0,0,.06); }
    button:disabled{ opacity:.5; cursor:not-allowed; }

    .cards{ display: grid; grid-template-columns: 1fr; gap: var(--gap); }
    .card{
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .dragHandle{
      width: 28px;
      height: 28px;
      margin-right: 10px;
      opacity: .8;
      cursor: grab;
      display: grid;
      place-items: center;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      flex: 0 0 auto;
      font-size: 20px;
    }
    body.light .dragHandle{
      border:1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.03);
    }
    .dragHandle:active{ cursor: grabbing; }
    .dropPlaceholder{
      height: 14px;
      background: rgba(255,255,255,.08);
      border: 1px dashed rgba(255,255,255,.22);
      border-radius: 999px;
      margin: 10px 10px;
    }
    body.light .dropPlaceholder{
      background: rgba(0,0,0,.08);
      border: 1px dashed rgba(0,0,0,.22);
    }
    .cardHeader{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 12px;
      background: var(--panel2);
      border-bottom: 1px solid var(--border);
      user-select: none;
    }
    .cardTitle{
      font-weight: 800;
      letter-spacing: .2px;
      flex: 1;
      min-width: 200px;
    }
    .cardSub{
      color: var(--muted2);
      font-size: 12px;
      font-weight: 700;
      margin-left: 8px;
    }
    .cardActions{
      display:flex;
      gap: 8px;
      align-items:center;
      flex-wrap: wrap;
    }
    .cardBody{ padding: var(--pad); }
    .card.collapsed .cardBody{ display:none; }

    .tableWrap{ overflow:auto; border-radius: 12px; border: 1px solid var(--border); }
    table{ width:100%; border-collapse: collapse; font-size: 13px; }
    th, td{ padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
    td[data-col]{
      text-align: center;
    }
    th{ font-weight: 900; background: rgba(255,255,255,.02); }
    body.light th{ background: rgba(0,0,0,.02); }

    .trendCell{
      display:flex;
      flex-direction: column;
      gap: 4px;
      min-width: 90px;
    }
    .trendDelta{
      font-size: 11px;
      font-weight: 800;
      color: var(--muted2);
    }
    .trendDeptInlineRow .trendDelta{
      display: none;
    }
    .trendDeptInlineCell{
      vertical-align: top;
    }
    .trendDeptInlineRow td{
      font-weight: 800;
    }
    .trendDeptLabel{
      font-weight: 800;
      color: var(--muted2);
    }
    .trendDeptSubRow td{
      background: rgba(255,255,255,0.03);
      padding-top: 6px;
      padding-bottom: 8px;
    }
    body.light .trendDeptSubRow td{
      background: rgba(0,0,0,0.03);
    }
    .trendDelta.positive{ color: #3ddc97; }
    .trendDelta.negative{ color: #ff7b7b; }
    .trendMeta{ font-size: 12px; color: var(--muted2); }
    .trendGroupRow td{
      background: rgba(255,255,255,0.06);
      font-weight: 800;
      letter-spacing: 0.2px;
    }
    body.light .trendGroupRow td{
      background: rgba(0,0,0,0.06);
    }
    .trendGroupTop{
      display:flex;
      align-items:center;
      gap: 8px;
    }
    .trendTeamHeader td{
      background: rgba(255,255,255,0.04);
      font-weight: 800;
      letter-spacing: 0.2px;
    }
    body.light .trendTeamHeader td{
      background: rgba(0,0,0,0.04);
    }
    .trendTeamHeader td:first-child{
      padding-left: 18px;
    }
    .trendTeamToggle{
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      border-radius: 8px;
      font-weight: 900;
      padding: 2px 8px;
      margin-right: 8px;
      cursor: pointer;
    }
    body.light .trendTeamToggle{
      background: rgba(0,0,0,0.06);
    }
    .trendMemberRow td:first-child{
      padding-left: 26px;
    }
    .trendDeptAverageRow td{
      font-weight: 800;
      background: rgba(255,255,255,0.03);
    }
    body.light .trendDeptAverageRow td{
      background: rgba(0,0,0,0.03);
    }
    .trendTag{
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    body.light .trendTag{
      background: rgba(0,0,0,0.06);
    }
    .metricsControlsRow,
    .trendControlsRow{
      align-items:flex-end;
    }
    .metricsControlsRow .iconBtn,
    .trendControlsRow .iconBtn{
      height: 40px;
      display: inline-flex;
      align-items: center;
    }
    .trendControlsRow .trendTag{
      height: 40px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
    }
    .metricsControlsRow .iconBtn,
    .trendControlsRow .iconBtn,
    .trendControlsRow .trendTag{
      margin-top: 22px;
    }
    .trendFilterGrid{
      display:grid;
      grid-template-columns: repeat(4, minmax(180px, 1fr));
      gap: 4px 12px;
      margin-top: 6px;
      align-items: start;
    }
    .trendFilterItem{
      display:grid;
      grid-template-columns: 18px 1fr;
      align-items:center;
      column-gap: 8px;
      font-size: 12px;
      color: var(--muted2);
      font-weight: 700;
      min-width: 0;
      justify-items: start;
    }
    .trendFilterItem span{
      min-width: 0;
      white-space: normal;
      line-height: 1.2;
    }

html[data-theme="light"], html[data-theme="light"] body { background: #f5f7fb; }
    html[data-theme="dark"], html[data-theme="dark"] body { background: #0b0f14; }

:root{

      --radius: 16px;
      --radius2: 12px;
      --pad: 14px;
      --gap: 12px;
      --ui: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --mono: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

.kebabWrap{ position: relative; display:inline-flex; }
.kebabBtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}
body.light .kebabBtn{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
}
.kebabBtn:hover{ background: rgba(255,255,255,.06); }
body.light .kebabBtn:hover{ background: rgba(0,0,0,.06); }

.kebabMenu{
  position:absolute;
  right:0;
  top: calc(100% + 6px);
  z-index: 9999;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  padding: 6px;
}
.kebabItem{
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display:flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  color: var(--text);
}
.kebabItem:hover{ background: rgba(255,255,255,.06); }
body.light .kebabItem:hover{ background: rgba(0,0,0,.06); }

.kebabDanger{
  border: 1px solid rgba(255,77,77,.18);
}
.kebabDanger:hover{
  background: rgba(255,77,77,.12);
}

    .reportColHead{
      cursor: grab;
      user-select: none;
    }
    .reportColHead.dragOver{
      outline: 2px dashed rgba(255,255,255,.35);
      outline-offset: -4px;
    }
    body.light .reportColHead.dragOver{
      outline: 2px dashed rgba(0,0,0,.25);
    }

    body.light{
      color-scheme: light;
    }

    * { box-sizing: border-box; }
    body{
      margin:0;
      font-family: var(--ui);
      background: var(--bg);
      color: var(--text);
      color-scheme: dark;
    }
    .page{ max-width: 100%; width: 100%; margin: 0 auto; padding: 18px; }
    h1{ margin: 6px 0 14px; font-size: 22px; letter-spacing: .2px; }
    .muted{ color: var(--muted); }
    .muted2{ color: var(--muted2); }
    .error{ color: var(--danger); margin-top: 10px; white-space: pre-wrap; }
    .ok{ color: var(--ok); }
    .hidden{ display:none !important; }

    .topRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .topRight{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .cards{ display: grid; grid-template-columns: 1fr; gap: var(--gap); }
    .card{
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .dragHandle{
      width: 28px;
      height: 28px;
      margin-right: 10px;
      opacity: .8;
      cursor: grab;
      display: grid;
      place-items: center;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      flex: 0 0 auto;
      font-size: 20px;
    }
    body.light .dragHandle{
      border:1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.03);
    }
    .dragHandle:active{ cursor: grabbing; }
    .dropPlaceholder{
      height: 14px;
      background: rgba(255,255,255,.08);
      border: 1px dashed rgba(255,255,255,.22);
      border-radius: 999px;
      margin: 10px 10px;
    }
    body.light .dropPlaceholder{
      background: rgba(0,0,0,.08);
      border: 1px dashed rgba(0,0,0,.22);
    }
    .cardHeader{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 12px;
      background: var(--panel2);
      border-bottom: 1px solid var(--border);
      user-select: none;
    }
    .cardTitle{ font-weight: 800; letter-spacing: .2px; flex: 1; min-width: 200px; }
    .cardSub{ font-size: 12px; color: var(--muted2); font-weight: 700; margin-left: 8px; }
    .cardActions{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }

    .iconBtn{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
      text-decoration: none;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      white-space: nowrap;
    }
    body.light .iconBtn{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }
    .iconBtn:hover{ background: rgba(255,255,255,.06); }
    body.light .iconBtn:hover{ background: rgba(0,0,0,.06); }

    .cardBody{ padding: var(--pad); }
    .collapsed .cardBody{ display:none; }

    label{ display:block; font-size: 12px; color: var(--muted2); font-weight: 700; margin-bottom: 6px; }
    input, select, button{ font: inherit; }

    input[type="text"], input[type="time"], input[type="date"], input[type="email"], input[type="password"], select{
      width: 100%;
      background: rgba(255,255,255,.03);
      color: var(--text);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      padding: 10px 10px;
      outline: none;
    }
    body.light input[type="text"],
    body.light input[type="time"],
    body.light input[type="date"],
    body.light input[type="email"],
    body.light input[type="password"],
    body.light select{
      background: rgba(0,0,0,.03);
      border: 1px solid rgba(0,0,0,.14);
    }

    select{ background-color: rgba(255,255,255,.03); }
    body.light select{ background-color: rgba(0,0,0,.03); }
    select option{ background: var(--bg); color: var(--text); }

    select:focus{
      border-color: rgba(61,220,151,.45);
      box-shadow: 0 0 0 3px rgba(61,220,151,.10);
    }

    button{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      font-weight: 800;
    }
    body.light button{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }
    button:hover{ background: rgba(255,255,255,.06); }
    body.light button:hover{ background: rgba(0,0,0,.06); }
    button:disabled{ opacity: .5; cursor: not-allowed; }

    .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .grid4{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
    .row{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

    .pill{
      display:inline-block;
      padding: 2px 10px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
      background: rgba(255,255,255,.02);
      font-weight: 800;
      white-space: nowrap;
    }
    body.light .pill{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.02);
    }

    .whoamiBtn{
      cursor:pointer;
      position:relative;
      display:inline-flex;
      align-items:center;
      gap: 0;
      border-radius: 999px;
    }
    .whoamiBtn:focus{
      outline: none;
      box-shadow: 0 0 0 3px rgba(61,220,151,.14);
      border-color: rgba(61,220,151,.35);
    }

    .dropdownMenu{
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      z-index:1000;
      min-width: 240px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 18px 55px rgba(0,0,0,.45);
      padding: 8px;
    }
    body.light .dropdownMenu{
      background: #fff;
      border-color: rgba(0,0,0,.12);
    }

    .dropdownMenu .dropdownItem{
      all: unset;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 12px;
      border-radius: 12px;
      cursor: pointer;
      font: inherit;
      font-weight: 800;
      color: var(--text);
    }
    .dropdownMenu .dropdownItem:hover{ background: rgba(255,255,255,.06); }
    body.light .dropdownMenu .dropdownItem:hover{ background: rgba(0,0,0,.06); }

    .dropdownSection{ padding: 8px 10px; }
    .dropdownLabel{
      font-size: 11px;
      letter-spacing: .2px;
      font-weight: 900;
      color: var(--muted2);
      text-transform: uppercase;
    }
    .dropdownValue{
      margin-top: 2px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 900;
      color: var(--text);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dropdownDivider{
      height:1px;
      background: rgba(255,255,255,.10);
      margin: 8px 6px;
    }
    body.light .dropdownDivider{ background: rgba(0,0,0,.10); }

    .dangerItem{ border: 1px solid rgba(255,77,77,.18); }
    .dangerItem:hover{ background: rgba(255,77,77,.12); }

    .divider{ height:1px; background: rgba(255,255,255,.10); margin: 10px 0; }
    body.light .divider{ background: rgba(0,0,0,.10); }

    table{ width:100%; border-collapse: collapse; }
    th, td{
      border: 1px solid rgba(255,255,255,.10);
      padding: 8px 10px;
      font-size: 12px;
      vertical-align: top;
    }
    body.light th, body.light td{ border: 1px solid rgba(0,0,0,.10); }
    th{ text-align:left; font-weight: 900; color: var(--muted); }
    .mono{ font-family: var(--mono); }

    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 12px;
      font-weight: 900;
      color: var(--muted);
      white-space: nowrap;
    }
    body.light .tag{
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.03);
    }

    @media (max-width: 980px){
      .grid3, .grid4{ grid-template-columns: 1fr; }
    }
.modalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 2000;
}
body.light .modalBackdrop{ background: rgba(0,0,0,.35); }

  .modal{
    width: min(1100px, 99vw);
    min-height: 750px;
    max-height: 98vh;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 22px 70px rgba(0,0,0,.55);
    overflow: auto;
  }
  .modal.modal-compact{
    min-height: auto;
    max-height: 98vh;
  }
.modalHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
body.light .modalHeader{ border-bottom: 1px solid rgba(0,0,0,.10); }

.modalTitle{ font-weight: 900; letter-spacing: .2px; }
.modalBody{ padding: 14px; }
.modalFooter{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
body.light .modalFooter{ border-top: 1px solid rgba(0,0,0,.10); }

.modalClose{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 900;
}
body.light .modalClose{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
}

.modalError{ color: var(--danger); font-weight: 800; margin-top: 10px; white-space: pre-wrap; }

html[data-theme="light"], html[data-theme="light"] body { background: #f5f7fb; }
    html[data-theme="dark"], html[data-theme="dark"] body { background: #0b0f14; }

*{ box-sizing:border-box; }
    html, body { height:100%; }

    :root{
      --panel3: #161c26;

      --shadow: 0 18px 40px rgba(0,0,0,.45);

      --radius: 18px;
      --radius2: 12px;
      --pad: 14px;
      --gap: 12px;

      --ui: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --mono: "Barlow Daxko", "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

      --ctrl-bg: rgba(255,255,255,.03);
      --ctrl-bg-hover: rgba(255,255,255,.06);
      --ctrl-border: rgba(255,255,255,.14);
      --ctrl-ring: rgba(61,220,151,.18);

      --table-bg: rgba(0,0,0,.16);
      --table-border: rgba(255,255,255,.10);
      --table-row: rgba(255,255,255,.02);
    }

    html[data-theme="light"]{
      --panel3: #f1f4f9;

      --shadow: 0 12px 28px rgba(15,23,42,.10);

      --ctrl-bg: rgba(0,0,0,.03);
      --ctrl-bg-hover: rgba(0,0,0,.06);
      --ctrl-border: rgba(0,0,0,.16);
      --ctrl-ring: rgba(27,155,103,.18);

      --table-bg: rgba(255,255,255,.78);
      --table-border: rgba(0,0,0,.10);
      --table-row: rgba(0,0,0,.02);

      --ui-surface: rgba(0,0,0,.03);
      --ui-surface-hover: rgba(0,0,0,.06);
    }

    body{
      margin:0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--ui);
    }

    .page{ max-width: 100%; width: 100%; margin:0 auto; padding:18px; }
    h1{ margin:6px 0 14px; font-size:22px; letter-spacing:.2px; line-height:1.2; }

    .topRow{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .topRight{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .muted{ color: var(--muted); }
    .muted2{ color: var(--muted2); }
    .error{ color: var(--danger); margin-top:10px; white-space:pre-wrap; }
    .hidden{ display:none !important; }

    .cards{ display:grid; grid-template-columns:1fr; gap: var(--gap); }

    .card{
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .cardHeader{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 12px;
      background: var(--panel3);
      border-bottom: 1px solid var(--border);
      user-select:none;
    }

    .cardTitle{
      font-weight:800; letter-spacing:.2px; flex:1;
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
      min-width:0;
    }
    .cardSub{
      font-size:12px; color: var(--muted2);
      font-weight:700; margin-left:6px;
    }
    .cardActions{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }
    .cardBody{ padding: var(--pad); }
    .collapsed .cardBody{ display:none; }

    .iconBtn{
      border: 1px solid var(--ctrl-border);
      background: var(--ctrl-bg);
      color: var(--text);
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
      font-weight: 800;
      font-size: 12px;
      text-decoration: none;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      white-space: nowrap;
    }
    .iconBtn:hover{ background: var(--ctrl-bg-hover); }

    button{
      border: 1px solid var(--ctrl-border);
      background: var(--ctrl-bg);
      color: var(--text);
      border-radius:12px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:900;
      white-space:nowrap;
    }
    button:hover{ background: var(--ctrl-bg-hover); }
    button:disabled{ opacity:.5; cursor:not-allowed; }

    input, select, button{ font:inherit; }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="time"],
    input[type="date"],
    select{
      width:100%;
      min-width:0;
      background: var(--ctrl-bg);
      color: var(--text);
      border: 1px solid var(--ctrl-border);
      border-radius:12px;
      padding:10px 10px;
      outline:none;
    }
    input:focus, select:focus, button:focus{
      box-shadow: 0 0 0 3px var(--ctrl-ring);
    }

    .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
    .grid4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; }

    .row{
      display:flex; gap:10px; align-items:center;
      flex-wrap:wrap; min-width:0;
    }
    .row.stretch > input, .row.stretch > select{ flex:1 1 260px; min-width:0; }
    .row.stretch > button, .row.stretch > a{ flex:0 0 auto; }

    .divider{ height:1px; background: var(--table-border); margin:12px 0; }

    .dangerBtn{ border-color: rgba(255,77,77,.45); color: rgba(255,200,200,.95); }
    html[data-theme="light"] .dangerBtn{ color: rgba(215,51,51,.95); border-color: rgba(215,51,51,.45); }
    .dangerBtn:hover{ background: rgba(255,77,77,.12); }

    .okBtn{ border-color: rgba(61,220,151,.45); color: rgba(210,255,235,.95); }
    html[data-theme="light"] .okBtn{ color: rgba(27,155,103,.95); border-color: rgba(27,155,103,.45); }
    .okBtn:hover{ background: rgba(61,220,151,.12); }

    .pill{
      display:inline-block;
      padding: 2px 10px;
      border: 1px solid var(--ctrl-border);
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
      background: var(--panel2);
      font-weight: 900;
      white-space: nowrap;
    }

    .whoamiBtn{
      cursor:pointer;
      position:relative;
      display:inline-flex;
      align-items:center;
      gap: 0;
      border-radius: 999px;
    }

    .dropdownMenu{
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      z-index:1000;
      min-width: 240px;
      background: var(--panel2);
      border: 1px solid var(--border2);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 8px;
    }
    html[data-theme="light"] .dropdownMenu{
      background: #fff;
      border-color: rgba(0,0,0,.12);
    }

    .dropdownMenu .dropdownItem{
      all: unset;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 12px;
      border-radius: 12px;
      cursor: pointer;
      font: inherit;
      font-weight: 900;
      color: var(--text);
    }
    .dropdownMenu .dropdownItem:hover{ background: var(--ctrl-bg-hover); }

    .dropdownSection{ padding: 8px 10px; }
    .dropdownLabel{
      font-size: 11px;
      letter-spacing: .2px;
      font-weight: 900;
      color: var(--muted2);
      text-transform: uppercase;
    }
    .dropdownValue{
      margin-top: 2px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 900;
      color: var(--text);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dropdownDivider{
      height:1px;
      background: var(--table-border);
      margin: 8px 6px;
    }

    .dangerItem{ border: 1px solid rgba(255,77,77,.18); }
    .dangerItem:hover{ background: rgba(255,77,77,.12); }

    .tableWrap{
      width:100%;
      overflow-x:auto;
      border-radius:14px;
      border:1px solid var(--table-border);
      background: var(--table-bg);
      margin-top:10px;
    }
    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      min-width:720px;
    }
    th, td{
      text-align:left;
      vertical-align:top;
      padding:10px;
      border-bottom:1px solid var(--table-border);
      border-right:1px solid var(--table-border);
      white-space:nowrap;
    }
    th{ background: var(--table-row); }
    th:last-child, td:last-child{ border-right:none; }
    tr:last-child td{ border-bottom:none; }

    .tiny{ font-size:12px; color: var(--muted2); font-weight:800; }

    .modalBackdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.42);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 2000;
    }
    html[data-theme="light"] .modalBackdrop{ background: rgba(0,0,0,.35); }

    .modal{
      width: min(760px, 100%);
      border-radius: 16px;
      background: var(--panel);
      border: 1px solid var(--border2);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    html:not([data-theme="light"]) .modal{
      background: var(--panel);
    }
    .modalHeader{
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      background: var(--panel3);
    }
    .modalTitle{ font-weight: 900; }
    .modalBody{ padding: 14px; }
    #defaultScheduleModalBody{
      max-height: 70vh;
      overflow: auto;
    }

    .modalClose{
      border: 1px solid var(--ctrl-border);
      background: var(--ctrl-bg);
      color: var(--text);
      border-radius: 10px;
      padding: 6px 10px;
      cursor:pointer;
      font-weight: 900;
    }
    .modalClose:hover{ background: var(--ctrl-bg-hover); }

    .oncallActions{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      margin-top:10px;
    }
    .oncallActions .row{
      justify-content:center;
      width:100%;
    }

    @media (max-width:980px){
      .grid4{ grid-template-columns:1fr 1fr; }
      .page{ padding:14px; }
    }
    @media (max-width:840px){
      .grid2, .grid3, .grid4{ grid-template-columns:1fr; }
      .topRow{ align-items:flex-start; }
      .topRight{ justify-content:flex-start; }
      .dropdownMenu{ right:auto; left:0; }
    }



.inline-style-1 { display:flex;align-items:center;gap:16px; }
.inline-style-2 { height: 76px;display:block; }
.inline-style-3 { margin:5px 0 0 0;line-height:71px;display:flex;align-items:center; }
.inline-style-4 { position:relative; display:inline-flex; align-items:center; }
.inline-style-5 { opacity:.75;margin-left:6px; }
.inline-style-6 { margin-top:8px; }
.inline-style-7 { margin-top:10px; }
.inline-style-8 { margin-top:12px; }
.inline-style-9 { margin-top:6px; }
.inline-style-10 { margin-top:14px; }
.inline-style-11 { margin-bottom:6px; }
.inline-style-12 { margin-top:16px; }
.inline-style-13 { align-items:center; gap:10px; }
.inline-style-14 { width:100%; }
.inline-style-15 { margin-top:10px; align-items:center; }
.inline-style-16 { min-width:180px; }
.inline-style-17 { min-width:120px; }
.inline-style-18 { margin-top:20px; }
.inline-style-19 { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px; }
.inline-style-20 { margin-bottom:8px; }
.inline-style-21 { margin-bottom:10px; }
.inline-style-22 { height:76px;display:block;vertical-align:middle; }
.inline-style-23 { font-weight:900; }
.inline-style-24 { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; align-items:flex-end; }
.inline-style-25 { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.inline-style-26 { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.inline-style-27 { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.inline-style-28 { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.inline-style-29 { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.inline-style-30 { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.inline-style-31 { font-size:12px; margin-top:6px; }
.inline-style-32 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.inline-style-33 { font-weight:900; display:flex; align-items:center; gap:8px; }
.inline-style-34 { display:flex; align-items:center; gap:8px; }
.inline-style-35 { width:90px; }
.inline-style-36 { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.inline-style-37 { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.inline-style-38 { display:flex; flex-direction:column; gap:10px; margin-top:10px; align-items:flex-start; }
  .reportCheckRow{
    display:grid;
    grid-template-columns: 18px 1fr;
    align-items:center;
    column-gap: 10px;
    font-weight: 900;
  }
  .reportCheckRow input[type="checkbox"]{
    margin: 0;
    justify-self: start;
  }
.inline-style-39 { width:120px; margin-top:8px; }
.inline-style-40 { height: 76px;display:block;vertical-align:middle; }
.inline-style-41 { margin-left:8px; }
.inline-style-42 { display:flex; align-items:end; gap:10px; justify-content:flex-end; }
.inline-style-43 { overflow:auto; max-width:100%; }
.inline-style-44 { justify-content:space-between; gap:12px; flex-wrap:wrap; }
.inline-style-45 { gap:8px; align-items:center; width:100%; justify-content:flex-start; }
.inline-style-46 { font-weight:800; }
.inline-style-47 { min-width: 160px; max-width: 180px; }
.inline-style-48 { gap:10px; align-items:center; flex-wrap:wrap; width:100%; justify-content:space-between; }
.inline-style-49 { gap:6px; align-items:center; flex-wrap:wrap; }
.inline-style-50 { gap:6px; align-items:center; }
.inline-style-51 { justify-content:center; margin: 8px 0 10px; }
.inline-style-52 { width:min(980px,100%); }
.inline-style-53 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-style-54 { border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.03); padding: 12px; min-height: 160px; }
.inline-style-55 { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.inline-style-56 { display:flex; flex-direction: column; gap: 6px; }
.inline-style-57 { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.inline-style-58 { display:flex; gap:10px; align-items:center; }
.inline-style-59 { justify-content:space-between; align-items:flex-start; gap: 12px; }
.inline-style-60 { display:flex; gap:10px; align-items:center; margin:0; }
.inline-style-61 { text-align:right; }
.inline-style-62 { gap:10px; }
.inline-style-63 { display:none; }
.inline-style-64 { width:min(520px,100%); }
.inline-style-65 { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.inline-style-66 { min-width:240px; }
.inline-style-67 { min-width:200px; }
.inline-style-68 { display:flex; gap:12px; align-items:flex-end; }
.inline-style-69 { width:min(720px,100%); }
.inline-style-70 { margin-left:6px; font-size:11px; font-weight:700; color:var(--ok); text-decoration:none; }
.inline-style-71 { display:flex; gap:16px; flex-wrap:wrap; }
.inline-style-72 { flex:0 1 360px; min-width:240px; max-width:420px; }
.inline-style-73 { font-size:12px; margin-top:4px; }
.inline-style-74 { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.inline-style-75 { margin:-2px 0 8px; }
.inline-style-76 { min-width:220px; }
.inline-style-77 { min-width:260px; }
.inline-style-78 { display:flex; align-items:center; gap:16px; }
.inline-style-79 { min-width:140px; display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; }
.inline-style-80 { margin-bottom:2px; }
.inline-style-81 { margin:0 auto; }
.inline-style-82 { flex:1; display:flex; align-items:center; justify-content:center; height:100%; }
.inline-style-83 { display:flex;gap:8px;align-items:center; }
.inline-style-84 { min-width:90px; margin-right:4px; text-align:center; justify-content:center; display:flex; align-items:center; position:relative; top:9px; }
.inline-style-85 { display:none; margin:6px 8px 0 8px; text-align:center; min-width:120px; position:relative; top:6px; }
.inline-style-86 { min-width:60px; margin-left:4px; text-align:center; justify-content:center; display:flex; align-items:center; position:relative; top:9px; }
.inline-style-87 { display:none;gap:8px;align-items:center; }
.inline-style-88 { min-width:60px; }
.inline-style-89 { font-weight:900; background:var(--panel2); border-radius:8px; padding:6px 18px; min-width:140px; text-align:center; display:inline-block; }
.inline-style-90 { display:none;gap:8px;align-items:center; flex-wrap:wrap; justify-content:center; }
.inline-style-91 { margin:0; }
.inline-style-92 { font-size:12px; display:flex; align-items:center; gap:6px; }
.inline-style-93 { display:flex; align-items:end; gap:10px; }
.inline-style-94 { display:flex; align-items:end; justify-content:flex-end; }
.inline-style-95 { display:flex; align-items:end; justify-content:flex-end; gap:8px; }
.inline-style-96 { width:1%; white-space:nowrap; }
.inline-style-97 { display:flex;justify-content:flex-end;gap:10px; }
.inline-style-98 { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 10px; }
.inline-style-99 { overflow:auto; max-width:100%; margin-top:8px; }
.inline-style-100 { width:100%; height:100%; }
.inline-style-101 { font-weight:900; white-space:pre-wrap; }
.inline-style-102 { border-color: rgba(255,77,77,.4); }
.inline-style-103 { display:none;margin-top:10px; }
.inline-style-104 { flex:1 1 0;min-width:120px; }
.inline-style-105 { display:flex; flex-direction:column; gap:10px; margin-top:3px; }
.inline-style-106 { margin-top:-1px; }
.inline-style-107 { align-items:center; gap:10px; margin-top:23px; }
.inline-style-108 { display:flex; gap:8px; align-items:center; }
.inline-style-109 { width:100%;margin-bottom:16px; }
.inline-style-110 { display:none; flex-direction:column; gap:10px; margin-bottom:16px; }
.inline-style-111 { display:flex;gap:10px;justify-content:flex-end; flex-wrap:wrap; }
.inline-style-112 { margin-bottom:12px; }
.inline-style-113 { display:flex; gap:0; margin-bottom:18px; }
.inline-style-114 { flex:1 1 0; font-weight:900; border-radius:12px 0 0 0; }
.inline-style-115 { flex:1 1 0; font-weight:900; border-radius:0 12px 0 0; }
.inline-style-116 { font-weight:900;margin-bottom:8px; }
.inline-style-117 { margin-top:12px;align-items:flex-end;justify-content:flex-end; }
.inline-style-118 { align-items:center; }

.modal{
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modalBody{
  flex: 1 1 auto;
  overflow: auto;
}