:root{
      --bg:#0b1220;
      --text:#e8eefc;
      --muted:#a9b6d3;
      --border:rgba(255,255,255,.10);
      --panel: rgba(15, 27, 51, .92);
      --panel2: rgba(10, 16, 30, .70);
      --shadow: 0 12px 40px var(--shadowColor);
      --radius:16px;

      --cols: 3;
      --rows: 0; /* 0 = unlimited */

      --fontBase: 14px;
      --fontCard: 14px;
      --fontDisplay: 14px;
      --fontTimer: 18px;
      --fontInput: 14px;
      --displayCardScale: 1;
	      --roomCardLineHeight: 1.35;
	      --intakeCardScale: 1;
	      --practiceLogoScale: 1;
	      --practiceLogoBaseHeight: 46px;
	      --practiceLogoColorFilter: invert(0);
	      --doctorInitBadgeScale: 1;
	      --doctorInitBadgeFontSize: 16px;
	      --doctorInitBadgeBg: rgba(11,18,32,.35);
	      --doctorInitBadgeText: #e8eefc;
	      --doctorInitBadgeBorder: rgba(255,255,255,.18);
	      --displayFontColor: #e8eefc;
      --displayMutedColor: #a9b6d3;
      --practiceBadgeText: #fecdd3;
      --practiceBadgeBorder: rgba(251,113,133,.42);
      --practiceBadgeBg: rgba(127,29,29,.34);
    
      /* Theme (customizable) */
      --bgSolid: var(--bg);
      --headerBg: rgba(11,18,32,.70);
      --headerBorder: var(--border);

      --cardBg: var(--panel);
      --cardBorder: var(--border);

      --drawerBg: var(--panel);
      --drawerOverlay: var(--drawerOverlay);

      --btnBg: rgba(255,255,255,.08);
      --btnBgHover: var(--toastBorder);
      --btnBorder: var(--border);
      --btnText: var(--text);

      --inputBg: rgba(255,255,255,.06);
      --inputBorder: var(--border);
      --inputText: var(--text);
      --inputPlaceholder: rgba(233,238,252,.55);

      --focusRing: rgba(110,168,254,.55);

      --toastBg: var(--toastBg);
      --toastBorder: var(--toastBorder);
      --toastText: var(--text);

      --success: #22c55e;
      --warning: #f59e0b;
      --danger: #ef4444;

      --shadowColor: rgba(0,0,0,.45);

    }
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
    *{box-sizing:border-box}
    [hidden]{display:none !important;}
    html,body{height:100%}
	    body{
	      margin:0;
	      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	      font-size: var(--fontBase);
	      background:
	        radial-gradient(circle at top, rgba(125,211,252,.08), transparent 24%),
	        radial-gradient(circle at bottom right, rgba(110,168,254,.06), transparent 22%),
	        var(--bg);
	color:var(--text);
	      text-rendering: optimizeLegibility;
	      -webkit-font-smoothing: antialiased;
	      -moz-osx-font-smoothing: grayscale;
	    }
    body.displayTabActive{
      overflow:hidden;
    }
    body.displayTabActive header{
      --displayHeaderControlHeight: clamp(34px, 5.2vh, 46px);
    }
	    header{
	      position:sticky; top:0; z-index:10;
	      backdrop-filter: blur(10px);
	      background: var(--headerBg);
	      border-bottom: 1px solid var(--headerBorder);
	      box-shadow: 0 8px 28px rgba(0,0,0,.16);
	    }
    .bar{
      max-width:1400px;
      margin:0 auto;
      padding:2px 14px 0;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
    }
    body.displayTabActive .bar{
      max-width:none;
      width:100%;
      min-height:var(--displayHeaderControlHeight);
      padding:clamp(2px, .7vh, 8px) clamp(8px, 1.1vw, 16px) clamp(2px, .5vh, 7px);
      align-items:center;
      gap:clamp(8px, 1.2vw, 14px);
    }
    html.boardFullscreen .bar,
    html.boardFullscreen main{
      max-width:none;
      width:100%;
    }
    html.boardFullscreen .bar{
      padding:4px 16px 0;
      gap:10px;
    }
    html.boardFullscreen .brandWordmark{
      font-size:clamp(28px, 3vw, 40px);
    }
    .brandLockup{display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; flex:0 1 auto;}
    .brandTitleRow{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .brandHomeLink{
      text-decoration:none;
      color:inherit;
      display:contents;
    }
    .brandWordmark{
      font-size:clamp(32px, 4vw, 46px);
      font-weight:800;
      font-style:italic;
      letter-spacing:0;
      line-height:.9;
      color:var(--text);
      text-shadow:0 8px 18px rgba(0,0,0,.28);
      white-space:nowrap;
    }
    body.displayTabActive .brandWordmark{
      font-size:clamp(25px, min(3.4vw, 7vh), 44px);
    }
    #brandLogoImage{
      display:block;
      max-height:calc(var(--practiceLogoBaseHeight) * var(--practiceLogoScale));
      width:auto;
      max-width:min(calc(520px * var(--practiceLogoScale)), 64vw);
      object-fit:contain;
      filter: var(--practiceLogoColorFilter) drop-shadow(0 8px 18px rgba(0,0,0,.24));
    }
    #brandLogoImage[hidden]{
      display:none !important;
    }
    #authBanner{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:22px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--practiceBadgeBorder);
      background: var(--practiceBadgeBg);
      color:var(--practiceBadgeText);
      font-size:10px;
      font-weight:800;
      letter-spacing:.08em;
      line-height:1;
      white-space:nowrap;
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }
    body.displayTabActive #authBanner{
      min-height:clamp(18px, 2.6vh, 22px);
      padding:3px 7px;
      font-size:clamp(8px, 1.25vh, 10px);
      letter-spacing:0;
    }
    #authBanner[hidden]{
      display:none !important;
    }
    #statusLine{color:var(--muted); font-size:10px; line-height:1; margin-left:2px; margin-top:-1px}
    .right{display:flex; gap:6px; align-items:stretch; flex-wrap:wrap; justify-content:flex-end; padding-top:2px;}
    .right > :is(.chip, .tabs, .btn, .iconBtn, .headerSelectWrap, .headerToggleWrap){min-height:46px;}
    body.displayTabActive .right{
      gap:clamp(4px, .6vw, 7px);
      padding-top:0;
      align-items:center;
    }
    body.displayTabActive .right > :is(.chip, .tabs, .btn, .iconBtn, .headerSelectWrap, .headerToggleWrap){
      min-height:var(--displayHeaderControlHeight);
    }
    .right.activeSortBeforeToggle > #displaySortWrap{
      order:-2;
    }
    .right.activeSortBeforeToggle > #displayOnlyActiveWrap{
      order:-1;
    }
    .right .btn,
    .right .iconBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height:1;
    }
    .right .chip{
      min-height:46px;
      padding:8px 12px;
    }
    .right .tabs{
      display:flex;
      gap:0px;
      align-items:stretch;
      min-height:46px;
    }
    .right .tab{
      min-height:46px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .practiceLogoPreview{
      min-height:92px;
      border:1px dashed var(--settingsBorder);
      border-radius:16px;
      background:rgba(255,255,255,.03);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:14px;
      overflow:hidden;
    }
    .practiceLogoPreview img{
      max-width:100%;
      max-height:calc(72px * var(--practiceLogoScale));
      max-width:min(100%, calc(360px * var(--practiceLogoScale)));
      width:auto;
      object-fit:contain;
      filter: var(--practiceLogoColorFilter);
    }
    .practiceLogoPreviewEmpty{
      color:var(--settingsMuted);
      font-size:13px;
      text-align:center;
    }
	    .btn{
	      border: 1px solid var(--btnBorder);
	      background: var(--btnBg);
	      color: var(--btnText);
      padding:9px 11px;
      border-radius:10px;
      cursor:pointer;
	      box-shadow: 0 6px 18px rgba(0,0,0,.25);
	      user-select:none;
	      font-size: 16px;
	      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
	    }
	    .btn:hover{
	      border-color: rgba(255,255,255,.18);
	      box-shadow: 0 10px 24px rgba(0,0,0,.26);
	      transform: translateY(-1px);
	    }
	    .btn:active{
	      transform: translateY(0);
	      box-shadow: 0 6px 16px rgba(0,0,0,.22);
	    }
	    .btn.primary{border-color: rgba(110,168,254,.45)}
    .btn.isBusy,
    .iconBtn.isBusy,
    .roomRedoBtn.isBusy,
    .trash.isBusy,
    #displayGrid.listView .wbIconBtn.isBusy,
    .btn:disabled,
    .iconBtn:disabled,
    .roomRedoBtn:disabled,
    .trash:disabled,
    #displayGrid.listView .wbIconBtn:disabled{
      cursor: wait !important;
      opacity: .72;
      transform: none !important;
      box-shadow: none !important;
      filter: saturate(.82);
      pointer-events: none;
    }
    .btn.isBusy::after,
    .iconBtn.isBusy::after,
    .roomRedoBtn.isBusy::after,
    .trash.isBusy::after,
    #displayGrid.listView .wbIconBtn.isBusy::after{
      content: "";
      width: 12px;
      height: 12px;
      margin-left: 6px;
      border-radius: 999px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      animation: busySpin .75s linear infinite;
      opacity: .75;
      flex: 0 0 auto;
    }
    @keyframes busySpin{
      from{ transform: rotate(0deg); }
      to{ transform: rotate(360deg); }
    }
    .chip{
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      padding:8px 10px;
      border-radius:999px;
      font-size:12px;
      color:var(--muted);
	      display:flex; gap:0px; align-items:center;
	      white-space:nowrap;
	      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
    #syncPill{
      position:fixed;
      left:12px;
      bottom:12px;
      width:24px;
      height:24px;
      min-width:24px;
      min-height:24px;
      padding:0;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(7, 14, 28, .84);
      color: var(--muted);
      box-shadow: 0 6px 18px rgba(0,0,0,.24);
      backdrop-filter: blur(10px);
      z-index:9998;
    }
    #syncPill[data-state="syncing"]{
      color:#7dd3fc;
    }
    #syncPill[data-state="ok"]{
      color:#86efac;
    }
    #syncPill[data-state="err"]{
      color:#fda4af;
    }
    #syncPill[data-state="idle"]{
      color:var(--muted);
    }
    #syncPill[data-state="syncing"] #syncIcon{
      animation: syncSpin .9s linear infinite;
    }
    #syncPill #syncText,
    #syncPill #syncTime{
      display:none;
    }
    #syncIcon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      line-height:1;
    }
    @keyframes syncSpin{
      from{ transform: rotate(0deg); }
      to{ transform: rotate(360deg); }
    }
	    .headerSelectWrap,
	    .headerToggleWrap{
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      border-radius:999px;
      padding:5px 8px 5px 10px;
      display:flex;
      align-items:center;
      gap:6px;
      color:var(--muted);
	      min-width:0;
	      max-width:190px;
	      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
    .headerToggleWrap{
      max-width:none;
      padding-right:10px;
    }
    .headerSelectWrap.isActive,
    .headerToggleWrap.isActive{
      border-color: rgba(125,211,252,.42);
      box-shadow: 0 0 0 1px rgba(125,211,252,.16);
    }
    .headerSelectLabel,
    .headerToggleLabel{
      font-size:10px;
      font-weight:700;
      letter-spacing:0;
      text-transform:uppercase;
      white-space:nowrap;
      color:var(--muted);
    }
    .headerSelectWrap select{
      border:0;
      background:transparent;
      color:var(--text);
      min-width:0;
      width:92px;
      max-width:92px;
      padding:0;
      font-size:12px;
      outline:none;
      box-shadow:none;
      cursor:pointer;
      text-overflow:ellipsis;
    }
    .headerSelectWrap select option{
      color:#111827;
    }
    .headerToggleWrap .switch{
      width:38px;
      height:22px;
      margin:0;
    }
    .headerToggleWrap .knob{
      width:18px;
      height:18px;
    }
    .headerToggleWrap .switch.on .knob{
      left:17px;
    }
    .dot{width:8px;height:8px;border-radius:999px;background:#2dd4bf;border:1px solid rgba(255,255,255,.25)}
    .tabs{display:flex; gap:0px; align-items:center;}
	    .tab{padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);cursor:pointer;font-size:13px;color:var(--text)}
	    .tab.active{border-color: rgba(110,168,254,.45); background: rgba(110,168,254,.12)}
	    .tab{transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease}
	    .tab:hover{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07)}
    body.displayLayoutSettling #displayGrid,
    body.displayLayoutSettling #displayGrid .room{
      transition:none !important;
    }
    body.displayReturnFitPending.displayTabActive #displayWrap{
      overflow:hidden !important;
    }
    body.displayReturnFitPending.displayTabActive #displayGrid{
      opacity:0;
      pointer-events:none;
    }

    main{max-width:1400px; margin:0 auto; padding:14px;}
    body.displayTabActive main{
      max-width:none;
      width:100%;
      height: calc(100vh - var(--appHeaderHeight, 0px));
      overflow:hidden;
      padding:10px 12px 12px;
    }
    html.boardFullscreen main{
      padding:10px 16px 16px;
    }
    body.displayTabActive #displayView{
      height:100%;
      min-height:0;
    }
    .grid{
      display:grid;
      grid-template-columns: repeat(var(--cols), minmax(260px, 1fr));
      gap:14px;
      align-content:start;
    }
    #displayWrap.activeDisplayFitWrap{
      overflow:hidden;
    }
    #displayGrid.boxView.activeDisplayFit{
      grid-template-columns: repeat(var(--activeFitCols, var(--cols)), minmax(260px, 1fr));
      gap:var(--activeFitGap, 14px);
      align-items:stretch;
      transform-origin:top left;
      will-change:transform;
    }
    #displayGrid.activeDoctorGrouped{
      row-gap:var(--activeFitGap, 14px);
    }
    #displayGrid.boxView.activeDisplayFitSingle{
      width:min(var(--activeFitSingleWidth, 520px), 100%) !important;
      max-width:min(var(--activeFitSingleWidth, 520px), 100%) !important;
      grid-template-columns:minmax(0, 1fr) !important;
    }
    #displayGrid.boxView.activeDisplayFit .room{
      transform:none !important;
      width:100%;
      max-width:none;
      justify-self:stretch;
      min-height:var(--activeFitCardMinHeight, 176px);
      padding-bottom:56px;
    }
    #displayGrid.boxView.activeDisplayFit .room.isEmptyDisplayCard{
      min-height:var(--activeFitEmptyCardMinHeight, 136px);
      padding-bottom:48px;
    }
    #displayGrid.boxView .room.isEmptyDisplayCard{
      opacity: .55;
    }
    #displayGrid.boxView .room.isEmptyDisplayCard:hover{
      opacity: .75;
    }
    #displayGrid.boxView.activeDisplayFit .room.hasDoctorBadge{
      padding-bottom:56px;
    }
    #displayGrid.boxView.activeDisplayFit .room.isEmptyDisplayCard.hasDoctorBadge{
      padding-bottom:48px;
    }
    #displayGrid.boxView.activeDisplayFit .room.hasDoctorBadge .roomBody{
      padding-right:max(76px, calc(14px + (68px * var(--doctorInitBadgeScale, 1))));
    }
    #displayGrid.boxView.activeDisplayFit .room.hasDoctorBadge.hasRedo .roomBody,
    #displayGrid.boxView.activeDisplayFit .room.hasDoctorBadge.hasNotesDock .roomBody{
      padding-right:max(116px, calc(58px + (68px * var(--doctorInitBadgeScale, 1))));
    }
    #displayGrid.boxView.activeDisplayFitSingle .room{
      width:100%;
      max-width:none;
    }
    #displayGrid.boxView.activeDisplayFit .roomName{
      min-width:0;
      max-width:calc(100% - 40px);
    }
    #displayGrid.boxView.activeDisplayFit .roomTop{
      min-height:34px;
      padding:clamp(4px, 1vh, 8px) 10px;
    }
    #displayGrid.boxView.activeDisplayFit .roomBody{
      padding:clamp(10px, 1.6vh, 16px) clamp(12px, 1.4vw, 18px);
      gap:clamp(5px, .8vh, 10px);
    }
    #displayGrid.boxView.activeDisplayFit .room .timerBox{
      bottom:clamp(10px, 1.4vh, 16px);
      padding:clamp(7px, 1.1vh, 12px) clamp(10px, 1vw, 14px);
    }
    #displayGrid.boxView.activeDisplayFit .room.isEmptyDisplayCard .roomBody{
      padding:8px 12px;
      gap:4px;
    }
    #displayGrid.boxView.activeDisplayFit .room.isEmptyDisplayCard .timerBox{
      bottom:10px;
      padding:7px 10px;
    }
    html.boardFullscreen .grid{
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
      gap:12px;
    }
    html.boardFullscreen .intakeGrid{
      grid-template-columns: repeat(var(--intakeCols, 2), minmax(0, 1fr));
      gap:12px;
    }
    #displayGrid .activeDoctorDivider{
      grid-column:1 / -1;
      width:100%;
      min-width:0;
      position:relative;
      padding:8px 0 0;
      margin:4px 0 -6px;
      border-top:2px solid var(--listChromeBorder, rgba(255,255,255,.30));
      color:var(--displayFontColor, var(--text));
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
    }
    #displayGrid .activeDoctorDivider:first-child{
      margin-top:0;
    }
    #displayGrid .activeDoctorDividerLabel{
      position:relative;
      min-width:0;
      display:flex;
      align-items:center;
      gap:10px;
      max-width:100%;
      padding:0;
      font-size:14px;
      font-weight:700;
      line-height:1.2;
      letter-spacing:0;
      text-transform:none;
    }
    #displayGrid .activeDoctorDividerName{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    #displayGrid .activeDoctorDivider .docInitBadge{
      min-width:44px;
      width:auto;
      height:32px;
      padding:0 10px;
      font-size:15px;
      border-radius:11px;
      box-shadow:none;
    }
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="circle"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="golfball"]{
      min-width:36px;
      width:36px;
      height:36px;
      padding:0;
      border-radius:999px;
    }
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="triangle"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="star"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="flower"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="flower2"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="turtle"]{
      min-width:40px;
      width:40px;
      height:38px;
      padding:0;
    }
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="hexagon"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="crab"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="bulldog"],
    #displayGrid .activeDoctorDivider .docInitBadge[data-shape="strawberry"]{
      min-width:48px;
      width:48px;
      height:38px;
      padding:0;
    }
    .activeRoomsEmpty{
      grid-column:1 / -1;
      width:min(420px, 100%);
      min-height:126px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:6px;
      padding:22px 24px;
      border-radius:18px;
      border:1px solid rgba(125,211,252,.18);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
      color:var(--displayFontColor, var(--text));
      box-shadow:0 10px 24px rgba(0,0,0,.20);
    }
    .activeRoomsEmptyTitle{
      font-size:18px;
      font-weight:900;
      line-height:1.1;
    }
    .activeRoomsEmptyText{
      color:var(--displayMutedColor, var(--muted));
      font-size:13px;
      line-height:1.35;
      font-weight:700;
    }
    .gridWrap{
      /* rows control: if rows > 0, constrain height so it becomes a TV-friendly grid */
      max-height: calc( (var(--rows) * 220px) + ((var(--rows) - 1) * 14px) );
      overflow:auto;
    }
    .gridWrap.unlimited{
      max-height: var(--fullscreenDisplayHeight, calc(100vh - 120px));
      overflow:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }
    body.displayTabActive #displayWrap,
    body.displayTabActive #displayWrap.unlimited{
      height: var(--fullscreenDisplayHeight, calc(100vh - 120px));
      max-height: var(--fullscreenDisplayHeight, calc(100vh - 120px));
      width:100%;
    }
    html.boardFullscreen #displayWrap,
    html.boardFullscreen #displayWrap.unlimited{
      max-height: var(--fullscreenDisplayHeight, calc(100vh - 120px));
      overflow:auto;
    }
	    .room{
	      font-size: var(--fontCard);
	      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
	      border:1px solid var(--border);
	      border-top: 3px solid var(--roomAccent, var(--border));
	      border-radius: var(--radius);
	      box-shadow: var(--shadow);
      overflow:hidden;
      min-height: 210px;
      position:relative;

	      color: var(--cardText, var(--text));
	      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .2s ease;
	    }
	    .room[draggable="true"]{ cursor: grab; }
	    .room[draggable="true"]:active{ cursor: grabbing; }
	    #intakeGrid .room:hover,
	    #displayGrid.boxView .room:hover{
	      transform: translateY(-3px) scale(1.01);
	      box-shadow: 0 20px 48px rgba(0,0,0,.55);
	    }
	    #displayGrid .room{
	      transform: scale(var(--displayCardScaleApplied, var(--displayCardScale, 1)));
	      transform-origin: top left;
    }
    #intakeGrid .room{
      transform: scale(var(--intakeCardScaleApplied, var(--intakeCardScale, 1)));
      transform-origin: top left;
    }

    .room.cleaning{
      border-color: rgba(251,191,36,.55);
      box-shadow: 0 12px 40px rgba(251,191,36,.10);
      background: linear-gradient(180deg, rgba(251,191,36,.16), rgba(255,255,255,.03));
    }
    .room.doctorSelected{
      outline: 3px solid rgba(125,211,252,.92);
      outline-offset: 2px;
    }
    #displayGrid.boxView .room.timerAlertBorder,
    #intakeGrid .room.timerAlertBorder{
      border-color: var(--timerAlert2Color, #fb7185) !important;
      border-top-color: var(--timerAlert2Color, #fb7185) !important;
      box-shadow:
        inset 0 0 0 5px var(--timerAlert2Color, #fb7185),
        var(--shadow) !important;
    }
    #displayGrid.listView .room.doctorSelected{
      outline: 2px solid rgba(125,211,252,.92);
      outline-offset: -2px;
      z-index: 1;
    }
	    .roomTop{
	      display:flex; align-items:center; justify-content:space-between;
	      padding:4px 8px;
	      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.12));
	      border-bottom:1px solid var(--border);
	      gap:6px;
	    }
    .roomName{display:flex; align-items:center; gap:6px; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.07em; opacity:.85;}
    #displayView .roomName,
    #displayView .wbRoomName,
    #displayView .wbPatientName,
    #displayView .wbQuickNotes,
    #displayView .summary.roomInfoLine{
      line-height:var(--roomCardLineHeight);
    }
    #displayView #displayGrid.listView .wbRoomName,
    #displayView #displayGrid.listView .wbPatientName,
    #displayView #displayGrid.listView .wbQuickNotes{
      line-height:var(--roomCardLineHeight);
    }
    .roomNotesDock{
      position:absolute;
      top:46px;
      right:10px;
      z-index:12;
    }
    #displayGrid .room.hasOpenNotes,
    #displayGrid .room:has(.roomNotesDock[open]){
      overflow:visible;
      z-index:40;
    }
    .roomNotesDock > summary{
      list-style:none;
    }
    .roomNotesDock > summary::-webkit-details-marker{ display:none; }
    .roomNotesDock[open]{ z-index:14; }
	    .roomNotesBtn{
      width:30px;
      height:30px;
      border:1px solid var(--roomControlBorder, var(--border));
      background: var(--roomControlBg, var(--panel2));
      color: var(--cardText, var(--text));
      border-radius:10px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      font-size:14px;
      line-height:1;
	      box-shadow: 0 6px 18px rgba(0,0,0,.16);
	      user-select:none;
	      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
	    .roomNotesDock[open] .roomNotesBtn,
	    .roomNotesBtn:hover{
	      border-color: rgba(255,255,255,.22);
	      background: color-mix(in srgb, var(--roomControlBg, var(--panel2)) 82%, white 18%);
	      box-shadow: 0 10px 22px rgba(0,0,0,.2);
	      transform: translateY(-1px);
	    }
    .roomNotesPanel{
      position:absolute;
      top:40px;
      right:0;
      z-index:2;
      width:330px;
      max-width:min(390px, calc(100vw - 32px));
      max-height:min(360px, calc(100vh - 120px));
      overflow:auto;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--roomControlBorder, var(--border));
      background: var(--roomViewBg, rgba(15,23,42,.92));
      color: var(--cardText, var(--text));
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
      display:flex;
      flex-direction:column;
      gap:10px;
      backdrop-filter: blur(12px);
    }
    .roomNotesItem{
      display:flex;
      flex-direction:column;
      gap:3px;
    }
    .roomNotesLabel{
      font-size:10px;
      line-height:1.1;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: var(--cardMuted, var(--muted));
    }
    .roomNotesValue{
      font-size:13px;
      line-height:1.35;
      white-space:pre-wrap;
      word-break:break-word;
    }
    .tagDot{
      width:12px; height:12px; border-radius:999px;
      border: 1px solid rgba(255,255,255,.20);
      flex: 0 0 auto;
    }
	    .roomBody{padding:12px; display:flex; flex-direction:column; gap:6px;}
    .room.hasNotesDock .roomBody{ padding-right:58px; }
    #intakeGrid.techViewGrid{align-items:start;}
    .room.techViewCard{
      min-height:auto;
      height:auto;
      align-self:start;
    }
    .room.techViewCard .roomBody{gap:10px;}
    .room.techViewCard .row2{align-items:start;}
    .room.techViewCard .viewBox{
      min-height:0;
      padding:9px 12px;
    }
    .room.techViewCard .techRowCompact{align-items:stretch;}
    .room.techViewCard .drReadyCompact{min-height:44px;}
    .muted{color:var(--muted); font-size:12px; line-height:1.35}
    .room .muted{color: var(--cardMuted, var(--muted));}
    .room .pill .small{color: var(--cardMuted, var(--muted));}

    .summary{display:flex; gap:0px; flex-wrap:wrap; align-items:center;}
    .summary.roomInfoLine{
      gap:6px;
      color:var(--cardText, var(--text));
      font-weight:700;
      line-height:var(--roomCardLineHeight);
      word-break:break-word;
    }
    .roomInfoSep{
      color:var(--cardMuted, var(--muted));
      font-weight:800;
      opacity:.9;
    }
	    .pill{
      border: 1px solid var(--btnBorder);
      background: var(--btnBg);
      padding:6px 8px;
      border-radius:999px;
      font-size:12px;
      color: var(--btnText);
	      display:flex; gap:0px; align-items:center;
	      max-width:100%;
	      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
    .pill .small{color:var(--muted)}
    .timerRow{
      display:flex;
      align-items:stretch;
      gap:8px;
    }
    .timerRow .timerBox{
      flex:1 1 auto;
      min-width:0;
    }
    .timerBox{
      display:flex; align-items:center; justify-content:space-between; gap:6px;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--timerBoxBorder, var(--border));
      background: var(--timerBoxBg, var(--panel2));
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .timerBox.timerRunning{
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.12);
    }
    .timerBox.timerCleaning{
      border-color: rgba(251,191,36,.45);
      background: linear-gradient(180deg, rgba(251,191,36,.18), rgba(251,191,36,.10));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(120,53,15,.14);
    }
	    .roomRedoBtn{
      position:absolute;
      right:10px;
      bottom:10px;
      z-index:3;
      width:30px;
      height:30px;
      min-width:30px;
      border:1px solid var(--btnBorder);
      background: var(--btnBg);
      color: var(--btnText);
      border-radius:10px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      font-size:16px;
      line-height:1;
	      font-weight:800;
	      box-shadow: 0 8px 18px rgba(0,0,0,.18);
	      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
	    .roomRedoBtn:hover{
	      border-color: rgba(255,255,255,.18);
	      box-shadow: 0 12px 24px rgba(0,0,0,.22);
	      transform: translateY(-1px);
	    }
    .room.hasRedo .roomBody{ padding-right:52px; }
    .room.hasRedo .docInitCorner{ right:48px; }
    #displayGrid.boxView .room.hasRedo .timerBox{ max-width: calc(100% - 60px); }
    .time{
    }
    .time.timerAlert1{
      color: var(--timerAlert1Color, #fbbf24) !important;
      text-shadow: 0 0 18px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 25%, transparent);
    }
    .time.timerAlert2{
      color: var(--timerAlert2Color, #fb7185) !important;
      text-shadow: 0 0 18px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 25%, transparent);
    }

    .time{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: var(--fontTimer);
      letter-spacing: .6px;
      font-variant-numeric: tabular-nums;
    }
    #displayGrid.boxView .timerBox > .time{
      margin:0 auto;
    }
    .time.timerRunning{
      text-shadow: 0 0 14px rgba(34,197,94,.16);
    }
    .time.timerCleaning{
      color: #ffffff;
      text-shadow: 0 0 18px rgba(245,158,11,.22);
    }
    .timerBox.timerAlert1{
      border-color: color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 55%, var(--timerBoxBorder, var(--border)));
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 36%, transparent),
        0 0 0 1px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 14%, transparent);
    }
    .timerBox.timerAlert2{
      border-color: color-mix(in srgb, var(--timerAlert2Color, #fb7185) 65%, var(--timerBoxBorder, var(--border)));
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 44%, transparent),
        0 0 0 1px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 20%, transparent);
    }
    html[data-stopwatch-style="minimal"] .timerBox{
      padding:8px 0 4px;
      border-radius:0;
      border-width:0 0 1px 0;
      background:transparent;
      box-shadow:none;
    }
    html[data-stopwatch-style="minimal"] .timerBox .muted{
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:10px;
      opacity:.8;
    }
    html[data-stopwatch-style="minimal"] .time{
      font-size: calc(var(--fontTimer) + 4px);
      letter-spacing: 1.2px;
    }
    html[data-stopwatch-style="glass"] .timerBox{
      padding:12px 14px;
      border-radius:18px;
      border-color: rgba(255,255,255,.28);
      background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 34px rgba(0,0,0,.18);
      backdrop-filter: blur(14px);
    }
    html[data-stopwatch-style="glass"] .time{
      letter-spacing: 1px;
      text-shadow: 0 6px 20px rgba(0,0,0,.18);
    }
    html[data-stopwatch-style="scoreboard"] .timerBox{
      padding:12px 14px;
      border-radius:12px;
      border-color: rgba(15,23,42,.8);
      background: linear-gradient(180deg, rgba(2,6,23,.94), rgba(15,23,42,.94));
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.03), inset 0 -8px 16px rgba(0,0,0,.35);
    }
    html[data-stopwatch-style="scoreboard"] .timerBox .muted{
      color: rgba(148,163,184,.86);
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:10px;
    }
    html[data-stopwatch-style="scoreboard"] .time{
      color:#86efac;
      letter-spacing: 1.4px;
      text-shadow: 0 0 18px rgba(34,197,94,.28);
    }
    html[data-stopwatch-style="pill"] .timerBox{
      padding:8px 14px;
      border-radius:999px;
      border-color: rgba(255,255,255,.16);
      background: linear-gradient(90deg, rgba(15,23,42,.76), rgba(30,41,59,.9));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    html[data-stopwatch-style="pill"] .timerBox .muted{
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.1em;
    }
    html[data-stopwatch-style="pill"] .time{
      letter-spacing: 1px;
      font-size: calc(var(--fontTimer) + 1px);
    }

    /* Intake */
    .intakeGrid{
      display:grid;
      grid-template-columns: repeat(var(--intakeCols, 2), minmax(300px, 1fr));
      gap:14px;
      align-content:start;
    }
    .field{display:flex; flex-direction:column; gap:6px;}
    label{font-size:12px; color:var(--muted)}
	    input[type="text"], input[type="password"], input[type="tel"], select, textarea, input[type="number"]{
      width:100%;
      padding:10px 10px;
      border-radius:0px;
      border:1px solid var(--inputBorder);
      background: var(--inputBg);
	      color: var(--inputText);
	      outline:none;
	      font-size:  var(--fontInput);
	      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
	    }
	    input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, select:focus, textarea:focus, input[type="number"]:focus{
	      border-color: rgba(125,211,252,.38);
	      box-shadow: 0 0 0 3px rgba(110,168,254,.12);
	    }
	    input[type="text"]::placeholder, input[type="password"]::placeholder, textarea::placeholder{ color: var(--inputPlaceholder); }
	    textarea{min-height:70px; resize:vertical;}
	    .quickNotePicker{
	      display:flex;
	      flex-wrap:wrap;
	      gap:8px;
	      align-items:center;
	      min-height:42px;
	      padding:8px;
	      border:1px solid var(--inputBorder);
	      background:var(--inputBg);
	    }
	    .quickNoteChoice{
	      display:inline-flex;
	      align-items:center;
	      gap:7px;
	      min-width:0;
	      padding:7px 9px;
	      border:1px solid rgba(148,163,184,.28);
	      background:rgba(255,255,255,.05);
	      color:var(--inputText);
	      font-size:12px;
	      font-weight:700;
	      line-height:1.15;
	      cursor:pointer;
	    }
	    .quickNoteChoice input{
	      width:14px;
	      height:14px;
	      flex:0 0 auto;
	      accent-color:#38bdf8;
	    }
	    .quickNoteChoice:has(input:checked){
	      border-color:rgba(56,189,248,.68);
	      background:rgba(56,189,248,.14);
	    }
	    .quickNoteChoice span{
	      min-width:0;
	      overflow:hidden;
	      text-overflow:ellipsis;
	    }
	    .quickNotePickerEmpty{
	      padding:2px 4px;
	    }
	    .quickNoteDropdown{
	      position:relative;
	      width:100%;
	    }
	    .quickNoteDropdownSummary{
	      display:flex;
	      align-items:center;
	      justify-content:space-between;
	      gap:10px;
	      min-height:40px;
	      padding:10px;
	      border:1px solid var(--inputBorder);
	      background:var(--inputBg);
	      color:var(--inputText);
	      font-size:var(--fontInput);
	      cursor:pointer;
	      user-select:none;
	      list-style:none;
	    }
	    .quickNoteDropdownSummary::-webkit-details-marker{
	      display:none;
	    }
	    .quickNoteDropdownText{
	      min-width:0;
	      overflow:hidden;
	      text-overflow:ellipsis;
	      white-space:nowrap;
	    }
	    .quickNoteDropdownChevron{
	      flex:0 0 auto;
	      color:var(--muted);
	      font-size:11px;
	      font-weight:800;
	      line-height:1;
	    }
	    .quickNoteDropdown[open] .quickNoteDropdownChevron{
	      transform:rotate(180deg);
	    }
	    .quickNoteDropdownMenu{
	      position:absolute;
	      z-index:80;
	      top:calc(100% + 4px);
	      left:0;
	      right:0;
	      max-height:220px;
	      overflow:auto;
	      border:1px solid var(--inputBorder);
	      background:var(--panel);
	      box-shadow:0 18px 38px rgba(0,0,0,.34);
	    }
	    .quickNotePickerDropdown{
	      border:0;
	      background:transparent;
	      max-height:none;
	    }
	    .row2{display:grid; grid-template-columns: 1fr 1fr; gap:6px;}
	    .toggle{
      display:flex; align-items:center; justify-content:space-between; gap:6px;
      padding:10px;
      border-radius:14px;
	      border:1px solid var(--border);
	      background: var(--panel2);
	      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
	    .switch{
      width:44px; height:26px; border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
	      position:relative;
	      cursor:pointer;
	      flex:0 0 auto;
	      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
	    .knob{
      width:22px; height:22px; border-radius:999px;
      background: rgba(255,255,255,.85);
      position:absolute; top:1px; left:1px;
	      transition: left .12s ease, background .16s ease, box-shadow .16s ease;
	      box-shadow: 0 3px 10px rgba(0,0,0,.2);
	    }
    .switch.on{ background: rgba(45,212,191,.18); border-color: rgba(45,212,191,.35); }
    .switch.on .knob{ left: 21px; background: rgba(45,212,191,.95); }

    .room label{ color: var(--cardMuted, var(--muted)); }
	    .room :is(input[type="text"], input[type="password"], select, textarea, input[type="number"]){
	      border-color: var(--roomInputBorder, var(--inputBorder));
	      background: var(--roomInputBg, var(--inputBg));
	      color: var(--roomInputText, var(--inputText));
	    }
	    .room select option,
	    .room select optgroup{
	      background: var(--roomOptionBg, #ffffff);
	      color: var(--roomOptionText, #0b1220);
	    }
	    .room :is(input[type="text"], input[type="password"], textarea)::placeholder{
	      color: var(--roomInputPlaceholder, var(--inputPlaceholder));
	    }
    .room .toggle{
      border-color: var(--roomControlBorder, var(--border));
      background: var(--roomControlBg, var(--panel2));
    }
    .room .switch{
      border-color: var(--roomControlBorder, var(--border));
      background: var(--roomSwitchBg, rgba(255,255,255,.06));
    }
    .room .knob{
      background: var(--roomKnobBg, rgba(255,255,255,.85));
    }
    .room .viewBox{
      border-color: var(--roomInputBorder, rgba(148,163,184,.35));
      background: var(--roomViewBg, rgba(15,23,42,.35));
      color: var(--roomInputText, var(--cardText, #e5e7eb));
    }
    .room .drReadyCompact{
      border-color: var(--roomInputBorder, rgba(255,255,255,.35));
      background: var(--roomViewBg, #e9ecef);
      color: var(--roomInputText, #0b1220);
    }

    .actions{display:flex; gap:6px; flex-wrap:wrap;}
    .btn.warn{border-color: rgba(251,191,36,.45)}
    .btn.danger{border-color: rgba(251,113,133,.45)}
    .btn.ghost{background: rgba(255,255,255,.03); box-shadow:none}

    /* Drawer */
    .drawerBackdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.70);
      display:none;
      z-index:50;
    }
    .drawer{
      position:fixed;
      top:0; right:0;
      height:100%;
      width:min(520px, 94vw);
      background: rgba(8, 14, 28, .96);
      border-left:1px solid var(--border);
      box-shadow: -20px 0 60px var(--drawerOverlay);
      transform: translateX(100%);
      transition: transform .18s ease;
      z-index:60;
      display:flex;
      flex-direction:column;
    }
    body.drawerOpen .drawerBackdrop{display:block;}
    body.drawerOpen .drawer{transform: translateX(0);}
    .drawerheader{
      padding:14px 14px 10px 14px;
      border-bottom: 1px solid var(--headerBorder);
      display:flex; align-items:center; justify-content:space-between;
      gap:6px;
    }
    .drawerHeader h2{margin:0; font-size:15px;}
    .drawerBody{padding:14px; overflow:auto; display:flex; flex-direction:column; gap:14px;}
	    .card{
	      border:1px solid var(--border);
	      border-radius: var(--radius);
	      background: rgba(255,255,255,.03);
	      padding:12px;
	      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
	    }
    .card h3{margin:0 0 10px 0; font-size:13px; color: var(--muted); font-weight:700}
    .list{display:flex; flex-direction:column; gap:6px;}
    .listRow{display:grid; grid-template-columns: 1fr 90px 36px; gap:6px; align-items:center;}
    .trash{width:36px; height:36px; border-radius:0px; border:1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); cursor:pointer;}
    .trash:hover{border-color: rgba(255,255,255,.18)}
    .miniRow{display:grid; grid-template-columns: 1fr 1fr; gap:6px;}
    .roomCardFieldGrid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:8px;
      margin-top:12px;
    }
    .roomCardFieldToggle{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      padding:10px;
      border:1px solid var(--settingsBorder, var(--border));
      border-radius:8px;
      background: rgba(255,255,255,.04);
      color: var(--settingsText, var(--text));
      cursor:pointer;
      font-size:13px;
      font-weight:700;
    }
    .roomCardFieldToggle input{
      width:17px;
      height:17px;
      flex:0 0 auto;
      accent-color:#5b8cff;
    }
    .roomCardFieldToggle span{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .hr{height:1px;background:rgba(255,255,255,.08);margin:6px 0}
    .logToolbar{display:flex; gap:6px; flex-wrap:wrap; align-items:flex-end;}
    .logList{display:flex; flex-direction:column; gap:8px;}
    .logItem{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap:10px;
      align-items:center;
      padding:10px;
      border:1px solid var(--border);
      border-radius:12px;
      background: rgba(255,255,255,.03);
    }
    .logMain{min-width:0; display:flex; flex-direction:column; gap:6px;}
    .logTitle{display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-width:0;}
    .logName{font-weight:700;}
    .logMeta{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
    .logBadge{
      display:inline-flex;
      align-items:center;
      gap:4px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.05);
      font-size:12px;
      white-space:nowrap;
    }
    .logBadge.warn{
      border-color: rgba(251,191,36,.45);
      background: rgba(251,191,36,.10);
    }
    .logItem .btn{align-self:center;}
  
    /* Display content font */
    #displayView .summary{ font-size: var(--fontDisplay); }
    #displayView .pill{ font-size: var(--fontDisplay); }
    #displayView .pill .small{ font-size: calc(var(--fontDisplay) - 2px); opacity:.85; }

  
    .tabPanel{display:none;}
    .tabPanel.active{display:block;}

  
	    .iconBtn{
      border: 1px solid var(--btnBorder);
      background: var(--btnBg);
      color: var(--btnText);
      padding:8px 10px;
      border-radius:10px;
      cursor:pointer;
      font-size:14px;
      line-height:1;
      display:inline-flex;
	      align-items:center;
	      justify-content:center;
	      gap:6px;
	      white-space:nowrap;
	      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
	    }
    .headerIconBtn{
      min-width:46px;
      min-height:46px;
      padding:8px;
      font-size:18px;
      font-weight:700;
      box-shadow: 0 6px 18px rgba(0,0,0,.25);
      box-shadow: 0 6px 18px rgba(0,0,0,.25);
    }
    body.displayTabActive .headerIconBtn{
      min-width:var(--displayHeaderControlHeight);
      min-height:var(--displayHeaderControlHeight);
      padding:clamp(5px, .9vh, 8px);
      font-size:clamp(15px, 2.2vh, 18px);
    }
    .addHeaderBtn{
      min-width:46px;
      font-size:24px;
      font-weight:800;
      line-height:1;
      padding:0;
    }
    body.displayTabActive .addHeaderBtn{
      min-width:var(--displayHeaderControlHeight);
      font-size:clamp(19px, 3vh, 24px);
    }
    .mobileQuickViewHeaderBtn{
      display:none;
      padding:0;
    }
    .headerPhoneIcon{
      width:16px;
      height:16px;
      display:block;
      background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.75' width='10' height='18.5' rx='2.4'/%3E%3Cpath d='M10.5 5.75h3'/%3E%3Ccircle cx='12' cy='18' r='0.85' fill='%23f6f9ff' stroke='none'/%3E%3C/svg%3E");
    }
    @media (min-width: 821px){
      .mobileQuickViewHeaderBtn{
        display:none !important;
      }
    }
	    .iconBtn:hover{
	      border-color: rgba(255,255,255,.18);
	      box-shadow: 0 10px 24px rgba(0,0,0,.24);
	      transform: translateY(-1px);
	    }
    
  
    /* Back to top button */
	    #toTopBtn{
      position: fixed;
      top: 12px;
      left: 12px;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid var(--btnBorder);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      color: var(--text);
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
      cursor: pointer;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
	      font-size: 18px;
	      line-height: 1;
	      user-select: none;
	      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
	    }
	    #toTopBtn:hover{
	      border-color: rgba(255,255,255,.18);
	      box-shadow: 0 14px 28px rgba(0,0,0,.38);
	      transform: translateY(-1px);
	    }
    #toTopBtn.show{ display: flex; }

    .intakeNavBar{
      position: sticky;
      top: 64px;
      z-index: 5;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--panel2);
      color: var(--text);
      box-shadow: 0 12px 26px rgba(0,0,0,.14);
      backdrop-filter: blur(8px);
    }
    #intakeJumpBtn{
      background: var(--text);
      color: var(--bg);
      border-color: transparent;
      font-weight:700;
      box-shadow: 0 10px 22px rgba(0,0,0,.16);
    }
    #intakeJumpBtn:hover{
      filter: brightness(1.04);
      border-color: transparent;
    }
	    .flash{
	      outline: 2px solid rgba(110,168,254,.85);
	      box-shadow: 0 0 0 6px rgba(110,168,254,.18);
	      transition: outline-color .2s ease;
	    }
	    ::-webkit-scrollbar{ width:12px; height:12px; }
	    ::-webkit-scrollbar-track{ background: rgba(255,255,255,.03); }
	    ::-webkit-scrollbar-thumb{
	      background: rgba(169,182,211,.26);
	      border-radius: 999px;
	      border: 3px solid transparent;
	      background-clip: padding-box;
	    }
	    ::-webkit-scrollbar-thumb:hover{
	      background: rgba(169,182,211,.38);
	      border: 3px solid transparent;
	      background-clip: padding-box;
	    }

    /* Display card view: auto-fit card height while reserving space for the anchored timer */
    #displayGrid.boxView .room{
      min-height:auto;
      height:auto;
      padding-bottom: 64px;
    } /* reserve space so content doesn't overlap the time box */
    #displayGrid.boxView .room .timerBox{
      position:absolute;
      left:12px;
      bottom:12px;
      width:auto;
      max-width: calc(100% - 24px);
      justify-content:flex-start;
      padding:8px 10px;
    }

    /* ===== Settings drawer: always dark (unaffected by theme) ===== */
    :root{
      --settingsBg: #07101f;
      --settingsBg2: rgba(9, 18, 35, .98);
      --settingsText: #f3f7ff;
      --settingsMuted: #9fafce;
      --settingsBorder: rgba(162, 182, 236, .16);
      --settingsBorderStrong: rgba(168, 191, 255, .26);
      --settingsPanel: rgba(13, 24, 46, .88);
      --settingsPanel2: rgba(17, 31, 58, .72);
      --settingsBtnBg: rgba(255,255,255,.06);
      --settingsBtnBgHover: rgba(255,255,255,.12);
      --settingsInputBg: rgba(8, 16, 32, .92);
      --settingsFocusRing: rgba(110,168,254,.28);
      --settingsAccent: #7dd3fc;
      --settingsAccent2: #5b8cff;
      --settingsHeaderBg: rgba(7, 15, 30, .86);
      --settingsOverlay: rgba(2, 7, 16, .74);
    }
    .drawerBackdrop{
      background:
        radial-gradient(circle at top, rgba(91, 140, 255, .18), transparent 32%),
        var(--settingsOverlay) !important;
      backdrop-filter: blur(6px);
    }
    .drawer{
      width:min(640px, 96vw) !important;
      background:
        radial-gradient(circle at top right, rgba(125, 211, 252, .14), transparent 28%),
        radial-gradient(circle at top left, rgba(91, 140, 255, .16), transparent 24%),
        linear-gradient(180deg, var(--settingsBg), var(--settingsBg2)) !important;
      color: var(--settingsText) !important;
      border-left: 1px solid var(--settingsBorderStrong) !important;
      box-shadow: -24px 0 80px rgba(0,0,0,.48) !important;
      overflow:hidden;
    }
    .drawer::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 18%, transparent 82%, rgba(255,255,255,.03));
      opacity:.75;
    }
    .drawer *{ color: inherit; }
    .drawer .muted, .drawer .subtle, .drawer small{ color: var(--settingsMuted) !important; }
    .drawer a{ color: var(--settingsText) !important; }
    .drawerHeader{
      position:relative;
      padding:24px 24px 18px;
      border-bottom: 1px solid var(--settingsBorder) !important;
      background: linear-gradient(180deg, rgba(6,12,25,.86), rgba(6,12,25,.55)) !important;
      backdrop-filter: blur(16px);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      z-index:2;
    }
    .drawerHeaderContent{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .drawerEyebrow{
      font-size:11px;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
      color: rgba(201, 216, 255, .62);
    }
    .drawerTitleGroup{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .drawerHeader h2{
      margin:0;
      font-size:26px;
      line-height:1.05;
      letter-spacing:-.03em;
      color: var(--settingsText) !important;
    }
    .drawerHeader p{
      margin:0;
      max-width:460px;
      line-height:1.5;
      color: var(--settingsMuted) !important;
    }
    .drawerHeaderActions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .drawerSaveState{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--settingsBorder);
      background: rgba(255,255,255,.05);
      color: var(--settingsText) !important;
      font-size:12px;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
    }
    .drawerSaveDot{
      width:8px;
      height:8px;
      border-radius:999px;
      background: rgba(159, 175, 206, .72);
      box-shadow: 0 0 0 4px rgba(159, 175, 206, .14);
      transition: background .18s ease, box-shadow .18s ease;
      flex:0 0 auto;
    }
    .drawerSaveState[data-state="saving"] .drawerSaveDot{
      background: #7dd3fc;
      box-shadow: 0 0 0 4px rgba(125, 211, 252, .18);
    }
    .drawerSaveState[data-state="saved"] .drawerSaveDot{
      background: #34d399;
      box-shadow: 0 0 0 4px rgba(52, 211, 153, .16);
    }
    .drawerSaveState[data-state="error"] .drawerSaveDot{
      background: #fb7185;
      box-shadow: 0 0 0 4px rgba(251, 113, 133, .18);
    }
    .drawerBody{
      position:relative;
      padding:18px 24px 24px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap:18px;
      scrollbar-gutter: stable;
      z-index:1;
    }
    .drawer .tabs{
      position:sticky;
      top:0;
      z-index:4;
      display:grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap:4px;
      padding:4px;
      border-radius:18px;
      border:1px solid var(--settingsBorder);
      background: rgba(8, 15, 28, .86);
      backdrop-filter: blur(18px);
      box-shadow: 0 20px 36px rgba(0,0,0,.22);
    }
    .drawer button, .drawer .btn{
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
      color: var(--settingsText) !important;
      border: 1px solid var(--settingsBorder) !important;
      border-radius: 14px !important;
      min-height: 44px;
      padding: 10px 16px !important;
      box-shadow: 0 12px 24px rgba(0,0,0,.18);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .01em;
      transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .drawer button:hover, .drawer .btn:hover{
      background: var(--settingsBtnBgHover) !important;
      border-color: rgba(168,191,255,.28) !important;
      box-shadow: 0 16px 28px rgba(0,0,0,.24);
      transform: translateY(-1px);
    }
    .drawer .btn.primary{
      background: linear-gradient(135deg, rgba(91, 140, 255, .96), rgba(125, 211, 252, .82)) !important;
      border-color: rgba(125, 211, 252, .34) !important;
      color:#f8fbff !important;
    }
	    .drawer .btn.primary:hover{
	      background: linear-gradient(135deg, rgba(110, 154, 255, 1), rgba(141, 221, 255, .9)) !important;
	    }
	    .standaloneStartupIntro,
	    .standaloneSetupIntro,
	    .standaloneOpenBoardBtn{
	      display:none !important;
	    }
	    body.roomboardStandaloneMode{
	      min-height:100vh;
	      background:#07101f;
	      overflow:hidden;
	    }
	    body.roomboardStandaloneMode header,
	    body.roomboardStandaloneMode main,
	    body.roomboardStandaloneMode #syncPill,
	    body.roomboardStandaloneMode #toTopBtn,
	    body.roomboardStandaloneMode .mobileQuickViewPopup,
	    body.roomboardStandaloneMode .mobileQuickViewPopupBackdrop,
	    body.roomboardStandaloneMode .quickAddBackdrop,
	    body.roomboardStandaloneMode .quickAddModal{
	      display:none !important;
	    }
	    body.roomboardStandaloneMode .drawerBackdrop{
	      display:none !important;
	    }
	    body.roomboardStandaloneMode .drawer{
	      inset:0 !important;
	      width:100vw !important;
	      max-width:none !important;
	      min-height:100vh;
	      transform:translateX(0) !important;
	      border-left:0 !important;
	      box-shadow:none !important;
	      display:flex;
	      flex-direction:column;
	      background:
	        linear-gradient(150deg, #07101f 0%, #101827 48%, #10231e 100%) !important;
	    }
	    body.roomboardStandaloneMode .drawer::before{
	      background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 22%, rgba(125,211,252,.06) 100%);
	    }
	    body.roomboardStandaloneMode .drawerHeader{
	      padding:22px max(18px, 4vw) 18px;
	    }
	    body.roomboardStandaloneMode .drawerHeader h2{
	      font-size:24px;
	      letter-spacing:0;
	    }
	    body.roomboardStandaloneMode .drawerBody{
	      width:min(1120px, 100%);
	      flex:1 1 auto;
	      margin:0 auto;
	      padding:26px max(18px, 4vw) 42px;
	    }
	    body.roomboardStandaloneMode #closeSettingsBtn{
	      display:none !important;
	    }
	    body.standaloneAuthMode .drawerSaveState,
	    body.standaloneAuthMode .settingsMobileTabPicker,
	    body.standaloneAuthMode .drawer .tabs,
	    body.standaloneAuthMode .tabPanel:not(#tabAccount),
	    body.standaloneAuthMode #tabAccount > :not(.clinicAccessCard):not(#joinPracticePanel){
	      display:none !important;
	    }
	    body.standaloneAuthMode .drawerBody{
	      width:min(720px, 100%);
	      justify-content:center;
	      gap:18px;
	    }
	    body.standaloneAuthMode #tabAccount{
	      display:block !important;
	    }
	    body.standaloneAuthMode .clinicAccessCard,
	    body.standaloneAuthMode #joinPracticePanel{
	      width:100%;
	    }
	    body.standaloneAuthMode .standaloneStartupIntro{
	      display:flex !important;
	      flex-direction:column;
	      gap:10px;
	      width:100%;
	    }
	    body.standaloneSetupMode .standaloneSetupIntro{
	      display:flex !important;
	      align-items:flex-end;
	      justify-content:space-between;
	      gap:18px;
	      padding:18px;
	      border:1px solid var(--settingsBorder);
	      border-radius:8px;
	      background:rgba(255,255,255,.06);
	    }
	    body.standaloneSetupMode .standaloneOpenBoardBtn{
	      display:inline-flex !important;
	      align-items:center;
	      justify-content:center;
	      white-space:nowrap;
	    }
	    .standaloneEyebrow{
	      font-size:12px;
	      line-height:1.2;
	      font-weight:700;
	      letter-spacing:0;
	      text-transform:uppercase;
	      color:rgba(201, 216, 255, .72);
	    }
	    .standaloneStartupIntro h1,
	    .standaloneSetupIntro h1{
	      margin:0;
	      font-size:32px;
	      line-height:1.05;
	      letter-spacing:0;
	      color:var(--settingsText);
	    }
	    .standaloneStartupIntro p,
	    .standaloneSetupIntro p{
	      margin:0;
	      max-width:620px;
	      font-size:15px;
	      line-height:1.5;
	      color:var(--settingsMuted);
	    }
	    @media (max-width: 720px){
	      body.roomboardStandaloneMode .drawerHeader{
	        padding:18px 16px 14px;
	      }
	      body.roomboardStandaloneMode .drawerBody{
	        padding:20px 16px 32px;
	      }
	      body.standaloneSetupMode .standaloneSetupIntro{
	        align-items:stretch;
	        flex-direction:column;
	      }
	      body.standaloneSetupMode .standaloneOpenBoardBtn{
	        width:100%;
	      }
	      .standaloneStartupIntro h1,
	      .standaloneSetupIntro h1{
	        font-size:28px;
	      }
	    }
	    .drawer .tabBtn{
	      min-height:42px;
	      padding:8px 8px !important;
      border-radius:12px !important;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      text-align:center;
      white-space:normal;
      background: rgba(255,255,255,.03) !important;
      box-shadow:none !important;
    }
    .drawer .tabBtn span{
      font-size:11px;
      font-weight:700;
      line-height:1.1;
      color: var(--settingsText) !important;
      white-space:normal;
    }
    .drawer .tabBtn small{
      display:none;
      font-size:10px;
      line-height:1.05;
      color: rgba(205, 218, 247, .64) !important;
    }
    .drawer .tabBtn.active{
      background: linear-gradient(135deg, rgba(91, 140, 255, .24), rgba(125, 211, 252, .16)) !important;
      border-color: rgba(125, 211, 252, .36) !important;
      box-shadow: 0 18px 34px rgba(25, 59, 121, .28) !important;
      transform: translateY(-1px);
    }
    .drawer .tabBtn.active small{
      color: rgba(236, 243, 255, .82) !important;
    }
    .drawer .card, .drawer .panel, .drawer .section{
      position:relative;
      background: linear-gradient(180deg, rgba(13, 24, 46, .9), rgba(10, 19, 36, .86)) !important;
      border: 1px solid var(--settingsBorder) !important;
      border-radius: 22px !important;
      padding: 18px !important;
      box-shadow: 0 22px 46px rgba(0,0,0,.22);
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .drawer .card h3{
      margin:0;
      font-size:16px;
      font-weight:700;
      letter-spacing:-.01em;
      color: var(--settingsText) !important;
    }
    .drawer .card > .muted{
      margin-top:-8px;
      line-height:1.5;
    }
    .drawer .field{
      min-width:0;
      gap:8px;
    }
    .drawer label{
      font-size:11px;
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(211, 223, 250, .74) !important;
    }
    .drawer .miniRow{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .drawer input, .drawer select, .drawer textarea{
      background: linear-gradient(180deg, rgba(8, 16, 32, .94), rgba(12, 22, 42, .92)) !important;
      color: var(--settingsText) !important;
      border: 1px solid var(--settingsBorder) !important;
      border-radius: 14px !important;
      padding: 12px 14px !important;
      min-height: 46px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .drawer select{
      font: inherit;
      color-scheme: dark;
    }
    .drawer select option,
    .drawer select optgroup{
      background: #0f172a;
      color: #edf4ff;
      font: inherit;
    }
    .drawer textarea{ min-height: 96px; }
    .drawer input:hover, .drawer select:hover, .drawer textarea:hover{
      border-color: rgba(168,191,255,.26) !important;
    }
    .drawer input::placeholder, .drawer textarea::placeholder{
      color: rgba(233,238,252,.50) !important;
    }
    .drawer input[type="range"]{
      appearance:none;
      min-height:auto;
      height:8px;
      padding:0 !important;
      border:0 !important;
      border-radius:999px !important;
      background: linear-gradient(90deg, rgba(91, 140, 255, .58), rgba(125, 211, 252, .7)) !important;
      box-shadow:none !important;
      cursor:pointer;
    }
    .drawer input[type="range"]::-webkit-slider-thumb{
      appearance:none;
      width:18px;
      height:18px;
      border-radius:999px;
      background:#f5f9ff;
      border:2px solid rgba(91, 140, 255, .8);
      box-shadow:0 6px 16px rgba(0,0,0,.25);
    }
    .drawer input[type="range"]::-moz-range-thumb{
      width:18px;
      height:18px;
      border-radius:999px;
      background:#f5f9ff;
      border:2px solid rgba(91, 140, 255, .8);
      box-shadow:0 6px 16px rgba(0,0,0,.25);
    }
    .drawer input[type="color"]{
      padding:4px !important;
      min-height:46px;
      cursor:pointer;
    }
    .drawer input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
    .drawer input[type="color"]::-webkit-color-swatch{
      border:none;
      border-radius:10px;
    }
    .drawer :is(input,select,textarea,button,.btn):focus{
      outline: none !important;
      box-shadow: 0 0 0 4px var(--settingsFocusRing) !important;
      border-color: rgba(125, 211, 252, .42) !important;
    }
    .drawer .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .drawer .themePresetGrid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .drawer .themePresetBtn{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:14px;
      min-height:160px;
      padding:14px !important;
      border-radius:20px !important;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important;
      box-shadow: none !important;
      text-align:left;
    }
    .drawer .themePresetBtn:hover{
      transform: translateY(-2px);
    }
    .drawer .themePresetBtn.active{
      border-color: rgba(125, 211, 252, .44) !important;
      background: linear-gradient(180deg, rgba(91, 140, 255, .18), rgba(125, 211, 252, .08)) !important;
      box-shadow: 0 18px 34px rgba(25, 59, 121, .22) !important;
    }
    .drawer .themePresetSwatch{
      position:relative;
      display:grid;
      gap:10px;
      padding:14px;
      min-height:82px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: var(--themePreviewBg, rgba(8, 16, 32, .92));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
      overflow:hidden;
    }
    .drawer .themePresetSwatch::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%);
      pointer-events:none;
    }
    .drawer .themePreviewPanel{
      width:62%;
      height:22px;
      border-radius:999px;
      background: var(--themePreviewPanel, rgba(255,255,255,.16));
      border:1px solid rgba(255,255,255,.10);
    }
    .drawer .themePreviewRows{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .drawer .themePreviewLines{
      min-width:0;
      flex:1;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .drawer .themePreviewLine{
      height:8px;
      border-radius:999px;
      background: var(--themePreviewMuted, rgba(255,255,255,.45));
    }
    .drawer .themePreviewLineStrong{
      width:76%;
      background: var(--themePreviewText, rgba(255,255,255,.92));
    }
    .drawer .themePreviewLineSoft{
      width:54%;
    }
    .drawer .themePreviewChip{
      width:44px;
      height:28px;
      border-radius:12px;
      background: var(--themePreviewAccent, rgba(125, 211, 252, .76));
      border:1px solid rgba(255,255,255,.18);
      box-shadow: 0 10px 18px rgba(0,0,0,.14);
      flex:0 0 auto;
    }
    .drawer .themePresetText{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:0;
    }
    .drawer .themePresetHeader{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .drawer .themePresetName{
      font-size:15px;
      font-weight:700;
      color: var(--settingsText) !important;
    }
    .drawer .themePresetBadge{
      display:inline-flex;
      align-items:center;
      min-height:22px;
      padding:0 8px;
      border-radius:999px;
      border:1px solid rgba(125, 211, 252, .30);
      background: rgba(125, 211, 252, .12);
      color: rgba(235, 244, 255, .90) !important;
      font-size:11px;
      font-weight:700;
      letter-spacing:.05em;
      text-transform:uppercase;
    }
    .drawer .themePresetDesc{
      color: var(--settingsMuted) !important;
      line-height:1.45;
      font-size:13px;
    }
    .drawer #themePresetHelp{
      min-height:38px;
    }
    .drawer .toggle{
      padding:16px;
      border-radius:20px;
      border:1px solid var(--settingsBorder);
      background: linear-gradient(180deg, rgba(18, 31, 58, .9), rgba(11, 19, 37, .9));
      align-items:center;
      gap:14px;
    }
    .drawer .toggle > div:first-child{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .drawer .switch{
      width:52px;
      height:30px;
      border-radius:999px;
      border:1px solid var(--settingsBorder);
      background: rgba(255,255,255,.08);
      position:relative;
      cursor:pointer;
      flex:0 0 auto;
    }
    .drawer .knob{
      width:24px;
      height:24px;
      top:2px;
      left:2px;
      border-radius:999px;
      background:#f5f9ff;
      box-shadow:0 6px 16px rgba(0,0,0,.25);
      transition: transform .18s ease, background .18s ease;
    }
    .drawer .switch.on{
      background: linear-gradient(135deg, rgba(91, 140, 255, .34), rgba(125, 211, 252, .26));
      border-color: rgba(125, 211, 252, .40);
    }
    .drawer .switch.on .knob{
      transform: translateX(22px);
      background:#98edff;
    }
    .drawer .listRow{
      grid-template-columns: minmax(0, 1fr) minmax(110px, auto) auto;
      gap:10px;
      align-items:center;
      padding:12px;
      border-radius:18px;
      background: rgba(6, 12, 24, .34);
      border:1px solid rgba(168,191,255,.10);
    }
    .drawer #roomsList .listRow{
      grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .drawer #roomsList .listRow.isDragging{
      opacity:.6;
    }
    .drawer #roomsList .listRow.isDropTarget{
      border-color: rgba(125, 211, 252, .42);
      box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .18);
    }
    .drawer .dragHandle{
      width:42px;
      height:42px;
      border-radius:14px;
      border:1px solid rgba(168,191,255,.18);
      background: rgba(255,255,255,.05);
      color: var(--settingsMuted);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      cursor:grab;
      user-select:none;
    }
    .drawer .dragHandle:active{
      cursor:grabbing;
    }
    .drawer #roomsList,
    .drawer #colorsList,
    .drawer #doctorsList,
    .drawer #doctorInitialsList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .drawer #doctorInitialsList .listRow{
      grid-template-columns: minmax(0, 1.2fr) minmax(120px, 130px) auto;
    }
    .drawer .trash{
      width:42px;
      height:42px;
      border-radius:14px !important;
      border:1px solid rgba(251, 113, 133, .26) !important;
      background: rgba(251, 113, 133, .10) !important;
      color: #ffd6de !important;
      box-shadow:none !important;
    }
    .drawer .trash:hover{
      border-color: rgba(251, 113, 133, .42) !important;
      background: rgba(251, 113, 133, .16) !important;
    }
    .drawer .settingsCollapsible{
      border:1px solid rgba(168,191,255,.14);
      border-radius:18px;
      background: rgba(6, 12, 24, .26);
      overflow:hidden;
    }
    .drawer .settingsCollapsible summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 16px;
      user-select:none;
    }
    .drawer .settingsCollapsible summary::-webkit-details-marker{
      display:none;
    }
    .drawer .settingsCollapsibleCopy{
      flex:1 1 auto;
      min-width:0;
    }
    .drawer .settingsCollapsible summary strong{
      display:block;
      font-size:14px;
      color:var(--settingsText);
    }
    .drawer .settingsCollapsible summary small{
      display:block;
      margin-top:4px;
      color:var(--settingsMuted);
      line-height:1.4;
    }
    .drawer .settingsCollapsibleHint{
      flex:0 0 auto;
      width:32px;
      height:32px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--settingsMuted);
      border:1px solid rgba(168,191,255,.18);
      border-radius:999px;
      padding:0;
      background: rgba(255,255,255,.04);
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }
    .drawer .settingsCollapsibleHint::before{
      content:"";
      width:8px;
      height:8px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform: translateY(-1px) rotate(45deg);
      transition: transform .18s ease;
    }
    .drawer .settingsCollapsible[open] .settingsCollapsibleHint{
      color:var(--settingsText);
      border-color: rgba(125, 211, 252, .32);
      background: rgba(91, 140, 255, .12);
    }
    .drawer .settingsCollapsible[open] .settingsCollapsibleHint::before{
      transform: translateY(1px) rotate(-135deg);
    }
    .drawer .settingsCollapsibleBody{
      padding:0 16px 16px;
      display:flex;
      flex-direction:column;
      gap:14px;
      border-top:1px solid rgba(168,191,255,.08);
    }
    .drawer .feedbackChecklist{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .drawer .authModeSwitch{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .drawer .authModeBtn{
      min-height:42px;
      border-radius:14px;
      border:1px solid rgba(168,191,255,.18);
      background:rgba(6, 12, 24, .28);
      color:var(--settingsText);
      font-weight:700;
      cursor:pointer;
      transition:background .18s ease, border-color .18s ease, transform .18s ease;
    }
    .drawer .authModeBtn:hover{
      border-color: rgba(125,211,252,.34);
      transform: translateY(-1px);
    }
    .drawer .authModeBtn.active{
      background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(125,211,252,.16));
      border-color: rgba(125,211,252,.42);
      box-shadow: inset 0 0 0 1px rgba(125,211,252,.12);
    }
    .drawer .billingCard{
      display:none;
    }
    .drawer .billingCardHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:14px;
    }
    .drawer .billingBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:28px;
      padding:5px 10px;
      border:1px solid var(--settingsBorder);
      border-radius:999px;
      background:rgba(255,255,255,.06);
      color:var(--settingsText);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }
    .drawer .billingBadge.isActive{
      border-color:rgba(74,222,128,.34);
      background:rgba(34,197,94,.16);
      color:#bbf7d0;
    }
    .drawer .billingBadge.isTrial{
      border-color:rgba(125,211,252,.34);
      background:rgba(14,165,233,.16);
      color:#bae6fd;
    }
    .drawer .billingBadge.isBlocked{
      border-color:rgba(248,113,113,.42);
      background:rgba(239,68,68,.16);
      color:#fecaca;
    }
    .drawer .billingPlanGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
      margin:14px 0;
    }
    .drawer .billingPlanBtn{
      align-items:flex-start;
      flex-direction:column;
      min-height:82px;
      text-align:left;
    }
    .drawer .billingPlanBtn strong{
      color:var(--settingsText);
      font-size:15px;
    }
    .drawer .billingPlanBtn span{
      color:var(--settingsMuted);
      font-size:12px;
      font-weight:600;
    }
    .drawer .billingPlanBtn.isCurrent{
      border-color:rgba(125,211,252,.46) !important;
      background:rgba(59,130,246,.18) !important;
    }
    body.billingAccessBlocked .standaloneOpenBoardBtn{
      opacity:.55;
      cursor:not-allowed;
    }
    .drawer .feedbackChecklistEmpty{
      padding:14px 16px;
      border-radius:16px;
      border:1px dashed rgba(168,191,255,.18);
      background: rgba(6, 12, 24, .24);
      color:var(--settingsMuted);
      line-height:1.45;
    }
    .drawer .feedbackItem{
      display:grid;
      grid-template-columns:auto minmax(0, 1fr) auto;
      gap:10px;
      align-items:start;
      padding:12px;
      border-radius:18px;
      background: rgba(6, 12, 24, .34);
      border:1px solid rgba(168,191,255,.10);
    }
    .drawer .feedbackCheck{
      width:22px;
      height:22px;
      margin-top:2px;
      accent-color:#7dd3fc;
      cursor:pointer;
    }
    .drawer .feedbackBody{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .drawer .feedbackText{
      color:var(--settingsText);
      line-height:1.45;
      white-space:pre-wrap;
      word-break:break-word;
    }
    .drawer .feedbackMeta{
      color:var(--settingsMuted);
      font-size:12px;
    }
    .drawer .stopwatchDiagnosticsSummary{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
      gap:10px;
    }
    .drawer .stopwatchDiagnosticsStat{
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(168,191,255,.12);
      background: rgba(6, 12, 24, .30);
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .drawer .stopwatchDiagnosticsStat strong{
      font-size:22px;
      line-height:1;
      color:var(--settingsText);
    }
    .drawer .stopwatchDiagnosticsStat span{
      font-size:12px;
      letter-spacing:.05em;
      text-transform:uppercase;
      color:var(--settingsMuted);
    }
    .drawer .stopwatchDiagnosticsList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .drawer .stopwatchDiagnosticsEmpty{
      padding:14px 16px;
      border-radius:16px;
      border:1px dashed rgba(168,191,255,.18);
      background: rgba(6, 12, 24, .24);
      color:var(--settingsMuted);
      line-height:1.45;
    }
    .drawer .stopwatchDiagnosticsRow{
      display:grid;
      grid-template-columns:minmax(0, 1.3fr) minmax(110px, auto) minmax(90px, auto) auto;
      gap:10px;
      align-items:center;
      padding:12px;
      border-radius:18px;
      border:1px solid rgba(168,191,255,.10);
      background: rgba(6, 12, 24, .34);
    }
    .drawer .stopwatchDiagnosticsRow.isWarn{
      border-color: rgba(250, 204, 21, .24);
      background: rgba(250, 204, 21, .06);
    }
    .drawer .stopwatchDiagnosticsRow.isError{
      border-color: rgba(248, 113, 113, .26);
      background: rgba(248, 113, 113, .07);
    }
    .drawer .stopwatchDiagnosticsPrimary{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .drawer .stopwatchDiagnosticsPrimary strong{
      color:var(--settingsText);
      font-size:14px;
    }
    .drawer .stopwatchDiagnosticsMeta{
      color:var(--settingsMuted);
      font-size:12px;
      line-height:1.4;
    }
    .drawer .stopwatchDiagnosticsTimer{
      font-weight:700;
      color:var(--settingsText);
      letter-spacing:.03em;
      white-space:nowrap;
    }
    .drawer .stopwatchDiagnosticsSession{
      font-size:12px;
      color:var(--settingsMuted);
      white-space:nowrap;
    }
    .drawer .stopwatchDiagnosticsIssues{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:6px;
    }
    .drawer .stopwatchDiagnosticsBadge{
      display:inline-flex;
      align-items:center;
      min-height:24px;
      padding:0 9px;
      border-radius:999px;
      border:1px solid rgba(168,191,255,.16);
      background: rgba(255,255,255,.05);
      color:var(--settingsText);
      font-size:11px;
      font-weight:700;
      letter-spacing:.05em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .drawer .stopwatchDiagnosticsBadge.isWarn{
      border-color: rgba(250, 204, 21, .32);
      background: rgba(250, 204, 21, .12);
      color:#fff6cf;
    }
    .drawer .stopwatchDiagnosticsBadge.isError{
      border-color: rgba(248, 113, 113, .36);
      background: rgba(248, 113, 113, .13);
      color:#ffe1e1;
    }
    .drawer .stopwatchDiagnosticsBadge.isOk{
      border-color: rgba(74, 222, 128, .28);
      background: rgba(74, 222, 128, .12);
      color:#d7ffe4;
    }
    .drawer .stopwatchDiagnosticsBadge.isInfo{
      border-color: rgba(125, 211, 252, .28);
      background: rgba(125, 211, 252, .10);
      color:#ddf4ff;
    }
    .drawer .doctorBadgePreviewRow{
      min-height:60px;
      border-radius:16px;
      border:1px solid rgba(168,191,255,.12);
      background: rgba(6, 12, 24, .30);
      padding:14px 16px;
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .drawer .doctorBadgeSettingsPanel{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:16px;
      border-radius:18px;
      border:1px solid rgba(168,191,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
        rgba(6,12,24,.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .drawer .doctorBadgeGlobalGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .drawer .doctorBadgeGlobalField{
      min-width:0;
      padding:14px;
      border-radius:16px;
      border:1px solid rgba(168,191,255,.10);
      background: rgba(9, 18, 36, .52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .drawer .doctorBadgeRangeRow{
      display:grid;
      grid-template-columns:minmax(0, 1fr) 78px;
      gap:10px;
      align-items:center;
    }
    .drawer .doctorBadgeRangeRow input[type="text"]{
      text-align:center;
      font-variant-numeric: tabular-nums;
    }
    .drawer .doctorBadgeStylesHeader{
      display:grid;
      grid-template-columns:minmax(0, 1.15fr) minmax(100px, auto) minmax(88px, auto) minmax(88px, auto) minmax(118px, auto) auto;
      gap:10px;
      align-items:center;
      padding:0 4px;
      color: var(--settingsMuted);
      font-size:11px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .drawer .doctorBadgeStyleRow{
      grid-template-columns:minmax(0, 1.15fr) minmax(100px, auto) minmax(88px, auto) minmax(88px, auto) minmax(118px, auto) auto;
      gap:10px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(168,191,255,.10);
      background: rgba(7, 14, 28, .46);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }
    .drawer .doctorBadgeStyleRow .docInitBadge{
      justify-self:flex-start;
    }
    .drawer .doctorBadgeDoctorCell{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .drawer .doctorBadgeDoctorName{
      font-weight:700;
      color: var(--settingsText);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .drawer .doctorBadgeDoctorMeta{
      color: var(--settingsMuted);
      font-size:12px;
    }
    .drawer .feedbackItem.isDone{
      border-color: rgba(134, 239, 172, .20);
      background: rgba(20, 83, 45, .14);
    }
    .drawer .feedbackItem.isDone .feedbackText{
      text-decoration: line-through;
      opacity:.72;
    }
    .drawer .tabPanel{ display:none; }
    .drawer .tabPanel.active{
      display:flex;
      flex-direction:column;
      gap:16px;
      animation: settingsFade .18s ease;
    }
    .settingsMobileTabPicker{
      display:none;
      flex-direction:column;
      gap:6px;
    }
    .settingsMobileTabPicker label{
      font-size:11px;
      letter-spacing:.06em;
      text-transform:uppercase;
      color: var(--settingsMuted) !important;
    }
    .settingsMobileTabPicker select{
      width:100%;
      min-height:42px;
      border-radius:14px;
      border:1px solid var(--settingsBorder);
      background: var(--settingsInputBg);
      color: var(--settingsText);
      padding:0 12px;
      font-size:14px;
      box-shadow: 0 10px 22px rgba(0,0,0,.16);
    }
    .settingsMobileTabPicker select option{
      background:#0b1630;
      color:#f3f7ff;
    }
    @keyframes settingsFade{
      from{ opacity:0; transform: translateY(8px); }
      to{ opacity:1; transform: translateY(0); }
    }
    @media (max-width: 720px){
      .drawer .tabs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .drawer .tabBtn{
        min-height:50px;
        padding:10px 10px !important;
        flex-direction:column;
        gap:2px;
        white-space:normal;
      }
      .drawer .tabBtn span{
        font-size:12px;
        line-height:1.05;
      }
      .drawer .tabBtn small{
        display:block;
      }
      .drawer .themePresetGrid{
        grid-template-columns: 1fr;
      }
      .drawer .settingsCollapsible summary{
        align-items:flex-start;
      }
      .drawer .miniRow,
      .drawer .listRow,
      .drawer #doctorInitialsList .listRow{
        grid-template-columns: 1fr;
      }
      .drawer .stopwatchDiagnosticsRow{
        grid-template-columns: 1fr;
      }
      .drawer .stopwatchDiagnosticsIssues{
        justify-content:flex-start;
      }
      .drawer .doctorBadgeGlobalGrid{
        grid-template-columns:1fr;
      }
      .drawer .doctorBadgeStylesHeader{
        display:none;
      }
      .drawer .doctorBadgeStyleRow{
        grid-template-columns:1fr;
        gap:12px;
      }
      .drawer .doctorBadgeStyleRow .docInitBadge{
        justify-self:center;
      }
      .drawer .doctorBadgeStyleRow input,
      .drawer .doctorBadgeStyleRow select,
      .drawer .doctorBadgeStyleRow .btn{
        width:100%;
      }
      .drawer #loggedInSummary .miniRow,
      .drawer #authCredentialsFields,
      .drawer #authCreateFields,
      .drawer #joinPracticeFields{
        grid-template-columns:1fr;
      }
      .drawer .billingCardHeader{
        flex-direction:column;
      }
      .drawer .billingPlanGrid{
        grid-template-columns:1fr;
      }
      .drawer .stopwatchDiagnosticsTimer,
      .drawer .stopwatchDiagnosticsSession{
        white-space:normal;
      }
    }
    @media (max-width: 560px){
      .drawer .tabs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .drawer{
        width:100vw !important;
      }
      .drawerHeader{
        padding:20px 18px 16px;
      }
      .drawerBody{
        padding:16px 18px 22px;
      }
      .drawer .authModeSwitch{
        grid-template-columns:1fr;
      }
      .drawer .doctorBadgeRangeRow{
        grid-template-columns:1fr;
      }
      .drawer .actions{
        flex-direction:column;
      }
      .drawer .actions .btn,
      .drawer .actions a.btn{
        width:100%;
        justify-content:center;
      }
    }


    /* Whiteboard list view (16 lines) */
    #displayGrid.listView{
      display:flex;
      flex-direction:column;
      gap:0px;
      /* reserve space so sticky header never covers first room row */
      padding-top: 0px;
    }
    #displayGrid.listView .activeDoctorDivider{
      flex:0 0 auto;
      width:100%;
      padding:7px 8px 5px;
      margin:6px 0 0;
    }
    #displayGrid.listView .activeDoctorDivider:first-child{
      margin-top:0;
    }
    #displayGrid.listView .activeDoctorDividerLabel{
      font-size:12px;
    }
    #displayGrid.listView .room{
      position:relative;
      padding:4px 8px;
      border-radius:0px;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      /* Full-row tint (set per-room in JS via --roomTint) */
      background: linear-gradient(90deg, var(--roomTint, rgba(15, 27, 51, .55)), var(--listRowFade, rgba(255,255,255,.03)));
      border:0; border-bottom:1px solid var(--listChromeBorder, var(--border));
      color: var(--displayFontColor);
    }
#displayGrid.listView .room:first-child{ border-top:1px solid var(--listChromeBorder, var(--border)); }
    #displayGrid.listView .room.cleaning{
      --roomTint: rgba(251,191,36,.18);
      border-color: rgba(251,191,36,.35);
    }
    #displayGrid.listView .room .roomTop,
    #displayGrid.listView .room .roomBody,
    #displayGrid.listView .room .timerBox{ display:none; }

    #displayGrid.listView .wbRow{
      width:100%;
      display:grid;
      grid-template-columns: 90px 1.4fr 1fr 1fr 1fr 2fr 110px;
      gap:6px;
      align-items:center;
      font-size: var(--fontDisplay);
      line-height:1.05;
    }
    #displayGrid.listView .wbCell{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    #displayGrid.listView .wbNotes{
      white-space:nowrap;
      overflow:visible;
      text-overflow:ellipsis;
      opacity:.95;
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }
	    #displayGrid.listView .wbNotesIconSlot{
	      flex:0 0 auto;
	      display:inline-flex;
	      align-items:center;
	      justify-content:center;
	      min-width:30px;
	    }
	    #displayGrid.listView .wbQuickNotes{
	      min-width:0;
	      overflow:hidden;
	      text-overflow:ellipsis;
	      white-space:nowrap;
	      color:var(--displayFontColor);
	      font-weight:700;
	    }
	    #displayGrid.listView .room .muted,
    #displayGrid.listView .wbTimerText,
    #displayGrid.listView .wbPatientName{
      color: var(--displayMutedColor);
    }
    #displayGrid.listView .wbPatientName,
    #displayGrid.listView .wbRoom,
    #displayGrid.listView .wbCell:not(.wbNotes) .docInitBadge + *{
      color: var(--displayFontColor);
    }
    #displayGrid.listView .wbTimer{
      font-variant-numeric: tabular-nums;
      text-align:right;
      font-size: var(--fontTimer);
    }
    #displayGrid.listView .wbRoom{
      font-weight:700;
      display:flex;
      align-items:center;
      gap:0px;
      min-width:0;
    }

    #displayGrid.listView .wbRoomNameWrap{
      position:relative;
      overflow:hidden;
      white-space:nowrap;
      flex:1;
      min-width:0;
    }
    #displayGrid.listView .wbRoomName{
      display:inline-block;
      white-space:nowrap;
      will-change: transform;
    }
    /* Only applied when JS detects overflow */
    #displayGrid.listView .wbRoomNameWrap.isOverflow .wbRoomName{
      animation: wbMarquee var(--wbMarqueeDur, 8s) linear infinite;
      padding-right: 24px; /* gap before repeating */
    }
    @keyframes wbMarquee{
      0%{ transform: translateX(0); }
      100%{ transform: translateX(calc(-1 * var(--wbMarqueeDist, 40px))); }
    }

    #displayGrid.listView .wbHeader{
      position:sticky;
      top:0; /* stick to top of display area */
      z-index:20;
      padding:8px 12px;
      border-radius:0px;
      background: rgba(11,18,32,.80);
      border:0; border-bottom:1px solid var(--border);
      backdrop-filter: blur(10px);
    }
    #displayGrid.listView .wbHeader{ margin-bottom: 2px; }
    #displayGrid.listView .wbHeader .wbCell{
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
      opacity:.8;
      font-weight:700;
    }
    @media (max-width: 900px){
      #displayGrid.listView .wbRow{
        grid-template-columns: 70px 1.2fr .9fr .9fr .9fr 1.6fr 92px;
      }
    }


    #displayGrid.listView .wbReady{
      display:inline-flex;
      gap:0px;
      align-items:center;
      margin-left:10px;
      white-space:nowrap;
      font-size: 12px;
      opacity:.95;
    }
    #displayGrid.listView .wbReady .r{
      padding:2px 6px;
      border-radius:999px;
      border:1px solid var(--listChromeBorder, rgba(255,255,255,.18));
      background: var(--listChromeBg, rgba(255,255,255,.06));
      color: var(--displayFontColor);
    }
#displayGrid.listView .room:first-child{ border-top:1px solid var(--listChromeBorder, var(--border)); }
    #displayGrid.listView .wbReady .r.off{
      opacity:.35;
    }
    #displayGrid.listView .roomNotesDock{
      position:relative;
      top:auto;
      right:auto;
      z-index:12;
      flex:0 0 auto;
    }
    #displayGrid.listView .roomNotesPanel{
      top:calc(100% + 8px);
      right:0;
    }


    .wbRow .wbCell:not(.wbRoom) .docInitBadge{ margin-right:10px; }
    .wbRow .wbCell:not(.wbRoom) .docInitBadge.isEmpty{ margin-right:0; }
    .wbPatientName{ display:inline-block; }
.docInitBadge{
	      display:inline-flex;
	      align-items:center;
	      justify-content:center;
	      position:relative;
	      isolation:isolate;
	      overflow:hidden;
	      min-width: calc(55px * var(--doctorInitBadgeScale));
	      height: calc(33px * var(--doctorInitBadgeScale));
	      padding: 0 calc(10px * var(--doctorInitBadgeScale));
	      border-radius: calc(12px * var(--doctorInitBadgeScale));
	      border: 1px solid var(--doctorBadgeBorder, var(--doctorInitBadgeBorder, rgba(255,255,255,.18)));
	      background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 46%),
        var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      color: var(--doctorBadgeText, var(--doctorInitBadgeText, inherit));
	      font-weight: 700;
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale));
	      letter-spacing: .5px;
      text-transform: uppercase;
      line-height: 1;
      text-shadow: 0 1px 1px rgba(0,0,0,.24);
      box-shadow: 0 6px 18px rgba(0,0,0,.18);
      user-select:none;
	    }
	    .docInitBadge::before{
	      content:"";
	      position:absolute;
	      inset:0;
	      background:
          radial-gradient(circle at 50% 18%, rgba(255,255,255,.26), transparent 48%),
          linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 56%);
	      opacity:.72;
	      pointer-events:none;
	      z-index:-1;
	      border-radius:inherit;
	      clip-path:inherit;
	    }
	    .docInitBadge.isEmpty{opacity:.0; border-color: transparent; background: transparent; box-shadow:none; min-width:0; padding:0;}
	    .docInitBadge[data-shape="square"]{
	      border-radius: calc(10px * var(--doctorInitBadgeScale));
	    }
	    .docInitBadge[data-shape="circle"]{
	      min-width: calc(38px * var(--doctorInitBadgeScale));
	      width: calc(38px * var(--doctorInitBadgeScale));
	      border-radius: 999px;
	      padding: 0;
	    }
	    .docInitBadge[data-shape="triangle"]{
	      min-width: calc(48px * var(--doctorInitBadgeScale));
	      height: calc(41px * var(--doctorInitBadgeScale));
	      border-radius: 0;
	      border-color: transparent;
	      clip-path: polygon(50% 3%, 4% 97%, 96% 97%);
	      padding: calc(8px * var(--doctorInitBadgeScale)) calc(7px * var(--doctorInitBadgeScale)) 0;
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .78);
	      letter-spacing: 0;
	      box-shadow:
          inset 0 0 0 1px var(--doctorBadgeBorder, var(--doctorInitBadgeBorder, rgba(255,255,255,.18))),
          0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="hexagon"]{
	      min-width: calc(56px * var(--doctorInitBadgeScale));
	      width: calc(56px * var(--doctorInitBadgeScale));
	      height: calc(36px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath fill=%27black%27 stroke=%27black%27 stroke-width=%2710%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27 d=%27M28 8H72L94 50L72 92H28L6 50Z%27/%3E%3C/svg%3E");
	      mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath fill=%27black%27 stroke=%27black%27 stroke-width=%2710%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27 d=%27M28 8H72L94 50L72 92H28L6 50Z%27/%3E%3C/svg%3E");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center;
	      mask-position: center;
	      -webkit-mask-size: 100% 100%;
	      mask-size: 100% 100%;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="star"]{
	      min-width: calc(50px * var(--doctorInitBadgeScale));
	      height: calc(43px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      padding: calc(3px * var(--doctorInitBadgeScale)) calc(5px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .74);
	      letter-spacing: 0;
	      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath fill=%27black%27 stroke=%27black%27 stroke-width=%279%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27 d=%27M50 8L63 34H92L69 54L78 84L50 68L22 84L31 54L8 34H37Z%27/%3E%3C/svg%3E");
	      mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath fill=%27black%27 stroke=%27black%27 stroke-width=%279%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27 d=%27M50 8L63 34H92L69 54L78 84L50 68L22 84L31 54L8 34H37Z%27/%3E%3C/svg%3E");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center;
	      mask-position: center;
	      -webkit-mask-size: 100% 100%;
	      mask-size: 100% 100%;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="crab"]{
	      min-width: calc(58px * var(--doctorInitBadgeScale));
	      width: calc(58px * var(--doctorInitBadgeScale));
	      height: calc(40px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      padding: calc(5px * var(--doctorInitBadgeScale)) calc(7px * var(--doctorInitBadgeScale)) calc(2px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .56);
	      letter-spacing: 0;
	      background: var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      -webkit-mask-image: url("./crab-badge.png");
	      mask-image: url("./crab-badge.png");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center;
	      mask-position: center;
	      -webkit-mask-size: contain;
	      mask-size: contain;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="crab"]::before{
	      display:none;
	    }
	    .docInitBadge[data-shape="bulldog"]{
	      min-width: calc(58px * var(--doctorInitBadgeScale));
	      width: calc(58px * var(--doctorInitBadgeScale));
	      height: calc(43px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      padding: calc(8px * var(--doctorInitBadgeScale)) calc(5px * var(--doctorInitBadgeScale)) calc(3px * var(--doctorInitBadgeScale)) calc(9px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .72);
	      letter-spacing: 0;
	      background: var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      -webkit-mask-image: url("./french-bulldog-badge.png");
	      mask-image: url("./french-bulldog-badge.png");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center 46%;
	      mask-position: center 46%;
	      -webkit-mask-size: contain;
	      mask-size: contain;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="bulldog"]::before{
	      display:none;
	    }
	    .docInitBadge[data-shape="flower"]{
	      min-width: calc(41px * var(--doctorInitBadgeScale));
	      width: calc(41px * var(--doctorInitBadgeScale));
	      height: calc(41px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      padding: calc(5px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .55);
	      letter-spacing: 0;
	      background: var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      -webkit-mask-image: url("./flower-badge.png");
	      mask-image: url("./flower-badge.png");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center;
	      mask-position: center;
	      -webkit-mask-size: contain;
	      mask-size: contain;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="flower"]::before{
	      display:none;
	    }
	    .docInitBadge[data-shape="flower2"]{
	      min-width: calc(44px * var(--doctorInitBadgeScale));
	      width: calc(44px * var(--doctorInitBadgeScale));
	      height: calc(44px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      padding: calc(5px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .5);
	      letter-spacing: 0;
	      background: var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      -webkit-mask-image: url("./flower2-badge.png");
	      mask-image: url("./flower2-badge.png");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center;
	      mask-position: center;
	      -webkit-mask-size: contain;
	      mask-size: contain;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="flower2"]::before{
	      display:none;
	    }
	    .docInitBadge[data-shape="golfball"]{
	      min-width: calc(38px * var(--doctorInitBadgeScale));
	      width: calc(38px * var(--doctorInitBadgeScale));
	      height: calc(38px * var(--doctorInitBadgeScale));
	      border-radius: 999px;
	      border-color: transparent;
	      padding: calc(4px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .53);
	      letter-spacing: 0;
	      background:
	        url("./golfball-badge.png") center / contain no-repeat,
	        var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="golfball"]::before{
	      display:none;
	    }
	    .docInitBadge[data-shape="strawberry"]{
	      min-width: calc(54px * var(--doctorInitBadgeScale));
	      width: calc(54px * var(--doctorInitBadgeScale));
	      height: calc(44px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      padding: calc(8px * var(--doctorInitBadgeScale)) calc(7px * var(--doctorInitBadgeScale)) calc(7px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .54);
	      letter-spacing: 0;
	      background: var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      -webkit-mask-image: url("./strawberry-badge.png");
	      mask-image: url("./strawberry-badge.png");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center;
	      mask-position: center;
	      -webkit-mask-size: contain;
	      mask-size: contain;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="strawberry"]::before{
	      display:none;
	    }
	    .docInitBadge[data-shape="turtle"]{
	      min-width: calc(42px * var(--doctorInitBadgeScale));
	      width: calc(42px * var(--doctorInitBadgeScale));
	      height: calc(39px * var(--doctorInitBadgeScale));
	      border-color: transparent;
	      padding: calc(5px * var(--doctorInitBadgeScale)) calc(6px * var(--doctorInitBadgeScale));
	      font-size: calc(var(--doctorInitBadgeFontSize) * var(--doctorInitBadgeScale) * .53);
	      letter-spacing: 0;
	      background: var(--doctorBadgeBg, var(--doctorInitBadgeBg, rgba(11,18,32,.35)));
	      -webkit-mask-image: url("./seaturtle-badge.png");
	      mask-image: url("./seaturtle-badge.png");
	      -webkit-mask-repeat: no-repeat;
	      mask-repeat: no-repeat;
	      -webkit-mask-position: center;
	      mask-position: center;
	      -webkit-mask-size: contain;
	      mask-size: contain;
	      box-shadow: 0 6px 18px rgba(0,0,0,.18);
	    }
	    .docInitBadge[data-shape="turtle"]::before{
	      display:none;
	    }
    .room .docInitCorner{
      position:absolute;
      right: 10px;
      bottom: 10px;
      z-index: 2;
    }
    /* list view inline badge between room and patient */
    .wbRoomInline{
      display:flex;
      align-items:center;
      gap:6px;
      min-width: 0;
    }


/* FIX: ensure doctor initials badges remain visible in both grid + list */
#displayGrid.listView .docInitBadge{
  background: var(--doctorBadgeBg, var(--doctorInitBadgeBg, var(--listBadgeBg, rgba(11,18,32,.35)))) !important;
  border: 1px solid var(--doctorBadgeBorder, var(--doctorInitBadgeBorder, var(--listBadgeBorder, rgba(255,255,255,.22)))) !important;
  color: var(--doctorBadgeText, var(--doctorInitBadgeText, var(--listBadgeText, var(--displayFontColor)))) !important;
}
#displayGrid.listView .wbRow .wbCell{ overflow: visible !important; }
#displayGrid.listView .wbRow .wbCell:not(.wbRoom){ overflow: visible !important; }



    /* List view: discharge/clean icon left of timer (no overlap) */
    #displayGrid.listView .wbTimerWrap{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    #displayGrid.listView .wbIconBtn{
      border: 1px solid var(--listChromeBorder, rgba(255,255,255,.18));
      background: var(--listChromeBg, rgba(255,255,255,.06));
      color: var(--displayFontColor);
      padding:4px 6px;
      border-radius:8px;
      cursor:pointer;
      font-size:14px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      flex:0 0 auto;
    }
    #displayGrid.listView .wbIconBtn:hover{ background: var(--listChromeBgHover, rgba(255,255,255,.10)); }
    #displayGrid.listView .wbIconBtn[data-action="displayRedo"]{
      min-width:24px;
      font-size:14px;
      font-weight:800;
    }
    #displayGrid.listView .wbTimerText{
      font-variant-numeric: tabular-nums;
      text-align:right;
      font-size: var(--fontTimer);
      flex:0 0 auto;
    }
    #displayGrid.listView .wbTimerText.timerRunning{
      color: var(--displayFontColor);
      text-shadow: 0 0 12px rgba(34,197,94,.14);
    }
    #displayGrid.listView .wbTimerText.timerAlert1{
      color: var(--timerAlert1Color, #fbbf24) !important;
      text-shadow: 0 0 14px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 24%, transparent);
    }
    #displayGrid.listView .wbTimerText.timerAlert2{
      color: var(--timerAlert2Color, #fb7185) !important;
      text-shadow: 0 0 14px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 24%, transparent);
    }
    #displayGrid.listView .wbTimerText.timerCleaning{
      color: #ffffff;
      text-shadow: 0 0 14px rgba(245,158,11,.18);
    }

.viewBox{padding:10px 12px; border:1px solid rgba(148,163,184,.35); background: rgba(15,23,42,.35); border-radius:12px; min-height:40px; display:flex; align-items:center; font-weight:650; color: var(--cardText, #e5e7eb);} 

/* --- Tech View compact Doctor Ready control --- */
.techRowCompact{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.techRowCompact .field{ flex: 1 1 auto; min-width: 0; }
.drReadyCompact{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.35);
  background: #e9ecef;
  border-radius:12px;
  color:#0b1220;
}
.drReadyCompact .drReadyIcon{
  font-size:16px;
  line-height:1;
}
.drReadyCompact .switch{
  margin:0;
}

/* Quick add modal */
.quickAddBackdrop{
  position:fixed;
  inset:0;
  display:none;
  background: rgba(2, 7, 16, .68);
  backdrop-filter: blur(6px);
  z-index:65;
}
.quickAddModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:66;
}
body.quickAddOpen .quickAddBackdrop{ display:block; }
body.quickAddOpen .quickAddModal{ display:flex; }
.quickAddCard{
  width:min(760px, 96vw);
  max-height:min(90vh, 920px);
  overflow:auto;
  border:1px solid var(--border);
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(110,168,254,.14), transparent 28%),
    linear-gradient(180deg, rgba(15, 27, 51, .98), rgba(10, 16, 30, .96));
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}
.quickAddHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px 16px;
  border-bottom:1px solid var(--border);
}
.quickAddHeader h2{
  margin:0 0 6px 0;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.03em;
}
.quickAddHeader p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
.quickAddBody{
  padding:20px 22px 22px;
}
.quickAddBody .card{
  background: rgba(255,255,255,.03);
}
.quickAddCard select{
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(148,163,184,.38);
  color-scheme: light;
}
.quickAddCard select option,
.quickAddCard select optgroup{
  background: #ffffff;
  color: #0f172a;
}
.quickAddGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.quickAddGrid .field.full{
  grid-column: 1 / -1;
}
.quickAddTimerField{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.quickAddTimerSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  background:rgba(15,23,42,.28);
}
.quickAddTimerCurrent{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.quickAddTimerCurrent strong{
  font-size:18px;
  line-height:1;
  font-variant-numeric: tabular-nums;
}
.quickAddTimerCurrent .muted{
  font-size:12px;
}
.quickAddTimerControls{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  background:rgba(15,23,42,.18);
}
.quickAddTimerButtons{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}
.quickAddTimerManual{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  gap:8px;
}
.quickAddTimerManual input{
  min-width:0;
}
.quickAddTimerHelp{
  font-size:12px;
  line-height:1.4;
}
.quickAddToggleRow{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.quickAddCurrentRoom{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.quickAddCurrentRoom h3{
  margin:0;
  font-size:20px;
}
.mobileOnlySettingsCard{
  display:none !important;
}
body.mobileQuickViewPopupOpen{
  overflow:hidden;
}
.mobileQuickViewGrid{
  display:flex !important;
  flex-direction:column;
  grid-template-columns:none !important;
  gap:10px !important;
}
.mobileQuickViewGrid .activeDoctorDivider{
  flex:0 0 auto;
  width:100%;
  margin:4px 0 -2px;
}
.mobileQuickViewGrid.is-empty-board{
  display:grid !important;
  grid-template-columns:repeat(var(--mobileQuickViewColumns, 4), minmax(0, 1fr)) !important;
  grid-template-rows:repeat(var(--mobileQuickViewRows, 4), minmax(0, 1fr));
  gap:min(var(--mobileQuickViewGap, 8px), 6px) !important;
  width:100%;
  max-height:var(--fullscreenDisplayHeight, calc(100dvh - 120px));
  aspect-ratio:1 / 1;
  align-content:stretch;
  overflow:hidden;
}
.mobileQuickViewItem{
  border:1px solid color-mix(in srgb, var(--mobileDisplayCardColor, var(--mobileQuickViewColor, #6ea8fe)) 72%, rgba(255,255,255,.16));
  border-radius:14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mobileDisplayCardColor, var(--mobileQuickViewColor, #6ea8fe)) 38%, rgba(15, 25, 46, .98)),
      color-mix(in srgb, var(--mobileDisplayCardColor, var(--mobileQuickViewColor, #6ea8fe)) 20%, rgba(9, 16, 30, .97))
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mobileDisplayCardColor, var(--mobileQuickViewColor, #6ea8fe)) 18%, rgba(255,255,255,.04)),
    0 10px 24px rgba(0,0,0,.18);
  overflow:hidden;
}
.mobileQuickViewEmptyTile{
  position:relative;
  min-height:0;
  height:100%;
  padding:clamp(10px, 2.8vw, 20px) clamp(6px, 2vw, 16px) clamp(14px, 3vw, 18px);
  border:1px solid color-mix(in srgb, var(--mobileQuickViewColor, #6ea8fe) 78%, rgba(255,255,255,.12));
  border-radius:0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mobileQuickViewColor, #6ea8fe) 56%, rgba(11, 21, 42, .98)),
      color-mix(in srgb, var(--mobileQuickViewColor, #6ea8fe) 42%, rgba(8, 17, 35, .98))
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mobileQuickViewColor, #6ea8fe) 44%, rgba(255,255,255,.02)),
    inset 0 10px 26px color-mix(in srgb, var(--mobileQuickViewColor, #6ea8fe) 28%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  appearance:none;
  width:100%;
  color:inherit;
  cursor:pointer;
}
.mobileQuickViewEmptyTile__name{
  max-width:100%;
  color:#dbe7ff;
  font-size:var(--mobileQuickViewFontSize, clamp(12px, 4.8vw, 26px));
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.03em;
  word-break:break-word;
  text-wrap:balance;
}
.mobileQuickViewEmptyTile__timer{
  position:absolute;
  right:clamp(6px, 1.8vw, 10px);
  bottom:clamp(6px, 1.6vw, 8px);
  min-width:34px;
  padding:4px 6px;
  border-radius:8px;
  background:rgba(5, 12, 26, .82);
  color:#e8f0ff;
  font-size:var(--mobileQuickViewTimerSize, clamp(11px, 2.8vw, 14px));
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.mobileQuickViewEmptyTile.timerAlertBorder{
  border-color:var(--timerAlert2Color, #fb7185) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 36%, transparent),
    0 0 0 1px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 18%, transparent);
}
.mobileQuickViewItem.is-cleaning{
  border-color: rgba(251,191,36,.85);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, rgba(251,191,36,.95) 34%, rgba(17, 24, 39, .98)),
      color-mix(in srgb, rgba(251,191,36,.95) 16%, rgba(9, 16, 30, .97))
    );
}
.mobileQuickViewItem.is-selected{
  border-color: rgba(125,211,252,.38);
  box-shadow:0 16px 36px rgba(14,165,233,.16);
}
.mobileQuickViewItem.doctorSelected{
  box-shadow:0 0 0 1px rgba(125,211,252,.22), 0 16px 36px rgba(14,165,233,.16);
}
.mobileQuickViewItem.is-mobile-drag-source,
.mobileQuickViewEmptyTile.is-mobile-drag-source{
  opacity:.56;
  transform:scale(.985);
}
.mobileQuickViewItem.is-mobile-drag-target,
.mobileQuickViewEmptyTile.is-mobile-drag-target{
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mobileQuickViewColor, #6ea8fe) 56%, rgba(125,211,252,.34)),
    0 12px 26px rgba(14,165,233,.18);
}
.mobileQuickViewItem.is-empty-card{
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.mobileQuickViewItem.is-mini-board{
  height:100%;
  min-height:0;
  border-radius:8px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mobileDisplayCardColor, var(--mobileQuickViewColor, #6ea8fe)) 20%, rgba(255,255,255,.03)),
    0 6px 14px rgba(0,0,0,.14);
}
.mobileQuickViewItem.is-mini-board.is-empty-card{
  opacity:.72;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mobileDisplayCardColor, var(--mobileQuickViewColor, #6ea8fe)) 20%, rgba(15, 25, 46, .98)),
      color-mix(in srgb, var(--mobileDisplayCardColor, var(--mobileQuickViewColor, #6ea8fe)) 10%, rgba(9, 16, 30, .97))
    );
}
.mobileQuickViewRow{
  appearance:none;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 12px 44px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  position:relative;
}
.mobileQuickViewItem.is-empty-card .mobileQuickViewRow{
  gap:0;
  padding:10px 12px 38px;
}
.mobileQuickMiniBoardRow{
  height:100%;
  min-height:0;
  gap:2px;
  padding:5px 5px 4px;
  justify-content:space-between;
  align-items:stretch;
  overflow:hidden;
}
.mobileQuickViewItem.is-empty-card .mobileQuickMiniBoardRow{
  gap:2px;
  padding:5px 5px 4px;
}
.mobileQuickViewRowTop,
.mobileQuickViewRowMain{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.mobileQuickViewItem.is-empty-card .mobileQuickViewRowTop{
  align-items:center;
}
.mobileQuickMiniTop,
.mobileQuickMiniBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  min-width:0;
}
.mobileQuickViewRoomName{
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}
.mobileQuickViewItem.is-mini-board .mobileQuickViewRoomName{
  min-width:0;
  color:var(--displayFontColor, #e8eefc);
  font-size:clamp(9px, calc(var(--mobileQuickViewFontSize, 22px) * .48), 13px);
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobileQuickViewItem.is-empty-card .mobileQuickViewRoomName{
  font-size:13px;
}
.mobileQuickViewItem.is-mini-board.is-empty-card .mobileQuickViewRoomName{
  font-size:clamp(9px, calc(var(--mobileQuickViewFontSize, 22px) * .45), 12px);
}
.mobileQuickViewPatientTop{
  max-width:52%;
  color:var(--displayFontColor, var(--text));
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobileQuickViewTimer{
  flex:0 0 auto;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  color:var(--displayFontColor, #e8eefc);
  font-size:20px;
  line-height:1;
}
.mobileQuickViewDoctorBadge{
  flex:0 0 auto;
}
.mobileQuickViewDoctorBadge .docInitBadge{
  min-width:42px;
}
.mobileQuickViewItem.is-mini-board .mobileQuickViewDoctorBadge .docInitBadge{
  min-width:20px;
  width:20px;
  height:20px;
  min-height:20px;
  padding:0;
  font-size:10px;
  line-height:1;
  box-shadow:none;
}
.mobileQuickViewTimerBox{
  position:absolute;
  right:12px;
  bottom:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  min-height:36px;
  padding:8px 11px;
  border-radius:11px;
  background:rgba(5, 12, 26, .9);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.mobileQuickViewItem.is-empty-card .mobileQuickViewTimerBox{
  right:10px;
  bottom:8px;
  min-width:54px;
  min-height:30px;
  padding:6px 9px;
}
.mobileQuickViewItem.is-empty-card .mobileQuickViewTimer{
  font-size:18px;
}
.mobileQuickViewItem.is-mini-board .mobileQuickViewTimerBox{
  position:static;
  align-self:center;
  min-width:0;
  min-height:0;
  width:100%;
  max-width:72px;
  padding:4px 5px;
  border-radius:7px;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.mobileQuickViewItem.is-mini-board .mobileQuickViewTimer{
  font-size:clamp(12px, calc(var(--mobileQuickViewTimerSize, 13px) * 1.06), 18px);
  line-height:1;
  letter-spacing:0;
}
.mobileQuickViewItem.is-mini-board.is-empty-card .mobileQuickViewTimer{
  font-size:clamp(11px, calc(var(--mobileQuickViewTimerSize, 13px) * .96), 16px);
}
.mobileQuickMiniPatient{
  min-width:0;
  color:var(--displayFontColor, #e8eefc);
  font-size:clamp(9px, calc(var(--mobileQuickViewFontSize, 22px) * .42), 12px);
  font-weight:800;
  line-height:1.05;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobileQuickViewItem.is-empty-card .mobileQuickMiniPatient{
  color:var(--displayMutedColor, var(--muted));
  font-weight:700;
}
.mobileQuickViewPatientWrap{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mobileQuickViewPatient{
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobileQuickViewMeta,
.mobileQuickViewPreview{
  color:var(--displayMutedColor, var(--muted));
  font-size:11px;
  line-height:1.35;
}
.mobileQuickViewItem.is-mini-board .mobileQuickViewMeta{
  min-width:0;
  flex:1 1 auto;
  font-size:clamp(8px, calc(var(--mobileQuickViewFontSize, 22px) * .34), 10px);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobileQuickMiniReady{
  display:flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
}
.mobileQuickMiniReadyBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px;
  height:13px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--displayMutedColor, var(--muted));
  font-size:8px;
  font-weight:900;
  line-height:1;
}
.mobileQuickMiniReadyBadge.is-on{
  border-color:rgba(134,239,172,.5);
  background:rgba(34,197,94,.2);
  color:#dcfce7;
}
.mobileQuickMiniReadyBadge.is-off{
  opacity:.48;
}
.mobileQuickViewPreview{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mobileDisplayExpandCard{
  padding:0 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobileDisplayExpandActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.mobileDisplayExpandActionBtn{
  flex:1 1 auto;
  min-height:36px;
  padding:8px 12px;
  font-size:13px;
}
.mobileDisplayExpandRedoBtn{
  flex:0 0 auto;
  width:36px;
  height:36px;
  min-width:36px;
  border:1px solid var(--btnBorder);
  background:var(--btnBg);
  color:var(--btnText);
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:16px;
  line-height:1;
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.mobileDisplayExpandGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.mobileDisplayExpandField,
.mobileDisplayExpandNotes{
  min-width:0;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.mobileDisplayExpandNotes{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mobileDisplayExpandLabel{
  display:block;
  margin-bottom:4px;
  color:var(--displayMutedColor, var(--muted));
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mobileDisplayExpandValue{
  color:var(--displayFontColor, var(--text));
  line-height:1.45;
  word-break:break-word;
}
.mobileDisplayExpandNotesBody{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobileDisplayExpandNotesBody .mobileQuickViewPopupNotesItem{
  gap:4px;
}
.mobileQuickViewPopupBackdrop{
  position:fixed;
  inset:0;
  z-index:69;
  background:rgba(2, 6, 16, .64);
  backdrop-filter:blur(10px);
}
.mobileQuickViewPopup{
  position:fixed;
  inset:auto 12px 14px;
  z-index:70;
}
.mobileQuickViewPopupCard{
  max-width:520px;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(16, 28, 52, .98), rgba(8, 16, 30, .98));
  box-shadow:0 24px 56px rgba(0,0,0,.34);
  color:var(--displayFontColor, var(--text));
  overflow:hidden;
}
.mobileQuickViewPopupHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mobileQuickViewPopupHeaderText{
  min-width:0;
}
.mobileQuickViewPopupRoom{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.03em;
}
.mobileQuickViewPopupPatient{
  margin-top:4px;
  color:var(--displayMutedColor, var(--muted));
  font-size:14px;
  line-height:1.35;
}
.mobileQuickViewPopupHeaderActions{
  display:flex;
  align-items:center;
  gap:10px;
}
.mobileQuickViewPopupTimer{
  min-width:52px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(5, 12, 26, .84);
  color:#e8f0ff;
  font-size:15px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.mobileQuickViewTimer.timerAlert1,
.mobileQuickViewEmptyTile__timer.timerAlert1,
.mobileQuickViewPopupTimer.timerAlert1{
  color:var(--timerAlert1Color, #fbbf24) !important;
  text-shadow:0 0 14px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 24%, transparent);
}
.mobileQuickViewTimer.timerAlert2,
.mobileQuickViewEmptyTile__timer.timerAlert2,
.mobileQuickViewPopupTimer.timerAlert2{
  color:var(--timerAlert2Color, #fb7185) !important;
  text-shadow:0 0 14px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 24%, transparent);
}
.mobileQuickViewTimer.timerRunning,
.mobileQuickViewPopupTimer.timerRunning{
  color:#f8fbff;
}
.mobileQuickViewTimer.timerRunning.timerAlert1,
.mobileQuickViewEmptyTile__timer.timerRunning.timerAlert1,
.mobileQuickViewPopupTimer.timerRunning.timerAlert1{
  color:var(--timerAlert1Color, #fbbf24) !important;
  text-shadow:0 0 14px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 24%, transparent);
}
.mobileQuickViewTimer.timerRunning.timerAlert2,
.mobileQuickViewEmptyTile__timer.timerRunning.timerAlert2,
.mobileQuickViewPopupTimer.timerRunning.timerAlert2{
  color:var(--timerAlert2Color, #fb7185) !important;
  text-shadow:0 0 14px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 24%, transparent);
}
.mobileQuickViewTimer.timerCleaning,
.mobileQuickViewEmptyTile__timer.timerCleaning,
.mobileQuickViewPopupTimer.timerCleaning{
  color:#fde68a;
}
.mobileQuickViewTimerBox.timerAlert1{
  border-color:color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 55%, rgba(255,255,255,.08));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 36%, transparent),
    0 0 0 1px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 14%, transparent);
}
.mobileQuickViewTimerBox.timerAlert2,
.mobileQuickViewPopupTimer.timerAlert2{
  border-color:color-mix(in srgb, var(--timerAlert2Color, #fb7185) 65%, rgba(255,255,255,.08));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 44%, transparent),
    0 0 0 1px color-mix(in srgb, var(--timerAlert2Color, #fb7185) 20%, transparent);
}
.mobileQuickViewPopupTimer.timerAlert1{
  border-color:color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 55%, rgba(255,255,255,.08));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 36%, transparent),
    0 0 0 1px color-mix(in srgb, var(--timerAlert1Color, #fbbf24) 14%, transparent);
}
.mobileQuickViewPopupClose{
  appearance:none;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:#e8f0ff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.mobileQuickViewPopupGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  padding:14px 16px 0;
}
.mobileQuickViewPopupField,
.mobileQuickViewPopupNotesCard{
  min-width:0;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}
.mobileQuickViewPopupNotesCard{
  margin:12px 16px 16px;
}
.mobileQuickViewPopupLabel,
.mobileQuickViewPopupNotesLabel{
  display:block;
  margin-bottom:4px;
  color:var(--displayMutedColor, var(--muted));
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mobileQuickViewPopupValue,
.mobileQuickViewPopupNotesValue{
  color:var(--displayFontColor, var(--text));
  line-height:1.45;
  word-break:break-word;
}
.mobileQuickViewPopupNotesBody{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobileQuickViewPopupNotesItem{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mobileQuickViewPopupNotesEmpty{
  color:var(--displayMutedColor, var(--muted));
  line-height:1.45;
}
.mobileQuickViewEmpty{
  padding:20px 18px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  text-align:center;
}
@media (min-width: 821px){
  .mobileQuickViewPopupBackdrop,
  .mobileQuickViewPopup{
    display:none !important;
  }
  body.mobileQuickViewPopupOpen{
    overflow:auto;
  }
}
	@media (max-width: 820px){
  .mobileOnlySettingsCard{
    display:flex !important;
  }
}
.scopeLegend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.scopeBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14);
}
.scopeBadgeWindow{
  background:rgba(125, 211, 252, .12);
  color:#bae6fd;
}
.scopeBadgePersonal{
  background:rgba(196, 181, 253, .12);
  color:#ddd6fe;
}
.scopeBadgeClinic{
  background:rgba(74, 222, 128, .12);
  color:#bbf7d0;
}
.scopeGrid{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.scopeItem{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.scopeItem strong{
  display:block;
  margin-bottom:4px;
  font-size:14px;
}
.settingsHealthList{
  margin:14px 0 0;
  padding-left:18px;
  display:grid;
  gap:8px;
}
.settingsHealthList li{
  color:var(--settingsText, var(--text));
}
.settingsHealthList.isOk li{
  color:#86efac;
}
.settingsHealthList.isWarn li{
  color:#fde68a;
}
.settingsHealthList.isError li{
  color:#fca5a5;
}
.settingsHealthHint{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.toastStack{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:12000;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:min(360px, calc(100vw - 28px));
}
.toastCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--toastBorder, rgba(255,255,255,.12));
  background:var(--toastBg, rgba(12, 23, 43, .98));
  color:var(--toastText, #f6f9ff);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}
.toastCard button{
  flex:0 0 auto;
}
#openQuickAddBtn{
  gap:0;
  padding:0;
}
  display:inline-flex;
  align-items:center;
  gap:6px;
}
@media (max-width: 720px){
  .mobileQuickViewDetailGrid{
    grid-template-columns:1fr;
  }
  .mobileQuickViewPopupGrid{
    grid-template-columns:1fr;
  }
  .mobileDisplayExpandGrid{
    grid-template-columns:1fr;
  }
  .mobileDisplayExpandActions{
    flex-wrap:wrap;
  }
  .mobileDisplayExpandRedoBtn{
    width:100%;
  }
  .quickAddModal{
    padding:14px;
  }
  .quickAddGrid,
  .quickAddToggleRow{
    grid-template-columns: 1fr;
  }
  .quickAddTimerButtons,
  .quickAddTimerManual{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .quickAddTimerManual input{
    grid-column:1 / -1;
  }
  .quickAddHeader{
    padding:18px 18px 14px;
  }
  .quickAddBody{
    padding:18px;
  }
}
@media (max-width: 1024px){
  .bar{
    padding:10px 14px 10px;
    gap:12px;
  }
  .brandWordmark{
    font-size:clamp(28px, 5vw, 38px);
  }
  .right{
    gap:8px;
  }
  .headerToggleWrap,
  .headerSelectWrap{
    max-width:none;
  }
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  #displayGrid .room{
    transform:none !important;
  }
  .room{
    min-height:auto;
  }
  .drawer{
    width:min(720px, 100vw) !important;
  }
}
@media (max-width: 820px){
  body.displayTabActive{
    overflow:auto;
  }
  body.displayTabActive.drawerOpen,
  body.displayTabActive.quickAddOpen{
    overflow:hidden;
  }
  .bar{
    flex-direction:column;
    align-items:stretch;
    padding:10px 10px 8px;
    gap:8px;
  }
  .brandLockup{
    width:100%;
  }
  .brandTitleRow{
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
  }
  .brandWordmark{
    font-size:clamp(24px, 8vw, 34px);
  }
  #brandLogoImage{
    --practiceLogoBaseHeight: 34px;
    max-width:min(calc(260px * var(--practiceLogoScale)), 58vw);
  }
  #statusLine{
    margin-top:4px;
    font-size:11px;
    line-height:1.25;
  }
	  .right{
	    width:100%;
	    min-width:0;
	    display:grid;
	    grid-template-columns:repeat(5, minmax(0, 1fr));
	    align-items:stretch;
	    gap:4px;
	  }
  .right > :is(.chip, .tabs, .btn, .iconBtn, .headerSelectWrap, .headerToggleWrap){
    min-height:38px;
    min-width:0;
  }
  .headerToggleWrap,
  .headerSelectWrap{
    width:auto;
    max-width:none;
    min-height:38px;
    padding:0 8px;
    border-radius:0;
    background:var(--btnBg);
    border-color:var(--btnBorder);
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    color:var(--btnText);
  }
  .headerToggleWrap{
    width:100%;
    min-height:38px;
    padding:0;
    justify-content:center;
    gap:0;
    min-width:0;
    overflow:hidden;
  }
  .headerToggleWrap .headerToggleLabel{
    display:none;
  }
  .headerToggleWrap .switch{
    display:none;
  }
  .headerToggleWrap::before{
    content:"";
    width:14px;
    height:14px;
    background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f9ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3Cpath d='M12 7.5v5l3.25 2'/%3E%3C/svg%3E");
  }
  .headerToggleWrap.isActive{
    border-color: rgba(125,211,252,.42);
    background: rgba(110,168,254,.14);
    box-shadow: 0 0 0 1px rgba(125,211,252,.16), 0 6px 18px rgba(0,0,0,.25);
  }
  .headerSelectWrap select{
    width:100%;
    max-width:none;
  }
  .headerSelectWrap{
    grid-column:2 / 5;
    min-height:40px;
    justify-content:center;
    gap:8px;
    padding:0 10px;
  }
  .headerSelectWrap .headerSelectLabel{
    font-size:9px;
    letter-spacing:.06em;
    color:var(--muted);
  }
	  #openQuickAddBtn,
	  #toggleMobileQuickViewBtn,
	  #viewToggleBtn,
	  #openSettingsBtn{
	    width:100%;
	  }
	  .right.mobileSortExpanded > #openQuickAddBtn,
	  .right.mobileSortExpanded > #toggleMobileQuickViewBtn,
	  .right.mobileSortExpanded > #viewToggleBtn,
	  .right.mobileSortExpanded > #openSettingsBtn{
	    display:none !important;
	  }
	  .right:not(.mobileSortExpanded) > #displaySortWrap{
	    display:none !important;
	  }
	  .headerIconBtn{
	    width:100%;
	    min-width:0;
	    min-height:38px;
	    padding:3px 0;
	    font-size:14px;
	    box-shadow:0 6px 18px rgba(0,0,0,.25);
	  }
	  .addHeaderBtn{
	    min-width:0;
	    font-size:17px;
	  }
	  .mobileQuickViewHeaderBtn{
	    display:inline-flex;
	  }
	  #openSettingsBtn{
	    font-size:14px;
	    color:var(--btnText);
	    background-image:none;
	  }
	  .right.mobileSortExpanded{
	    grid-template-columns:38px minmax(0, 1fr);
	    gap:6px;
	  }
	  .right.mobileSortExpanded.activeSortBeforeToggle{
	    grid-template-columns:minmax(0, 1fr) 38px;
	  }
  .right.mobileSortExpanded > #displayOnlyActiveWrap{
    grid-column:1;
  }
  .right.mobileSortExpanded > #displaySortWrap{
    grid-column:2;
  }
  .right.mobileSortExpanded.activeSortBeforeToggle > #displaySortWrap{
    grid-column:1;
  }
  .right.mobileSortExpanded.activeSortBeforeToggle > #displayOnlyActiveWrap{
    grid-column:2;
  }
  #fullscreenBtn{
    display:none;
  }
  main{
    max-width:none;
    padding:12px 12px 84px;
  }
  body.displayTabActive main{
    height:auto;
    overflow:visible;
  }
  body.displayTabActive #displayView,
  body.displayTabActive #displayWrap,
  body.displayTabActive #displayWrap.unlimited,
  body.displayTabActive .gridWrap,
  body.displayTabActive .gridWrap.unlimited{
    height:auto;
    max-height:none;
    overflow:visible;
  }
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .room{
    border-radius:20px;
  }
  .roomTop{
    padding:8px 10px;
  }
  .roomBody{
    padding:12px;
    gap:10px;
  }
  .summary{
    gap:8px;
  }
  .pill{
    padding:6px 10px;
  }
  .timerBox{
    padding:10px 12px;
  }
  #syncPill{
    left:auto;
    right:12px;
    bottom:12px;
  }
  #toTopBtn{
    top:auto;
    left:auto;
    right:12px;
    bottom:56px;
  }
  .toastStack{
    right:12px;
    left:12px;
    bottom:84px;
    max-width:none;
  }

  #displayGrid.listView{
    gap:12px;
  }
  #displayGrid.listView .wbHeader{
    display:none;
  }
  #displayGrid.listView .room{
    padding:10px 12px;
    border:1px solid var(--listChromeBorder, var(--border));
    border-left-width:6px;
    border-radius:14px;
    align-items:center;
    box-shadow: 0 12px 24px rgba(0,0,0,.16);
  }
  #displayGrid.listView .wbRow{
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "room patient timer";
    gap:10px;
    align-items:center;
  }
  #displayGrid.listView .wbCell{
    min-width:0;
    overflow:hidden !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #displayGrid.listView .wbRoom{
    grid-area:room;
    gap:6px;
    font-size:11px;
    letter-spacing:.03em;
    text-transform:uppercase;
    opacity:.9;
  }
  #displayGrid.listView .wbPatientCell{
    grid-area:patient;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #displayGrid.listView .wbReasonCell{
    display:none;
  }
  #displayGrid.listView .wbDoctorCell{
    display:none;
  }
  #displayGrid.listView .wbTechCell{
    display:none;
  }
  #displayGrid.listView .wbNotes{
    display:none;
  }
  #displayGrid.listView .wbTimer{
    grid-area:timer;
    min-width:92px;
  }
  #displayGrid.listView .wbRoom .tagDot{
    width:8px;
    height:8px;
  }
  #displayGrid.listView .wbRoomName{
    font-size:11px;
    line-height:1;
  }
  #displayGrid.listView .wbPatientCell .docInitBadge{
    display:none;
  }
  #displayGrid.listView .wbPatientName{
    color: var(--displayFontColor);
    font-size:14px;
    line-height:1.2;
  }
  #displayGrid.listView .wbTimerWrap{
    height:auto;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
  }
  #displayGrid.listView .wbTimerText{
    font-size:16px;
    line-height:1;
  }
  .drawer{
    width:100vw !important;
  }
  .drawerHeader{
    padding:16px 14px 12px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .drawerHeaderActions{
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  .drawerBody{
    padding:12px 14px 18px;
    gap:12px;
  }
  .settingsMobileTabPicker{
    display:flex;
  }
  .drawer .tabs{
    display:none;
  }
  .drawer .card,
  .drawer .panel,
  .drawer .section{
    border-radius:18px !important;
    padding:14px !important;
    gap:12px;
  }
  .quickAddModal{
    padding:14px;
    align-items:flex-end;
  }
  .quickAddCard{
    width:min(100%, 720px);
    max-height:min(92vh, 920px);
    border-radius:24px 24px 18px 18px;
  }
}
@media (max-width: 640px){
  .mobileOnlySettingsCard{
    display:flex !important;
  }
  .mobileQuickViewEmptyTile{
    padding:10px 6px 14px;
  }
  .mobileQuickViewEmptyTile__name{
    font-size:clamp(11px, 4.2vw, 18px);
  }
  .mobileQuickViewPopup{
    inset:auto 8px 8px;
  }
  .mobileQuickViewPopupHeader{
    padding:14px 14px 10px;
  }
  .mobileQuickViewPopupGrid{
    padding:12px 14px 0;
  }
  .mobileQuickViewPopupNotesCard{
    margin:10px 14px 14px;
  }
  .grid{
    grid-template-columns: 1fr;
  }
  .drawerHeader{
    padding:14px 12px 10px;
  }
  .drawerBody{
    padding:10px 12px 16px;
  }
  .settingsMobileTabPicker select{
    min-height:40px;
    border-radius:12px;
    font-size:13px;
  }
  .drawer .card,
  .drawer .panel,
  .drawer .section{
    padding:12px !important;
    gap:10px;
  }
  #displayGrid.listView .wbRow{
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "room patient timer";
    gap:8px;
  }
  #displayGrid.listView .wbTimer{
    min-width:0;
    width:auto;
  }
  #displayGrid.listView .wbTimerWrap{
    justify-content:space-between;
  }
  #displayGrid.listView .room{
    padding:9px 10px;
  }
  #displayGrid.listView .wbRoom{
    font-size:10px;
  }
  #displayGrid.listView .wbPatientName{
    font-size:13px;
  }
  #displayGrid.listView .wbTimerText{
    font-size:15px;
  }
  .quickAddHeader{
    flex-direction:column;
    align-items:flex-start;
  }
  .quickAddHeader .btn{
    width:100%;
  }
}
@media (max-width: 420px){
  .brandWordmark{
    font-size:26px;
  }
  #brandLogoImage{
    --practiceLogoBaseHeight: 30px;
    max-width:min(calc(220px * var(--practiceLogoScale)), 56vw);
  }
  .drawer .tabBtn{
    min-width:72px;
    font-size:11px;
  }
  #authBanner{
    font-size:9px;
  }
	  .headerIconBtn{
	    font-size:17px;
	  }
	  .addHeaderBtn{
	    font-size:22px;
	  }
	  .headerPhoneIcon{
	    width:17px;
	    height:17px;
	  }
	  main{
	    padding:10px 10px 84px;
	  }
  .roomBody{
    padding:10px;
  }
  #displayGrid.listView .room{
    padding:8px 9px;
  }
}