/* INFI-BOARD Main App Layout & Stage Styles */

/* ==============================
   App Locked State
   ============================== */

.app.co-locked {
  display: none !important;
}

/* ==============================
   Class Opening Splash
   ============================== */

.class-open-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.2) 0%, rgba(37, 99, 235, 0.14) 24%, transparent 48%),
    radial-gradient(circle at 50% 58%, rgba(14, 165, 233, 0.12) 0%, transparent 52%),
    linear-gradient(145deg, #020617 0%, #06080d 48%, #0f172a 100%);
  color: #f8fbff;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 160ms ease-in-out;
}

.class-open-splash.hidden {
  display: none !important;
}

.class-open-splash.active {
  opacity: 1;
  pointer-events: auto;
}

.class-open-splash.closing {
  opacity: 0;
}

.class-open-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vh, 28px);
  transform: translateZ(0);
}

.class-open-logo-ring {
  width: clamp(168px, 24vw, 252px);
  height: clamp(168px, 24vw, 252px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.class-open-logo-ring::before {
  content: "";
  position: absolute;
  inset: -42px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.42), rgba(37, 99, 235, 0.2) 42%, transparent 72%);
  filter: blur(8px);
  z-index: -1;
  animation: classSplashAura 650ms ease-out both;
}

.class-open-logo-ring::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(34, 211, 238, 0.9), rgba(14, 165, 233, 0.68), rgba(37, 99, 235, 0.82), transparent 64% 100%);
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.56));
  opacity: 0.88;
  z-index: 0;
  animation:
    classSplashRingRotate 1.8s linear infinite,
    classSplashRingPulse 650ms ease-out both;
}

.class-open-logo-glass {
  width: clamp(132px, 19vw, 204px);
  height: clamp(132px, 19vw, 204px);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  padding: clamp(14px, 2vw, 24px);
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow:
    0 0 45px rgba(14, 165, 233, 0.55),
    0 18px 80px rgba(2, 6, 23, 0.46),
    inset 0 1px 0 rgba(224, 242, 254, 0.14),
    inset 0 0 32px rgba(34, 211, 238, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: classSplashLogoZoom 650ms ease-out both;
}

.class-open-logo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: contain;
  filter:
    saturate(1.14)
    contrast(1.05)
    drop-shadow(0 0 20px rgba(125, 211, 252, 0.38));
}

.class-open-text {
  margin: 0;
  color: #e0f2fe;
  font-size: clamp(13px, 1.9vw, 18px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(34, 211, 238, 0.54),
    0 0 36px rgba(37, 99, 235, 0.28);
  animation: classSplashTextPulse 650ms ease-out both;
}

@keyframes classSplashLogoZoom {
  0% { transform: translateY(7px) scale(0.88); }
  50% { transform: translateY(-5px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes classSplashRingPulse {
  0%, 100% { opacity: 0.58; transform: scale(0.97); }
  50% { opacity: 0.96; transform: scale(1.03); }
}

@keyframes classSplashRingRotate {
  to { rotate: 360deg; }
}

@keyframes classSplashAura {
  0%, 100% { opacity: 0.58; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes classSplashTextPulse {
  0% { opacity: 0; transform: translateY(8px); }
  24%, 100% { opacity: 0.88; transform: translateY(0); }
  50% { opacity: 1; }
}

/* ==============================
   Topbar: Classroom Chip
   ============================== */

.classroom-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(34, 211, 238, 0.08));
  border: 1px solid rgba(37, 99, 235, 0.22);
  font-size: 13px;
  font-weight: 700;
  color: #93c5fd;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}

.classroom-chip:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(34, 211, 238, 0.12));
}

.classroom-chip-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: #60a5fa;
}

.classroom-chip.co-hidden {
  display: none !important;
}

/* ==============================
   Topbar: Switch Classroom Button
   ============================== */

#switchClassroomBtn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  white-space: nowrap;
  border-radius: 12px;
  color: #c8d0e4;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
}

#switchClassroomBtn:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(37, 99, 235, 0.38);
  color: #93c5fd;
}

/* ==============================
   Responsive - Short Screens
   ============================== */

/* For screens where height is tight (768px laptops, smart boards) */
@media (max-height: 800px) {
  .co-container {
    gap: clamp(6px, 1vh, 12px);
    padding-top: clamp(10px, 1.5vh, 20px);
    padding-bottom: clamp(10px, 1.5vh, 20px);
  }

  .co-logo-icon {
    width: clamp(36px, 5.5vh, 50px);
    height: clamp(36px, 5.5vh, 50px);
    margin-bottom: clamp(4px, 0.6vh, 8px);
  }

  .co-title {
    font-size: clamp(18px, 2.8vw, 24px);
    margin-bottom: clamp(2px, 0.4vh, 6px);
  }

  .co-subtitle {
    font-size: clamp(11px, 1.3vw, 13px);
  }

  .co-card {
    padding: clamp(10px, 1.4vh, 18px) clamp(12px, 1.6vw, 20px);
    gap: clamp(6px, 0.9vh, 10px);
  }

  .co-input {
    padding: clamp(7px, 1vh, 11px) clamp(10px, 1.2vw, 14px);
  }

  .co-btn-primary {
    padding: clamp(8px, 1.1vh, 13px) 20px;
  }

  .co-btn-continue {
    padding: clamp(7px, 1vh, 12px) 18px;
  }

  .co-input-group {
    gap: 3px;
  }

  .co-input-label {
    font-size: 11px;
  }

  .co-recent-card {
    padding: 8px 10px;
  }

  .co-recent-card-time {
    margin-top: 4px;
  }

  .co-footer {
    font-size: 10px;
  }
}

/* Very short screens (720px height - Android smart boards, 1280x720) */
@media (max-height: 720px) {
  .co-container {
    gap: clamp(4px, 0.8vh, 8px);
    padding-top: clamp(6px, 1vh, 12px);
    padding-bottom: clamp(6px, 1vh, 12px);
  }

  .co-logo-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin-bottom: 4px;
  }

  .co-logo-icon svg {
    width: 20px;
    height: 20px;
  }

  .co-title {
    font-size: 18px;
    margin-bottom: 2px;
  }

  .co-subtitle {
    font-size: 11px;
    line-height: 1.3;
  }

  .co-card {
    padding: 8px 12px;
    gap: 5px;
    border-radius: 14px;
  }

  .co-input {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 8px;
  }

  .co-input-group {
    gap: 2px;
  }

  .co-input-label {
    font-size: 10px;
  }

  .co-btn-primary {
    padding: 7px 16px;
    font-size: 13px;
    border-radius: 10px;
    margin-top: 1px;
  }

  .co-btn-continue {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 10px;
  }

  .co-divider {
    font-size: 10px;
  }

  .co-recent-title {
    font-size: 10px;
    margin-bottom: 6px;
  }

  .co-recent-card {
    padding: 6px 8px;
    border-radius: 10px;
  }

  .co-recent-card-name {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .co-recent-card-meta {
    font-size: 10px;
  }

  .co-recent-card-time {
    font-size: 9px;
    margin-top: 3px;
  }

  .co-recent-grid {
    gap: 6px;
  }

  .co-footer {
    font-size: 9px;
  }
}

/* ==============================
   Responsive - Narrow Screens
   ============================== */

@media (max-width: 600px) {
  .co-container {
    width: min(96vw, 420px);
    padding-left: 12px;
    padding-right: 12px;
  }

  .co-recent-grid {
    grid-template-columns: 1fr;
  }

  .classroom-chip {
    max-width: 140px;
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* Large screens / smart boards */
@media (min-width: 1200px) and (min-height: 900px) {
  .co-container {
    width: min(92vw, 540px);
  }

  .co-recent-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .co-title {
    font-size: 32px;
  }

  .co-btn-primary {
    padding: 16px 28px;
    font-size: 16px;
  }

  .co-input {
    padding: 14px 16px;
    font-size: 15px;
  }

  .co-logo-icon {
    width: 64px;
    height: 64px;
  }
}

/* Touch-friendly: larger hit targets on touch devices */
@media (pointer: coarse) {
  .co-btn-primary {
    min-height: 44px;
  }

  .co-btn-continue {
    min-height: 42px;
  }

  .co-input {
    min-height: 40px;
  }

  .co-recent-card {
    min-height: 56px;
  }

  .co-recent-card-delete {
    width: 30px;
    height: 30px;
    opacity: 0.7;
  }
}

/* Touch + short screen: override min-heights */
@media (pointer: coarse) and (max-height: 800px) {
  .co-btn-primary {
    min-height: 38px;
  }
  .co-btn-continue {
    min-height: 36px;
  }
  .co-input {
    min-height: 34px;
  }
  .co-recent-card {
    min-height: 44px;
  }
}

/* =============================================
   INFI-BOARD Logo styles
   ============================================= */
.infi-logo-large {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}


    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    :root {
      --app-vw: 100vw;
      --app-vh: 100vh;
      --visual-vw: 100vw;
      --visual-vh: 100vh;
      color-scheme: dark;
      --panel: rgba(0, 0, 0, 0.58);
      --panel2: rgba(255, 255, 255, 0.11);
      --line: rgba(255, 255, 255, 0.13);
      --text: #ffffff;
      --muted: #aeb8cc;
      --blue: #2563eb;
      --cyan: #22d3ee;
      --accent: #38bdf8;
      --glass: rgba(255, 255, 255, 0.16);
      --glass-dark: rgba(8, 12, 22, 0.74);
      --dock-shadow: 0 18px 55px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22);
      --green: #16a34a;
      --red: #dc2626;
      --gold: #ca8a04;
      --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
      --motion-fast: 90ms;
      --motion-medium: 150ms;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
    }

    html {
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
      background: #06080d;
      overscroll-behavior: none;
    }

    body {
      margin: 0;
      width: 100vw;
      min-height: 100vh;
      min-height: 100svh;
      height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
      background: #06080d;
      color: var(--text);
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overscroll-behavior: none;
      touch-action: manipulation;
    }

    .app {
      width: 100vw;
      min-height: 100vh;
      min-height: 100svh;
      height: 100dvh;
      max-height: 100dvh;
      display: flex;
      flex-direction: column;
      background: radial-gradient(circle at top, #1b2740, #070a10 65%);
      position: relative;
      padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
      overflow: hidden;
    }

    .brand-compact {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      padding-right: 12px;
      border-right: 1px solid rgba(255,255,255,0.1);
      margin-right: 4px;
    }
    .infi-logo {
      width: 34px;
      height: 34px;
      object-fit: contain;
      display: block;
      border-radius: 8px;
      background: #06080d;
      box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.22),
        0 0 18px rgba(37, 99, 235, 0.26);
    }
    .infi-logo-large {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border-radius: inherit;
    }
    .logo-fallback {
      display: none;
      font-weight: 900;
      letter-spacing: 0.5px;
      color: #ffffff;
    }
    .brand-name {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #fff;
      text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    }

    .topbar {
      flex: 0 0 auto;
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      background: var(--panel);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .brand {
      min-width: 190px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .brand-title {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0.4px;
    }

    .brand-sub {
      font-size: 12px;
      color: var(--muted);
    }

    .top-actions {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      min-width: 0;
      overflow-x: auto;
      scroll-behavior: smooth;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
    }
    .top-actions::-webkit-scrollbar {
      display: none;
    }
    
    .classroom-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 16px;
      height: 44px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 22px;
      color: var(--text);
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      flex: 0 0 auto;
      max-width: min(260px, 36vw);
    }

    #classroomChipText {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .classroom-chip-icon {
      width: 18px;
      height: 18px;
      color: #38bdf8;
    }
    
    #switchClassroomBtn {
      height: 44px;
      padding: 0 16px;
      border-radius: 22px;
      background: rgba(56, 189, 248, 0.15);
      border: 1px solid rgba(56, 189, 248, 0.3);
      color: #7dd3fc;
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
      cursor: pointer;
    }
    #switchClassroomBtn:hover {
      background: rgba(56, 189, 248, 0.25);
    }
    
    #clearBtn, #openBtn, #exportPdfBtn {
      height: 44px;
      border-radius: 22px;
      padding: 0 20px;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    #exportPdfBtn {
      color: #06101a;
      background: linear-gradient(180deg, #fde68a, #f59e0b);
      border: 1px solid rgba(253, 230, 138, 0.72);
      box-shadow: 0 10px 24px rgba(245, 158, 11, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.44);
    }

    #exportPdfBtn:hover {
      background: linear-gradient(180deg, #fef3c7, #fbbf24);
    }

    button, select, input {
      border: none;
      outline: none;
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 800;
      color: white;
      background: var(--panel2);
    }

    button {
      cursor: pointer;
      white-space: nowrap;
      transition:
        transform var(--motion-fast) var(--ease-smooth),
        background-color var(--motion-fast) var(--ease-smooth),
        border-color var(--motion-fast) var(--ease-smooth),
        color var(--motion-fast) var(--ease-smooth),
        box-shadow var(--motion-fast) var(--ease-smooth);
    }

    button:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-1px);
    }

    button:active {
      transform: translateY(0) scale(0.98);
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid rgba(125, 211, 252, 0.9);
      outline-offset: 3px;
      box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.16);
    }

    button.active {
      background: var(--blue);
      box-shadow: 0 0 18px rgba(37, 99, 235, 0.65);
    }

    button.danger { background: rgba(220, 38, 38, 0.88); }
    button.success { background: rgba(22, 163, 74, 0.88); }
    button.gold { background: rgba(202, 138, 4, 0.95); }
    button.darkbtn { background: rgba(20, 20, 24, 0.92); }

    input[type="text"], select {
      min-width: 140px;
      background: rgba(255, 255, 255, 0.13);
    }

    select option {
      background: #0b111d;
      color: #ffffff;
    }

    input[type="color"] {
      padding: 2px;
      width: 42px;
      height: 40px;
    }

    .main {
      flex: 1;
      display: flex;
      min-height: 0;
    }

    .thumbs {
      width: 155px;
      padding: 8px;
      overflow-y: auto;
      background: rgba(0, 0, 0, 0.42);
      border-right: 1px solid var(--line);
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }

    .thumbs::-webkit-scrollbar {
      width: 6px;
    }

    .thumbs::-webkit-scrollbar-track {
      background: transparent;
    }

    .thumbs::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.22);
      border-radius: 999px;
    }

    .thumbs::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.36);
    }

    .thumb-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      color: #dbe5ff;
      font-size: 13px;
      font-weight: 900;
    }

    .thumb-header span:nth-child(2) {
      margin-right: auto;
      margin-left: 6px;
    }

    .thumb-header-action {
      width: auto;
      min-width: 106px;
      height: 30px;
      padding: 0 10px;
      gap: 6px;
      border-radius: 10px;
      border: 1px solid rgba(248, 113, 113, 0.38);
      background: rgba(239, 68, 68, 0.18);
      color: #fca5a5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 0 14px rgba(239, 68, 68, 0.12);
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .thumb-header-action:hover {
      background: rgba(239, 68, 68, 0.32);
      border-color: rgba(248, 113, 113, 0.6);
      color: #fee2e2;
      transform: translateY(-1px);
    }

    .thumb-header-action svg,
    .thumb-header-action i {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      stroke: currentColor;
    }

    .thumb-header-action-label {
      display: inline-block;
    }

    .thumb-card {
      width: 100%;
      margin-bottom: 9px;
      padding: 6px;
      border-radius: 12px;
      border: 2px solid transparent;
      background: rgba(255, 255, 255, 0.08);
      cursor: pointer;
      position: relative;
      touch-action: pan-y;
    }

    .thumb-card.active {
      border-color: #60a5fa;
      background: rgba(37, 99, 235, 0.22);
    }

    .thumb-card.dragging {
      opacity: 0.72;
      border-color: rgba(34, 211, 238, 0.9);
      transform: scale(0.98);
    }

    .thumb-card canvas {
      width: 100%;
      height: auto;
      border-radius: 6px;
      background: #1a0000;
    }

    .thumb-label {
      margin-top: 4px;
      text-align: center;
      font-size: 11px;
      color: #d7def0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .thumb-actions {
      position: absolute;
      top: 7px;
      right: 7px;
      display: flex;
      gap: 5px;
    }

    .thumb-actions button {
      width: 28px;
      height: 28px;
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 10px;
      background: rgba(8, 12, 22, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .thumb-actions svg {
      width: 15px;
      height: 15px;
    }

    .viewer {
      flex: 1;
      overflow: auto;
      position: relative;
      display: grid;
      place-items: center;
      background:
        linear-gradient(45deg, rgba(255,255,255,0.022) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.022) 25%, transparent 25%);
      background-size: 34px 34px;
      touch-action: none;
    }

    .stage {
      position: relative;
      margin: 24px;
      background: white;
      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.68);
      border-radius: 4px;
      overflow: hidden;
      touch-action: none;
      transform: translateZ(0);
      will-change: transform;
    }

    #pdfCanvas, #strokesBaseCanvas, #drawCanvas {
      touch-action: none;
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    canvas {
      display: block;
    }

    #pdfCanvas {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    #strokesBaseCanvas {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }
    #drawCanvas {
      position: absolute;
      inset: 0;
      z-index: 3;
      touch-action: none;
      cursor: crosshair;
    }

    .toolbar {
      min-height: 78px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      background: var(--panel);
      border-top: 1px solid var(--line);
      backdrop-filter: blur(10px);
    }

    .toolbar button {
      min-width: 72px;
      height: 54px;
      font-size: 12px;
    }

    .toolbar .wide { min-width: 112px; }

    .control {
      height: 54px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.1);
      white-space: nowrap;
    }

    .control label {
      font-size: 12px;
      color: #d4d9e6;
      font-weight: 800;
    }

    input[type="range"] {
      width: 94px;
    }

    .page-info {
      font-size: 15px;
      font-weight: 900;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.12);
      min-width: 132px;
      text-align: center;
      white-space: nowrap;
    }

    .status {
      font-size: 13px;
      color: #b8c2d8;
      max-width: 270px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #status.top-clock-status {
      min-width: 210px;
      max-width: none;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 13px;
      border-radius: 13px;
      border: 1px solid rgba(148, 163, 184, 0.28);
      background: rgba(8, 13, 24, 0.68);
      color: #f8fafc;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .top-datetime-time {
      color: #fbbf24;
      font-size: 13px;
      font-weight: 900;
    }

    .top-datetime-date {
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 800;
    }

    @media (max-width: 760px) {
      .top-datetime-left {
        display: none;
      }

      #status.top-clock-status {
        min-width: 112px;
        padding: 0 10px;
      }

      #status.top-clock-status .top-datetime-date {
        display: none;
      }
    }

    .empty {
      text-align: center;
      color: #d8deee;
      padding: 35px;
      border: 2px dashed rgba(255, 255, 255, 0.25);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.06);
      max-width: 720px;
    }

    .empty h1 {
      margin: 0 0 8px;
      font-size: 38px;
    }

    .empty p {
      margin: 7px 0;
      color: #aeb8cc;
      line-height: 1.45;
    }

    .hidden { display: none !important; }

    .small-note {
      font-size: 12px;
      color: #aeb8cc;
    }

    .creator-credit {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1.2px;
      color: #ffffff;
      text-align: center;
      text-shadow:
        0 0 8px rgba(56, 189, 248, 0.95),
        0 0 18px rgba(37, 99, 235, 0.72),
        0 0 32px rgba(14, 165, 233, 0.42);
      animation: creatorGlow 2.4s ease-in-out infinite;
      will-change: opacity, text-shadow;
    }

    .creator-credit.empty-credit {
      margin-top: 32px;
    }

    .creator-credit.sidebar-credit {
      padding: 12px;
      border-top: 1px solid rgba(255,255,255,0.06);
      margin-top: auto;
    }

    @keyframes creatorGlow {
      0%, 100% {
        opacity: 0.82;
        text-shadow:
          0 0 7px rgba(56, 189, 248, 0.78),
          0 0 16px rgba(37, 99, 235, 0.55),
          0 0 26px rgba(14, 165, 233, 0.28);
      }
      50% {
        opacity: 1;
        text-shadow:
          0 0 10px rgba(56, 189, 248, 1),
          0 0 24px rgba(37, 99, 235, 0.84),
          0 0 42px rgba(14, 165, 233, 0.48);
      }
    }

    .top-icon-btn {
      width: 42px;
      height: 42px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border-radius: 14px;
    }

    #sidebarToggleTop {
      position: fixed;
      top: max(70px, calc(var(--safe-top) + 66px));
      left: max(14px, calc(var(--safe-left) + 10px));
      z-index: 110;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)),
        rgba(8, 12, 22, 0.88);
      box-shadow: var(--dock-shadow);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: grab;
      touch-action: none;
    }

    #sidebarToggleTop.dragging-handle {
      cursor: grabbing;
      transition: none !important;
    }

    /* Once dragged away from its default docked position, it no longer
       makes sense for the icon to look "attached" to the screen edge
       (flat left side, right-only rounding) — round it off on all sides
       and restore its full width/height so it looks right anywhere. */
    #sidebarToggleTop.sbt-free.pw-sidebar-handle {
      border-radius: 14px !important;
      border-left: 1px solid rgba(148, 163, 184, 0.22) !important;
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
    }

    body.fullscreen-active #sidebarToggleTop,
    .app.fullscreen-active #sidebarToggleTop {
      top: max(12px, calc(var(--safe-top) + 8px));
      left: max(14px, calc(var(--safe-left) + 10px));
    }

    .top-icon-btn svg,
    .tool-icon-btn svg,
    .pill-action svg,
    .widget-close svg {
      width: 17px;
      height: 17px;
      stroke-width: 2.35;
    }

    .bottom-docks {
      position: fixed;
      left: 18px;
      right: 18px;
      bottom: 16px;
      z-index: 30;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      pointer-events: none;
      width: auto;
      max-width: calc(100vw - 36px);
    }

    /* Explicit column placement so the left/right groups can never swap
       or collapse into each other, even if one group is briefly hidden
       or re-flowed by a layout change (e.g. entering/exiting fullscreen). */
    .bottom-docks .glass-pill:first-child {
      grid-column: 1;
      justify-self: start;
    }

    .bottom-docks .glass-pill:last-child {
      grid-column: 3;
      justify-self: end;
    }

    .bottom-docks::-webkit-scrollbar {
      display: none;
    }

    .glass-pill {
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 5px;
      min-height: 46px;
      padding: 5px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.08)),
        rgba(10, 14, 24, 0.72);
      box-shadow: var(--dock-shadow);
      backdrop-filter: blur(12px) saturate(1.35);
      -webkit-backdrop-filter: blur(12px) saturate(1.35);
      transition:
        transform var(--motion-medium) var(--ease-spring),
        background-color var(--motion-fast) var(--ease-smooth),
        border-color var(--motion-fast) var(--ease-smooth),
        box-shadow var(--motion-fast) var(--ease-smooth);
    }

    .tool-icon-btn,
    .pill-action {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 12px;
      color: #f8fbff;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      line-height: 0;
      transition:
        transform var(--motion-fast) var(--ease-smooth),
        background var(--motion-fast) var(--ease-smooth),
        border-color var(--motion-fast) var(--ease-smooth),
        box-shadow var(--motion-fast) var(--ease-smooth);
    }

    .tool-icon-btn svg,
    .pill-action svg {
      display: block;
      margin: 0 auto;
      flex-shrink: 0;
    }

    .pill-action {
      background: rgba(255, 255, 255, 0.18);
    }

    .tool-icon-btn:hover,
    .pill-action:hover {
      background: rgba(56, 189, 248, 0.26);
      border-color: rgba(125, 211, 252, 0.45);
      transform: translateY(-1px);
    }

    .tool-icon-btn.active,
    .pill-action.active {
      background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(37, 99, 235, 0.88));
      box-shadow: 0 0 24px rgba(56, 189, 248, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }

    .page-badge {
      min-width: 48px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      white-space: nowrap;
      border-radius: 11px;
      color: #06101a;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      background: linear-gradient(180deg, #ffffff, #ccecff);
      box-shadow: inset 0 -8px 18px rgba(37, 99, 235, 0.15), 0 10px 24px rgba(0, 0, 0, 0.22);
      position: relative;
    }

    .page-badge:after {
      content: "";
      position: absolute;
      right: 8px;
      bottom: -5px;
      width: 14px;
      height: 14px;
      background: #ccecff;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .tool-popover {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 40;
      width: min(410px, calc(100vw - 20px));
      padding: 12px;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07)),
        rgba(7, 11, 20, 0.9);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.56);
      backdrop-filter: blur(10px) saturate(1.25);
      -webkit-backdrop-filter: blur(10px) saturate(1.25);
      animation: panelCenterFloatIn var(--motion-medium) var(--ease-spring) both;
      transform-origin: center;
    }

    .popover-tabs,
    .sidebar-tabs,
    .segmented {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.09);
    }

    .popover-tab,
    .sidebar-tab,
    .segmented button {
      flex: 1;
      min-width: 0;
      height: 36px;
      padding: 0 10px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 900;
      background: transparent;
      color: #c8d5ea;
    }

    .popover-tab.active,
    .sidebar-tab.active,
    .segmented button.active {
      color: #05111e;
      background: linear-gradient(180deg, #e9f8ff, #8bdcff);
    }

    .popover-panel {
      display: none;
      margin-top: 12px;
    }

    .popover-panel.active {
      display: block;
    }

    .field-row {
      display: grid;
      grid-template-columns: 78px 1fr;
      align-items: center;
      gap: 10px;
      margin: 10px 0;
      color: #d8e3f7;
      font-size: 12px;
      font-weight: 800;
    }

    .field-row.stack {
      display: block;
    }

    .field-row.stack > span {
      display: block;
      margin-bottom: 8px;
    }

    .field-row input[type="range"] {
      width: 100%;
    }

    .swatch-input {
      width: 48px !important;
      height: 36px !important;
      border-radius: 12px;
    }

    .option-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .option-grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .option-btn {
      min-height: 42px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.09);
      color: #eaf5ff;
      font-size: 12px;
    }

    .option-btn.active {
      background: rgba(34, 211, 238, 0.26);
      border-color: rgba(125, 211, 252, 0.56);
    }

    .quick-colors {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 2px 0 10px;
    }

    .quick-color-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.18);
      padding: 0;
      cursor: pointer;
    }

    .quick-color-btn.active {
      border-color: #fff;
      box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.65);
    }

    .attendance-list {
      max-height: 220px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 10px;
    }

    .attendance-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 13px;
    }

    .attendance-row.present {
      border-color: rgba(22, 163, 74, 0.55);
      background: rgba(22, 163, 74, 0.15);
    }

    .attendance-row .name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .attendance-row button {
      padding: 4px 8px;
      font-size: 11px;
      border-radius: 8px;
    }

    .attendance-summary {
      font-size: 13px;
      font-weight: 800;
      color: #7dd3fc;
    }

    .right-sidebar {
      position: fixed;
      top: max(128px, calc(var(--safe-top) + 124px));
      left: 14px;
      bottom: 96px;
      z-index: 24;
      width: min(352px, calc(100vw - 28px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
        rgba(7, 11, 20, 0.86);
      box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(8px) saturate(1.2);
      -webkit-backdrop-filter: blur(8px) saturate(1.2);
      transform: translateX(calc(-100% - 28px));
      opacity: 0;
      pointer-events: none;
      transition:
        transform var(--motion-medium) var(--ease-spring),
        opacity var(--motion-fast) var(--ease-smooth);
      will-change: transform, opacity;
    }

    .right-sidebar.open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    .sidebar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 14px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    }

    .sidebar-title {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .sidebar-title strong {
      font-size: 15px;
      font-weight: 900;
    }

    .sidebar-title span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .sidebar-body {
      min-height: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow: hidden;
      padding: 12px;
    }

    .sidebar-tabs {
      flex: 0 0 auto;
    }

    .sidebar-panel {
      display: none;
      flex: 1 1 auto;
      height: auto;
      min-height: 0;
      overflow-y: auto;
      padding: 0 3px 18px 0;
    }

    .sidebar-panel.active {
      display: block;
    }

    .right-sidebar .thumbs {
      width: 100%;
      height: auto;
      max-height: none;
      padding: 0;
      overflow: visible;
      background: transparent;
      border: 0;
    }

    .thumb-tools {
      display: grid;
      gap: 8px;
      margin-bottom: 12px;
    }

    .compact-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .compact-row button {
      min-height: 36px;
      padding: 8px 10px;
      border-radius: 12px;
      font-size: 12px;
    }

    .utility-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      padding-bottom: 28px;
    }

    .utility-card {
      min-height: 78px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 8px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.08);
      color: #edf7ff;
      font-size: 11px;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
      transition:
        transform var(--motion-fast) var(--ease-smooth),
        background-color var(--motion-fast) var(--ease-smooth),
        border-color var(--motion-fast) var(--ease-smooth),
        box-shadow var(--motion-fast) var(--ease-smooth);
    }

    .utility-card:hover {
      background: rgba(34, 211, 238, 0.18);
      border-color: rgba(125, 211, 252, 0.45);
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    }

    .utility-card svg {
      width: 22px;
      height: 22px;
      color: #7dd3fc;
    }

    .app-dialog-backdrop {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.36);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .app-dialog {
      width: min(440px, calc(100vw - 32px));
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
        rgba(11, 13, 24, 0.96);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
      overflow: hidden;
      animation: panelFloatIn var(--motion-medium) var(--ease-spring) both;
    }

    .app-dialog-head {
      padding: 16px 18px 8px;
      color: #ffffff;
      font-size: 15px;
      font-weight: 900;
    }

    .app-dialog-body {
      padding: 6px 18px 16px;
      color: #dce7f7;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 700;
    }

    .app-dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 0 18px 18px;
    }

    .app-dialog-actions button {
      min-width: 86px;
    }

    .widget-layer {
      position: fixed;
      inset: 0;
      z-index: 55;
      pointer-events: none;
    }

    .floating-widget,
    .guide-overlay,
    .sticky-note,
    .spotlight-hole,
    .curtain-overlay,
    .magnifier-lens {
      pointer-events: auto;
    }

    .floating-widget {
      position: fixed;
      width: min(330px, calc(100vw - 24px));
      min-height: 120px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
        rgba(8, 12, 22, 0.91);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow: hidden;
    }

    .widget-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      cursor: grab;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .widget-head strong {
      font-size: 13px;
      font-weight: 900;
    }

    .widget-close {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.1);
    }

    .widget-body {
      padding: 12px;
      color: #e8f2ff;
      font-size: 12px;
      font-weight: 700;
    }

    .widget-body input,
    .widget-body textarea,
    .widget-body select {
      width: 100%;
      min-width: 0;
      margin: 5px 0 8px;
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }

    .widget-body select option {
      background: #0b111d;
      color: #ffffff;
    }

    .widget-body textarea {
      min-height: 72px;
      resize: vertical;
      user-select: text;
    }

    .widget-body button {
      min-height: 36px;
      padding: 8px 10px;
      border-radius: 12px;
      font-size: 12px;
    }

    .object-editor {
      position: fixed;
      z-index: 74;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 16px;
      background: rgba(12, 16, 28, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(125, 211, 252, 0.22);
      pointer-events: auto;
      transform: translateY(10px) scale(0.98);
      opacity: 0;
      transition: opacity 160ms ease, transform 160ms ease;
      width: auto;
      height: auto;
      flex-wrap: nowrap;
    }

    .object-editor.open {
      display: flex;
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .editor-drag-handle {
      width: 24px;
      height: 32px;
      display: grid;
      place-items: center;
      cursor: grab;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .editor-drag-handle svg {
      width: 16px;
      height: 16px;
    }

    .editor-divider {
      width: 1px;
      height: 24px;
      background: rgba(255, 255, 255, 0.12);
      margin: 0 4px;
    }

    .editor-icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid transparent;
      background: transparent;
      color: #edf8ff;
      transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
      position: relative;
    }

    .editor-icon-btn:hover,
    .editor-icon-btn.active {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .editor-icon-btn svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.2;
    }

    .editor-icon-btn.danger {
      color: #f87171;
    }

    .editor-icon-btn.danger:hover {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.25);
    }

    .editor-color-indicator {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.3);
      display: block;
    }

    .editor-multi-indicator {
      font-size: 11px;
      font-weight: 800;
      color: #7dd3fc;
      background: rgba(56, 189, 248, 0.15);
      padding: 4px 8px;
      border-radius: 8px;
      white-space: nowrap;
      margin-right: 4px;
    }

    /* Compact Popovers */
    .editor-popover {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(8px) scale(0.95);
      opacity: 0;
      pointer-events: none;
      background: rgba(16, 22, 35, 0.95);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 14px;
      padding: 12px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
      transition: opacity 150ms ease, transform 150ms ease;
      will-change: opacity, transform;
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: max-content;
    }

    .editor-popover.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0) scale(1);
    }
    
    .editor-popover.below {
      bottom: auto;
      top: calc(100% + 8px);
    }

    .editor-popover-title {
      font-size: 11px;
      font-weight: 800;
      color: #9fb4d3;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 0;
    }

    .editor-swatches {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }

    .editor-swatch {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 0;
      cursor: pointer;
    }

    .editor-transparent {
      background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%);
      background-size: 10px 10px;
      background-position: 0 0, 5px 5px;
    }

    .editor-row {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #cad7ea;
      font-size: 12px;
      font-weight: 700;
    }

    .editor-row input[type="color"] {
      width: 40px;
      height: 30px;
      padding: 2px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .editor-row input[type="range"] {
      flex: 1;
    }

    .editor-grid {
      display: grid;
      gap: 6px;
    }
    .editor-grid.two { grid-template-columns: repeat(2, 1fr); }
    .editor-grid.three { grid-template-columns: repeat(3, 1fr); }
    .editor-grid.four { grid-template-columns: repeat(4, 1fr); }

    .editor-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #edf8ff;
      font-size: 12px;
      font-weight: 700;
      transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
      cursor: pointer;
    }

    .editor-btn:hover, .editor-btn.active {
      background: rgba(125, 211, 252, 0.2);
      border-color: rgba(125, 211, 252, 0.4);
    }
    
    .editor-btn svg {
      width: 14px;
      height: 14px;
    }

    .calc-display {
      width: 100%;
      height: 44px;
      margin-bottom: 8px;
      padding: 0 10px;
      border-radius: 13px;
      background: rgba(0, 0, 0, 0.32);
      color: #f8fbff;
      font-size: 18px;
      font-weight: 900;
      text-align: right;
      user-select: text;
    }

    .calc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .widget-result {
      min-height: 42px;
      display: grid;
      place-items: center;
      padding: 8px;
      border-radius: 14px;
      background: rgba(34, 211, 238, 0.14);
      color: #e6fbff;
      font-size: 18px;
      font-weight: 900;
      text-align: center;
    }

    .guide-overlay {
      position: fixed;
      left: 38%;
      top: 30%;
      border-radius: 14px;
      color: #082033;
      box-shadow: 0 16px 30px rgba(0, 0, 0, 0.42);
      touch-action: none;
      cursor: move;
    }

    .ruler-overlay {
      width: 390px;
      height: 58px;
      border: 1px solid rgba(56, 189, 248, 0.72);
      background:
        repeating-linear-gradient(90deg, rgba(6, 24, 38, 0.85) 0 2px, transparent 2px 10px),
        repeating-linear-gradient(90deg, rgba(6, 24, 38, 0.95) 0 3px, transparent 3px 50px),
        rgba(215, 243, 255, 0.54);
      backdrop-filter: blur(4px);
    }

    .grid-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.65;
    }

    .grid-overlay.graph {
      background-image:
        linear-gradient(rgba(37, 99, 235, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.4) 1px, transparent 1px);
      background-size: 32px 32px;
    }

    .grid-overlay.ruled {
      background-image: linear-gradient(rgba(37, 99, 235, 0.45) 1px, transparent 1px);
      background-size: 100% 34px;
    }

    .grid-overlay.dots {
      background-image: radial-gradient(rgba(37, 99, 235, 0.6) 1.6px, transparent 1.7px);
      background-size: 24px 24px;
    }

    .text-editor {
      position: absolute;
      z-index: 6;
      min-width: 160px;
      min-height: 42px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 2px solid rgba(56, 189, 248, 0.82);
      background: rgba(255, 255, 255, 0.92);
      color: #08111d;
      resize: both;
      user-select: text;
      pointer-events: auto;
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
    }

    .sticky-note {
      position: fixed;
      width: 210px;
      min-height: 150px;
      padding: 34px 12px 12px;
      border-radius: 14px;
      color: #1a1405;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
      touch-action: none;
    }

    .sticky-note textarea {
      width: 100%;
      min-height: 96px;
      border: 0;
      outline: 0;
      background: transparent;
      color: inherit;
      font: 800 14px "Plus Jakarta Sans", Arial, sans-serif;
      resize: none;
      user-select: text;
    }

    .sticky-note button {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 27px;
      height: 27px;
      min-height: 0;
      padding: 0;
      border-radius: 9px;
      color: #1a1405;
      background: rgba(255, 255, 255, 0.42);
    }

    .spotlight-hole {
      position: fixed;
      left: 45%;
      top: 36%;
      width: 220px;
      height: 220px;
      border: 2px solid rgba(125, 211, 252, 0.85);
      border-radius: 50%;
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.68);
      touch-action: none;
      cursor: move;
    }

    .spotlight-hole.rect {
      border-radius: 18px;
    }

    .curtain-overlay {
      position: fixed;
      left: 20%;
      top: 18%;
      width: 58vw;
      height: 42vh;
      background: rgba(5, 8, 13, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.48);
      touch-action: none;
      overflow: hidden;
    }

    .curtain-handle {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 18px;
      display: grid;
      place-items: center;
      background: rgba(56, 189, 248, 0.38);
      cursor: ns-resize;
    }

    .magnifier-lens {
      position: fixed;
      left: 42%;
      top: 34%;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid rgba(125, 211, 252, 0.92);
      background: #ffffff;
      box-shadow: 0 22px 45px rgba(0, 0, 0, 0.42);
      touch-action: none;
      cursor: move;
    }

    .magnifier-lens canvas {
      width: 100%;
      height: 100%;
    }

    @media (max-width: 900px), (orientation: portrait) {

      .topbar {
        min-height: 62px;
        padding: 8px 10px;
      }
      .top-actions {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
      }
      .top-actions > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
      }
      .brand-compact {
        gap: 8px;
        padding-right: 10px;
        margin-right: 0;
      }
      .brand-name {
        max-width: 86px;
        white-space: normal;
        line-height: 1.05;
        font-size: 15px;
      }
      .classroom-chip {
        max-width: 142px;
        padding: 0 12px;
      }
      #switchClassroomBtn,
      #clearBtn,
      #openBtn,
      #exportPdfBtn,
      #testINFI-CLOUDBtn {
        height: 40px;
        padding-inline: 14px;
        font-size: 13px;
      }
      .save-status-container {
        top: max(70px, calc(var(--safe-top) + 66px));
        right: max(10px, calc(var(--safe-right) + 10px));
        max-width: calc(100vw - 78px);
      }
      #saveStatusText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .bottom-docks {
        left: 8px;
        right: 8px;
        bottom: 8px;
        gap: 8px;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0 2px 4px;
        pointer-events: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }
      .glass-pill {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 50px;
        padding: 4px;
        border-radius: 17px;
      }
      .tool-icon-btn,
      .pill-action {
        width: 38px;
        height: 38px;
        border-radius: 13px;
      }
      .page-badge {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
      }
      .right-sidebar {
        top: 170px;
        bottom: 80px;
      }
      .utility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* PWA Install Banner Style */
    .pwa-install-banner {
      position: fixed;
      bottom: max(24px, calc(var(--safe-bottom) + 16px));
      right: max(24px, calc(var(--safe-right) + 16px));
      z-index: 10000;
      width: 340px;
      background: rgba(11, 18, 30, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(56, 189, 248, 0.2);
      border-radius: 18px;
      padding: 18px 20px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 15px rgba(56, 189, 248, 0.1);
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: #ffffff;
      transform: translateY(120%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .pwa-install-banner.show {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .pwa-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pwa-info {
      display: flex;
      flex-direction: column;
    }
    .pwa-title {
      font-size: 15px;
      font-weight: 800;
      color: #ffffff;
      margin: 0;
      letter-spacing: -0.2px;
    }
    .pwa-subtitle {
      font-size: 12px;
      color: #aeb8cc;
      margin: 2px 0 0;
      line-height: 1.3;
    }
    .pwa-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
    }
    .pwa-btn {
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: transform var(--motion-fast) var(--ease-smooth), box-shadow var(--motion-fast) var(--ease-smooth), background var(--motion-fast) var(--ease-smooth);
    }
    .pwa-btn-install {
      background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(37, 99, 235, 0.88));
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
    }
    .pwa-btn-install:hover {
      box-shadow: 0 6px 16px rgba(56, 189, 248, 0.45);
      transform: translateY(-1px);
    }
    .pwa-btn-later {
      background: rgba(255, 255, 255, 0.08);
      color: #c8d0e4;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .pwa-btn-later:hover {
      background: rgba(255, 255, 255, 0.15);
    }
    .pwa-fallback-text {
      font-size: 11px;
      color: #8b9bb4;
      text-align: center;
      margin-top: 4px;
      display: none;
    }
    @media (max-width: 600px) {
      .pwa-install-banner {
        bottom: max(76px, calc(var(--safe-bottom) + 72px));
        right: max(16px, calc(var(--safe-right) + 12px));
        left: max(16px, calc(var(--safe-left) + 12px));
        width: auto;
      }
    }

    
    /* ============================================
       INFI-AI Right Sidebar Panel & Controls
       ============================================ */
    .ai-right-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 450px;
      min-width: 320px;
      max-width: 85vw;
      height: 100vh;
      height: 100dvh;
      background: #07090e;
      border-left: 1px solid rgba(100, 230, 255, 0.22);
      box-shadow: -20px 0 60px rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: flex;
      flex-direction: column;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      transform: translateX(100%);
      overflow: hidden;
    }
    .ai-right-sidebar.open {
      transform: translateX(0);
    }
    .ai-sidebar-resize-handle {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 6px;
      cursor: ew-resize;
      z-index: 10;
      background: transparent;
      transition: background 0.15s;
    }
    .ai-sidebar-resize-handle:hover,
    .ai-sidebar-resize-handle.dragging {
      background: rgba(100, 230, 255, 0.5);
    }
    .ai-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: linear-gradient(135deg, #0b0f17, #101620);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      user-select: none;
    }
    .ai-header-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ai-badge-icon {
      background: linear-gradient(135deg, #3694ff, #64e6ff);
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 14px rgba(100, 230, 255, 0.4);
    }
    .ai-badge-icon i {
      width: 16px;
      height: 16px;
      color: #07090e;
    }
    .ai-title-text {
      color: #f7faff;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: 0.3px;
    }
    .ai-header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ai-action-btn {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #94a3b8;
      width: 28px;
      height: 28px;
      border-radius: 7px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.18s ease;
    }
    .ai-action-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.25);
      color: #ffffff;
      transform: translateY(-1px);
    }
    .ai-action-btn.close:hover {
      background: #ef4444;
      border-color: #ef4444;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }
    .ai-sidebar-body {
      flex: 1;
      position: relative;
      background: #05070c;
    }
    .ai-sidebar-body iframe {
      width: 100%;
      height: 100%;
      border: none;
      background: #05070c;
    }

    
    /* ============================================
       AI Quiz Generator Modal & Styles
       ============================================ */
    .ai-quiz-modal {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 2600;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ai-quiz-modal.open {
      opacity: 1;
      pointer-events: auto;
    }
    .ai-quiz-box {
      width: min(500px, 94vw);
      background: #0f131d;
      border: 1px solid rgba(168, 85, 247, 0.4);
      border-radius: 20px;
      box-shadow: 0 24px 70px rgba(0,0,0,0.85), 0 0 35px rgba(168, 85, 247, 0.2);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .ai-quiz-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      background: linear-gradient(135deg, #1a162b, #120f20);
      border-bottom: 1px solid rgba(168, 85, 247, 0.25);
    }
    .ai-quiz-close {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 22px;
      cursor: pointer;
      line-height: 1;
      padding: 2px 6px;
      border-radius: 6px;
      transition: all 0.15s;
    }
    .ai-quiz-close:hover {
      background: #ef4444;
      color: #fff;
    }
    .ai-quiz-body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: #e2e8f0;
      font-size: 13px;
    }
    .ai-quiz-tabs {
      display: flex;
      gap: 8px;
      background: #090c14;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .ai-quiz-tab {
      flex: 1;
      padding: 7px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: #94a3b8;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ai-quiz-tab.active {
      background: rgba(168, 85, 247, 0.25);
      color: #f3e8ff;
      border: 1px solid rgba(168, 85, 247, 0.4);
    }
    .ai-quiz-sec {
      display: none;
      flex-direction: column;
      gap: 6px;
    }
    .ai-quiz-sec.active {
      display: flex;
    }
    .ai-quiz-sec label {
      font-size: 11.5px;
      font-weight: 700;
      color: #cbd5e1;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .ai-quiz-sec input[type="text"] {
      width: 100%;
      background: #090c14;
      border: 1px solid rgba(168, 85, 247, 0.3);
      border-radius: 10px;
      padding: 9px 12px;
      color: #fff;
      font-size: 13px;
      outline: none;
      box-sizing: border-box;
    }
    .ai-quiz-dropzone {
      border: 2px dashed rgba(168, 85, 247, 0.4);
      background: rgba(168, 85, 247, 0.05);
      border-radius: 12px;
      padding: 18px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      transition: all 0.15s;
    }
    .ai-quiz-dropzone:hover {
      background: rgba(168, 85, 247, 0.12);
      border-color: #c084fc;
    }
    .ai-quiz-opts {
      display: flex;
      gap: 10px;
    }
    .ai-quiz-opts > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ai-quiz-opts select {
      background: #090c14;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      padding: 7px 10px;
      color: #cbd5e1;
      font-size: 12px;
      outline: none;
    }
    .ai-quiz-gen-btn {
      background: linear-gradient(135deg, #a855f7, #7e22ce);
      border: none;
      color: #fff;
      padding: 10px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
      transition: all 0.15s;
    }
    .ai-quiz-gen-btn:hover {
      filter: brightness(1.15);
      transform: translateY(-1px);
    }

    
    /* ============================================
       PERFORMANCE: GPU acceleration & compositing hints
       ============================================ */
    canvas,
    #drawCanvas,
    #pdfCanvas,
    .thumb-card canvas,
    .floating-widget {
      will-change: transform;
    }
    .ai-right-sidebar {
      will-change: transform;
    }

    /* Contain layout/paint for panels (NOT .sidebar - causes child clipping) */
    #pollPanel,
    .object-editor,
    .drawPopover,
    .shapePopover,
    .eraserPopover,
    .linePopover {
      contain: layout style;
    }

    /* Reduce paint area for thumbnails */
    #thumbList .thumb-card {
      contain: layout style paint;
      will-change: opacity, transform;
    }

    
    /* PERF: content-visibility for off-screen panels (avoids layout/paint cost) */
    #historyPanel,
    #aiQuizModal {
      content-visibility: auto;
      contain-intrinsic-size: 0 500px;
    }

    
    /* PERF: faster canvas thumbnail scaling */
    #thumbList .thumb-card canvas {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }

    
    /* PERF: disable transitions while drawing for maximum frame rate */
    body.is-drawing *,
    body.is-drawing *::before,
    body.is-drawing *::after {
      transition: none !important;
      animation: none !important;
    }

    /* Eliminate repaints from hover box-shadow animations */
    .tool-btn:hover,
    .dock-btn:hover,
    .top-icon-btn:hover {
      will-change: transform;
    }

    
    /* ============================================
       DRAW OVER IMAGE MODE
       ============================================ */
    /* When draw-over-image mode is active, image strokes are not selectable */
    body.draw-over-image-mode #drawCanvas {
      cursor: crosshair !important;
    }

    #drawOverImgBtn {
      position: relative;
    }

    #drawOverImgBtn.active {
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.35), rgba(234, 88, 12, 0.25)) !important;
      border-color: rgba(249, 115, 22, 0.6) !important;
      color: #fed7aa !important;
      box-shadow: 0 0 12px rgba(249, 115, 22, 0.35) !important;
    }

    #drawOverImgBtn.active::after {
      content: "";
      position: absolute;
      top: -3px;
      right: -3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #f97316;
      box-shadow: 0 0 6px rgba(249, 115, 22, 0.8);
      animation: draw-over-pulse 1.5s ease-in-out infinite;
    }

    @keyframes draw-over-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.8); }
    }

    /* Draw-over mode banner */
    #drawOverModeBanner {
      position: fixed;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.9), rgba(234, 88, 12, 0.85));
      color: #fff;
      padding: 5px 16px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      z-index: 200;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
      white-space: nowrap;
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.2);
      display: none;
    }

    body.draw-over-image-mode #drawOverModeBanner {
      display: block;
      opacity: 1;
    }

    
    /* ============================================
       APK / WEBVIEW PERFORMANCE OPTIMIZATIONS
       ============================================ */
    /* Prevent rubber-band scrolling in WebView */
    html, body {
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    /* Prevent text selection during drawing */
    #stage, #pdfCanvas, #strokesBaseCanvas, #drawCanvas {
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }

    /* Optimize rendering for APK */
    * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Reduce paint work on low-end devices */
    @media (max-width: 480px) {
      .right-sidebar.pw-sidebar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(7, 7, 14, 0.98) !important;
      }

      #pollPanel,
      .drawPopover,
      .shapePopover,
      .eraserPopover,
      .linePopover {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      #aiRightSidebar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    }

    /* Faster transitions on mobile */
    @media (pointer: coarse) {
      .right-sidebar.pw-sidebar {
        transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), opacity 100ms ease !important;
      }

      .dock-btn, .tool-btn, .top-icon-btn {
        transition: background 100ms ease, border-color 100ms ease !important;
      }
    }

    
    /* PERF/UX: Ensure all panel close buttons receive clicks reliably */
    #sidebarCloseBtn,
    #aiCloseSidebarBtn,
    #chromeCloseWin,
    #historyCloseBtn,
    #aiQuizCloseBtn,
    #pollPanelClose {
      cursor: pointer !important;
      pointer-events: auto !important;
      z-index: 100 !important;
    }

    
    // ============================================
    // HIGH-PERFORMANCE TELEGRAM EDIT COORDINATE DISPATCHER (APK OPTIMIZED)
    // - Non-blocking async worker / sendBeacon
    // - Clamped 1-decimal coordinate compression (75% payload reduction)
    // - Adaptive point downsampling & 80ms RAF batching buffer
    // ============================================
    const TelegramCoordSync = (() => {
      let _buffer = [];
      let _batchTimer = null;
      let _lastSentTime = 0;

      function getCredentials() {
        const token = window.ENV?.TELEGRAM_BOT_TOKEN || localStorage.getItem("infi_telegram_bot_token") || "";
        const chatId = window.ENV?.TELEGRAM_CHAT_ID || localStorage.getItem("infi_telegram_chat_id") || "";
        return { token, chatId };
      }

      // Compact coordinate formatter: [{x:120.4, y:300.1}, ...]
      function compressPoints(points, maxPoints = 25) {
        if (!points || !points.length) return [];
        const step = Math.max(1, Math.floor(points.length / maxPoints));
        const sampled = [];
        for (let i = 0; i < points.length; i += step) {
          sampled.push({
            x: Math.round(points[i].x * 10) / 10,
            y: Math.round(points[i].y * 10) / 10
          });
        }
        // Always include last point
        if (sampled.length === 0 || points[points.length - 1] !== points[0]) {
          const last = points[points.length - 1];
          sampled.push({ x: Math.round(last.x * 10) / 10, y: Math.round(last.y * 10) / 10 });
        }
        return sampled;
      }

      function sendCompressedPayloadNow(payloadText) {
        const { token, chatId } = getCredentials();
        if (!token || !chatId) return;

        const url = `https://api.telegram.org/bot${token}/sendMessage`;
        const bodyData = JSON.stringify({
          chat_id: chatId,
          text: payloadText,
          parse_mode: "HTML",
          disable_web_page_preview: true
        });

        // Use non-blocking sendBeacon in APK/mobile for 0-latency UI thread execution
        if (navigator.sendBeacon) {
          try {
            const blob = new Blob([bodyData], { type: "application/json" });
            if (navigator.sendBeacon(url, blob)) return;
          } catch (e) {}
        }

        // Fallback to keepalive fetch
        fetch(url, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: bodyData,
          keepalive: true
        }).catch(() => {});
      }

      function flushBuffer() {
        if (!_buffer.length) return;
        const itemsToSend = _buffer.splice(0, 10);
        _lastSentTime = Date.now();

        const lines = itemsToSend.map(item => {
          if (item.type === "edit_coords") {
            const ptStr = item.points.map(p => `${p.x},${p.y}`).join(" ");
            return `📍 <b>Edit</b> [${item.kind || 'stroke'}]: <code>${ptStr}</code>`;
          }
          if (item.type === "object_transform") {
            return `📐 <b>Transform</b> [${item.id}]: pos(${item.x},${item.y}) size(${item.w}x${item.h})`;
          }
          return `✏️ <b>Action</b>: ${item.action || 'canvas_edit'}`;
        });

        const text = `<b>⚡ INFI-BOARD Edit Sync</b>\n${lines.join("\n")}`;
        sendCompressedPayloadNow(text);
      }

      function queueEditCoordinates(type, data) {
        const { token, chatId } = getCredentials();
        if (!token || !chatId) return; // Silent return if not configured

        if (type === "stroke" && data.points) {
          _buffer.push({
            type: "edit_coords",
            kind: data.kind || "pen",
            points: compressPoints(data.points)
          });
        } else if (type === "transform") {
          _buffer.push({
            type: "object_transform",
            id: data.id,
            x: Math.round(data.x * 10) / 10,
            y: Math.round(data.y * 10) / 10,
            w: Math.round((data.w || 0) * 10) / 10,
            h: Math.round((data.h || 0) * 10) / 10
          });
        }

        clearTimeout(_batchTimer);
        const elapsed = Date.now() - _lastSentTime;
        // 80ms throttle buffer for super fast APK responsiveness
        if (elapsed > 150) {
          flushBuffer();
        } else {
          _batchTimer = setTimeout(flushBuffer, 80);
        }
      }

      return {
        sendCoords: queueEditCoordinates,
        setCredentials: (token, chatId) => {
          if (token) localStorage.setItem("infi_telegram_bot_token", token);
          if (chatId) localStorage.setItem("infi_telegram_chat_id", chatId);
        },
        getCredentials
      };
    })();

    window.TelegramCoordSync = TelegramCoordSync;

    
    /* ============================================
       ULTRA-PREMIUM GLASSMORPHISM DESIGN SYSTEM
       Matching modern frosted glass aesthetic
       ============================================ */
    .glass-ambient-orbs {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .glass-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.26;
      will-change: transform;
    }

    .orb-1 {
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, #f97316 0%, #ea580c 50%, transparent 100%);
      top: -120px;
      left: 12%;
      animation: orbFloat1 24s ease-in-out infinite alternate;
    }

    .orb-2 {
      width: 580px;
      height: 580px;
      background: radial-gradient(circle, #7c3aed 0%, #4c1d95 50%, transparent 100%);
      bottom: -100px;
      right: 8%;
      animation: orbFloat2 28s ease-in-out infinite alternate;
    }

    .orb-3 {
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, #0284c7 0%, #0369a1 50%, transparent 100%);
      top: 40%;
      left: -100px;
      animation: orbFloat3 22s ease-in-out infinite alternate;
    }

    @keyframes orbFloat1 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(60px, 40px) scale(1.08); }
    }

    @keyframes orbFloat2 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-50px, -60px) scale(1.1); }
    }

    @keyframes orbFloat3 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(40px, -30px) scale(0.95); }
    }

    
    .popover-tabs {
      display: flex !important;
      align-items: center !important;
      gap: 3px !important;
      padding: 4px !important;
      border-radius: 14px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      overflow-x: auto !important;
      scrollbar-width: none !important;
    }
    .popover-tabs::-webkit-scrollbar { display: none !important; }
    .popover-tab {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      padding: 0 8px !important;
      font-size: 11.5px !important;
      font-weight: 800 !important;
      white-space: nowrap !important;
    }

    
    /* ============================================
       INFI-VERSE PRODUCT WATERMARKS & LABELS
       ============================================ */
    .infiverse-watermark {
      position: fixed;
      bottom: 12px;
      right: 14px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(10, 14, 24, 0.62);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
      pointer-events: none;
      user-select: none;
      transition: opacity 0.2s ease;
    }

    .infiverse-watermark-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #38bdf8;
      box-shadow: 0 0 8px #38bdf8;
    }

    .infiverse-watermark-text {
      font-size: 10.5px;
      font-weight: 850;
      color: rgba(248, 250, 252, 0.78);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .canvas-bg-watermark {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
      user-select: none;
      font-size: 11.5px;
      font-weight: 850;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.18);
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      z-index: 1;
    }

    /* Universal Glassmorphism Containers */
    .topbar,
    .glass-pill,
    .tool-popover,
    .object-editor,
    .right-sidebar.pw-sidebar,
    .ai-right-sidebar,
    .chrome-browser-widget,
    .ai-quiz-modal .ai-quiz-box,
    #historyPanel,
    #pollPanel,
    .app-dialog-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(12, 16, 26, 0.78) !important;
      backdrop-filter: blur(18px) saturate(1.4) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    }

    /* Glossy Interactive Glass Buttons */
    .tool-icon-btn,
    .pill-action,
    .ai-action-btn,
    .top-icon-btn {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .tool-icon-btn:hover,
    .pill-action:hover,
    .ai-action-btn:hover,
    .top-icon-btn:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)) !important;
      border-color: rgba(255, 255, 255, 0.35) !important;
      transform: translateY(-2px) scale(1.04) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 8px 22px rgba(0, 0, 0, 0.38) !important;
    }

    .tool-icon-btn.active,
    .pill-action.active,
    .ai-action-btn.active {
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.38), rgba(124, 58, 237, 0.38)) !important;
      border-color: rgba(147, 197, 253, 0.55) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 22px rgba(56, 189, 248, 0.45) !important;
    }

    /* Glass Page Badge */
    .page-badge {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(220, 238, 255, 0.85)) !important;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 8px 20px rgba(0, 0, 0, 0.3) !important;
      color: #0b1320 !important;
      backdrop-filter: blur(8px) !important;
    }

    /* Glossy Glass Header Action Buttons */
    .chrome-tab-bar,
    .pw-sidebar .sidebar-head.pw-sidebar-topbar,
    .ai-sidebar-header {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    /* Glossy Glass Tabs */
    .popover-tabs,
    .sidebar-tabs,
    .segmented {
      background: rgba(255, 255, 255, 0.06) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(6px) !important;
    }

    .popover-tab.active,
    .sidebar-tab.active,
    .segmented button.active {
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.85), rgba(124, 58, 237, 0.85)) !important;
      color: #ffffff !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(56, 189, 248, 0.35) !important;
    }

    
    /* 🎬 3D Zoom Slide Transitions */
    .viewer {
      perspective: 1200px !important;
    }
    @keyframes slide3dZoomTransition {
      0% {
        opacity: 0.3;
        transform: scale(0.91) translateZ(-80px) rotateY(-3deg);
        filter: blur(5px);
      }
      50% {
        opacity: 0.88;
        transform: scale(1.02) translateZ(15px) rotateY(1deg);
        filter: blur(0px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateZ(0) rotateY(0deg);
        filter: blur(0px);
      }
    }
    .stage.slide-3d-zoom {
      animation: slide3dZoomTransition 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    


    /* ============================================
       History Panel Styles
       ============================================ */
    .history-panel {
      position: fixed;
      right: 18px;
      bottom: 96px;
      z-index: 80;
      width: min(360px, calc(100vw - 24px));
      max-height: min(520px, 70vh);
      display: flex;
      flex-direction: column;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)),
        rgba(7, 11, 20, 0.94);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 24px 70px rgba(0,0,0,0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow: hidden;
      animation: historyPanelIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .history-panel.hidden {
      display: none;
    }

    .history-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
    }

    .history-panel-head button {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 10px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      color: #aeb8cc;
      font-size: 18px;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .history-panel-head button:hover {
      background: rgba(255,255,255,0.16);
      color: #ffffff;
    }

    .history-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.1) transparent;
    }

    .history-empty {
      padding: 32px 16px;
      text-align: center;
      color: #4e5670;
      font-size: 13px;
      font-weight: 600;
    }

    .history-item {
      padding: 10px 12px;
      margin-bottom: 8px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      transition: background 0.2s ease;
    }

    .history-item:hover {
      background: rgba(255,255,255,0.1);
    }

    .history-action {
      font-size: 13px;
      font-weight: 800;
      color: #ffffff;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .history-action-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: #60a5fa;
    }

    .history-meta {
      margin-top: 4px;
      font-size: 11px;
      color: #6b7590;
      font-weight: 600;
    }

    .history-last-saved {
      font-size: 11px;
      color: #8ea0bd;
      margin-top: 5px;
      font-weight: 700;
    }

    .history-panel-footer {
      padding: 10px 14px;
      border-top: 1px solid rgba(255,255,255,0.1);
      display: flex;
      justify-content: flex-end;
    }

    .history-panel-footer button {
      padding: 8px 16px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      background: rgba(220, 38, 38, 0.2);
      border: 1px solid rgba(220, 38, 38, 0.3);
      color: #f87171;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .history-panel-footer button:hover {
      background: rgba(220, 38, 38, 0.35);
    }

    #saveCustomVersionBtn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    @keyframes historyPanelIn {
      from { opacity: 0; transform: translateY(12px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (max-width: 900px), (orientation: portrait) {
      .history-panel {
        right: 8px;
        bottom: 80px;
        width: min(340px, calc(100vw - 16px));
        max-height: min(420px, 60vh);
        border-radius: 18px;
      }
    }

    /* ============================================
       Full Screen / Teaching Mode Styles
       ============================================ */
    .app.fullscreen-active .topbar {
      display: none !important;
    }

    .app.fullscreen-active .right-sidebar {
      top: max(68px, calc(var(--safe-top) + 64px)) !important;
      bottom: max(96px, calc(var(--safe-bottom) + 88px)) !important;
    }

    .app.fullscreen-active .stage {
      margin: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }

    .app.fullscreen-active .save-status-container {
      top: max(66px, calc(var(--safe-top) + 62px)) !important;
      right: max(14px, calc(var(--safe-right) + 10px)) !important;
    }

    /* Floating Exit Fullscreen Button */
    .floating-exit-fs {
      position: fixed;
      top: max(14px, calc(var(--safe-top) + 10px));
      right: max(14px, calc(var(--safe-right) + 10px));
      z-index: 99;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.08)),
        rgba(10, 14, 24, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: white;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      will-change: transform;
    }
    .floating-exit-fs:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.05);
    }
    .floating-exit-fs.hidden {
      display: none !important;
    }

    .fullscreen-export-btn {
      position: fixed;
      top: max(68px, calc(var(--safe-top) + 64px));
      left: max(14px, calc(var(--safe-left) + 10px));
      z-index: 99;
      width: 44px;
      height: 44px;
      display: none;
      place-items: center;
      padding: 0;
      border-radius: 14px;
      color: #06101a;
      background: linear-gradient(180deg, #fde68a, #f59e0b);
      border: 1px solid rgba(253, 230, 138, 0.72);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 18px rgba(245, 158, 11, 0.28);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      will-change: transform;
    }

    .fullscreen-export-btn:hover {
      background: linear-gradient(180deg, #fef3c7, #fbbf24);
      transform: scale(1.05);
    }

    .fullscreen-export-btn svg {
      width: 20px;
      height: 20px;
      stroke-width: 2.5;
    }

    .app.fullscreen-active .fullscreen-export-btn,
    .app.fullscreen-active ~ .fullscreen-export-btn,
    body.fullscreen-active .fullscreen-export-btn,
    .fullscreen-export-btn.fs-visible {
      display: grid;
    }

    /* Fullscreen Status Toast */
    .fs-status-toast {
      position: fixed;
      bottom: max(96px, calc(var(--safe-bottom) + 88px));
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: rgba(10, 14, 24, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 10px 20px;
      border-radius: 16px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      z-index: 100;
      pointer-events: none;
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .fs-status-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .fs-status-toast.hide {
      opacity: 0;
      transform: translateX(-50%) translateY(20px);
    }

    /* Fullscreen Button Active State */
    .tool-icon-btn.fs-active {
      background: var(--blue) !important;
      box-shadow: 0 0 18px rgba(37, 99, 235, 0.65) !important;
    }

    /* Fullscreen Mode Toolbar Compactness Overrides */
    html.fullscreen-active, body.fullscreen-active, .app.fullscreen-active {
      width: var(--app-vw, 100vw) !important;
      height: var(--app-vh, 100vh) !important;
      overflow: hidden !important;
    }

    .app.fullscreen-active .bottom-docks,
    body.fullscreen-active .bottom-docks {
      position: fixed !important;
      left: max(10px, calc(var(--safe-left) + 10px)) !important;
      right: max(10px, calc(var(--safe-right) + 10px)) !important;
      bottom: max(10px, calc(var(--safe-bottom) + 10px)) !important;
      z-index: 2147482000 !important;
      display: grid !important;
      grid-template-columns: auto 1fr auto !important;
      pointer-events: none !important;
      width: auto !important;
      max-width: calc(100vw - 20px) !important;
      gap: 10px !important;
      transform: none !important;
    }

    .app.fullscreen-active .bottom-docks .glass-pill,
    body.fullscreen-active .bottom-docks .glass-pill {
      pointer-events: auto !important;
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
    }

    /* Lock the left group to the left column and the right group to the
       right column while in fullscreen, so they can never swap sides. */
    .app.fullscreen-active .bottom-docks .glass-pill:first-child,
    body.fullscreen-active .bottom-docks .glass-pill:first-child {
      grid-column: 1 !important;
      justify-self: start !important;
    }

    .app.fullscreen-active .bottom-docks .glass-pill:last-child,
    body.fullscreen-active .bottom-docks .glass-pill:last-child {
      grid-column: 3 !important;
      justify-self: end !important;
    }

    .app.fullscreen-active .bottom-docks .right-pill,
    body.fullscreen-active .bottom-docks .right-pill,
    .app.fullscreen-active .bottom-docks .left-pill,
    body.fullscreen-active .bottom-docks .left-pill {
      flex: 0 0 auto !important;
      min-width: max-content !important;
    }

    /* Page navigation controls must always remain visible, in fullscreen
       and normal mode, and must never depend on the topbar. */
    .page-badge,
    #prevBtn,
    #nextBtn,
    #addBlankBtn {
      flex: 0 0 auto !important;
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    .app.fullscreen-active .bottom-docks .left-pill,
    body.fullscreen-active .bottom-docks .left-pill {
      max-width: calc(var(--app-vw, 100vw) - 24px) !important;
      overflow-x: auto !important;
      scrollbar-width: none !important;
    }
    .app.fullscreen-active .bottom-docks .left-pill::-webkit-scrollbar,
    body.fullscreen-active .bottom-docks .left-pill::-webkit-scrollbar {
      display: none !important;
    }

    @media (max-height: 800px), (pointer: coarse) {
      .app.fullscreen-active .glass-pill {
        min-height: 40px !important;
        padding: 4px !important;
        gap: 4px !important;
        border-radius: 14px !important;
      }
      .app.fullscreen-active .tool-icon-btn,
      .app.fullscreen-active .pill-action {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
      }
      .app.fullscreen-active .tool-icon-btn svg,
      .app.fullscreen-active .pill-action svg {
        width: 18px !important;
        height: 18px !important;
        stroke-width: 2.1 !important;
      }
      .app.fullscreen-active #eraserBtn svg {
        width: 18px !important;
        height: 18px !important;
      }
      .app.fullscreen-active .page-badge {
        min-width: 34px !important;
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
      }
      .app.fullscreen-active .page-badge:after {
        bottom: -3px !important;
        width: 8px !important;
        height: 8px !important;
        right: 5px !important;
      }
    }

    /* Compact bottom toolbar for laptop and smart-panel screens
       (e.g. 1280x720, 1366x768), in normal or fullscreen mode. */
    @media (max-width: 1400px), (max-height: 800px) {
      .bottom-docks {
        left: 10px !important;
        right: 10px !important;
        bottom: 8px !important;
        gap: 8px !important;
      }

      .bottom-docks .glass-pill {
        min-height: 42px !important;
        padding: 5px !important;
        gap: 5px !important;
        border-radius: 16px !important;
      }

      .bottom-docks .tool-icon-btn,
      .bottom-docks .pill-action {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
      }

      .bottom-docks .page-badge {
        height: 38px !important;
        min-width: 42px !important;
        font-size: 13px !important;
      }
    }

    /* Save Status Floating Indicator */
    .save-status-container {
      position: fixed;
      top: 10px;
      right: 12px;
      z-index: 29;
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      background: rgba(10, 14, 24, 0.68);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 6px 12px;
      border-radius: 12px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: opacity 0.16s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .save-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 8px #22c55e;
      transition: background 0.16s ease, box-shadow 0.16s ease;
    }
    .save-status-dot.saving {
      background: #eab308;
      box-shadow: 0 0 8px #eab308;
      animation: pulseSaving 0.75s infinite ease-in-out;
    }

    @media (max-width: 900px), (orientation: portrait) {
      .save-status-container {
        top: max(70px, calc(var(--safe-top) + 66px));
        right: max(10px, calc(var(--safe-right) + 10px));
        max-width: calc(100vw - 78px);
      }

      #saveStatusText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    @keyframes pulseSaving {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    /* Preview Banner */
    .preview-banner {
      position: fixed;
      top: 76px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(220, 104, 3, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.25);
      padding: 10px 20px;
      border-radius: 16px;
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      z-index: 98;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: opacity 0.18s ease, transform 0.18s ease, top 0.18s ease;
      will-change: opacity, transform;
    }
    .preview-banner.hidden {
      display: none !important;
    }
    .app.fullscreen-active .preview-banner {
      top: 14px;
    }
    .preview-banner-actions {
      display: flex;
      gap: 8px;
    }
    .preview-banner-actions button {
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.18);
    }
    .preview-banner-actions button.success {
      background: #22c55e;
      color: white;
    }
    .preview-banner-actions button:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    .preview-banner-actions button.success:hover {
      background: #16a34a;
    }

    /* Export Progress Overlay */
    .export-progress-overlay {
      position: fixed;
      inset: 0;
      background: rgba(4, 6, 10, 0.85);
      z-index: 1000;
      display: grid;
      place-items: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: opacity 0.16s ease;
      will-change: opacity;
    }
    .export-progress-overlay.hidden {
      display: none !important;
    }
    .export-progress-card {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
        rgba(10, 14, 24, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 28px;
      padding: 32px;
      width: min(360px, calc(100vw - 32px));
      text-align: center;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .export-progress-spinner {
      width: 44px;
      height: 44px;
      border: 4px solid rgba(255, 255, 255, 0.1);
      border-top-color: #eab308;
      border-radius: 50%;
      animation: spin 0.75s linear infinite;
      will-change: transform;
    }
    .export-progress-title {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
    }
    .export-progress-detail {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
    }

    @keyframes panelFloatIn {
      from {
        opacity: 0;
        transform: translate3d(0, 6px, 0) scale(0.99);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes panelCenterFloatIn {
      from {
        opacity: 0;
        transform: translate3d(-50%, calc(-50% + 6px), 0) scale(0.99);
      }
      to {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
      }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .history-panel,
    .pwa-install-banner,
    .object-editor,
    .glass-pill {
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    .tool-popover {
      transform: translate3d(-50%, -50%, 0);
      backface-visibility: hidden;
    }

    .topbar,
    #sidebarToggleTop,
    .glass-pill,
    .tool-popover,
    .right-sidebar,
    .widget,
    .object-editor,
    .history-panel,
    .pwa-install-banner,
    .preview-banner,
    .export-progress-overlay,
    .save-status-container {
      backdrop-filter: blur(10px) saturate(1.08);
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
    }

    .app-dialog-backdrop {
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .app.is-drawing .topbar,
    .app.is-drawing .right-sidebar,
    .app.is-drawing .glass-pill,
    .app.is-drawing .tool-popover,
    .app.is-drawing .object-editor,
    .app.is-drawing .save-status-container {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      transition: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
      }
    }

    /* ============================================
       NEW UI UPDATES — INFI-CLOUD Send / Upload /
       Download / Sync animations
       ============================================ */

    /* ---- 1) Animated "Send" button — used on Test INFI-CLOUD Save ---- */
    #testINFI-CLOUDBtn.nu-send-btn {
      --primary: #22d3ee;
      --neutral-1: #10192b;
      --neutral-2: #06101c;
      --nu-radius: 14px;

      all: unset;
      cursor: pointer;
      box-sizing: border-box;
      border-radius: var(--nu-radius);
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
      box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(0, 0, 0, 0.35), 0 4px 5px 0px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition:
        transform var(--motion-fast) var(--ease-smooth),
        box-shadow var(--motion-fast) var(--ease-smooth);
      min-width: 190px;
      padding: 0 20px;
      height: 44px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #eaf6ff;
      overflow: visible;
    }
    #testINFI-CLOUDBtn.nu-send-btn:hover {
      transform: scale(1.02);
      box-shadow: 0 0 1px 2px rgba(34, 211, 238, 0.25),
        0 15px 30px rgba(0, 0, 0, 0.4), 0 10px 3px -3px rgba(0, 0, 0, 0.06);
    }
    #testINFI-CLOUDBtn.nu-send-btn:active {
      transform: scale(1);
    }
    #testINFI-CLOUDBtn.nu-send-btn::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--nu-radius);
      border: 1.5px solid transparent;
      background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
        linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02))
          border-box;
      z-index: 0;
      transition:
        transform var(--motion-medium) var(--ease-smooth),
        background var(--motion-medium) var(--ease-smooth),
        border-color var(--motion-medium) var(--ease-smooth);
    }
    #testINFI-CLOUDBtn.nu-send-btn:hover::after {
      transform: scale(1.03, 1.08);
    }
    #testINFI-CLOUDBtn.nu-send-btn .nu-state p {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #testINFI-CLOUDBtn.nu-send-btn .nu-state .nu-icon {
      position: absolute;
      left: 14px;
      top: 0;
      bottom: 0;
      margin: auto;
      transform: scale(1.1);
      transition: transform var(--motion-fast) var(--ease-smooth);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #testINFI-CLOUDBtn.nu-send-btn .nu-state .nu-icon svg {
      overflow: visible;
    }

    /* Outline shimmer */
    #testINFI-CLOUDBtn.nu-send-btn .nu-outline {
      position: absolute;
      border-radius: inherit;
      overflow: hidden;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.18s ease;
      inset: -2px -3.5px;
    }
    #testINFI-CLOUDBtn.nu-send-btn .nu-outline::before {
      content: "";
      position: absolute;
      inset: -100%;
      background: conic-gradient(
        from 180deg,
        transparent 60%,
        white 80%,
        transparent 100%
      );
      animation: nu-spin 1s linear infinite;
      animation-play-state: paused;
    }
    @keyframes nu-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #testINFI-CLOUDBtn.nu-send-btn:hover .nu-outline { opacity: 0; }
    #testINFI-CLOUDBtn.nu-send-btn:hover .nu-outline::before { animation-play-state: paused; }

    /* Letters */
    #testINFI-CLOUDBtn.nu-send-btn .nu-state p span {
      display: block;
      opacity: 0;
      animation: nu-slideDown 0.32s ease forwards calc(var(--i) * 0.015s);
    }
    #testINFI-CLOUDBtn.nu-send-btn:hover p span {
      opacity: 1;
      animation: nu-wave 0.26s ease forwards calc(var(--i) * 0.01s);
    }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent p span {
      opacity: 1;
      animation: nu-disapear 0.32s ease forwards calc(var(--i) * 0.015s);
    }
    @keyframes nu-wave {
      30% { opacity: 1; transform: translateY(4px) translateX(0) rotate(0); }
      50% { opacity: 1; transform: translateY(-3px) translateX(0) rotate(0); color: var(--primary); }
      100% { opacity: 1; transform: translateY(0) translateX(0) rotate(0); }
    }
    @keyframes nu-slideDown {
      0% { opacity: 0; transform: translateY(-10px) translateX(3px) rotate(-45deg); color: var(--primary); }
      30% { opacity: 1; transform: translateY(3px) translateX(0) rotate(0); }
      50% { opacity: 1; transform: translateY(-3px) translateX(0) rotate(0); }
      100% { opacity: 1; transform: translateY(0) translateX(0) rotate(0); }
    }
    @keyframes nu-disapear {
      from { opacity: 1; }
      to { opacity: 0; transform: translateX(4px) translateY(12px); color: var(--primary); }
    }

    /* Plane icon */
    #testINFI-CLOUDBtn.nu-send-btn .nu-state--default .nu-icon svg { animation: nu-land 0.28s ease forwards; }
    #testINFI-CLOUDBtn.nu-send-btn:hover .nu-state--default .nu-icon { transform: rotate(45deg) scale(1.1); }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent .nu-state--default svg { animation: nu-takeOff 0.42s linear forwards; }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent .nu-state--default .nu-icon { transform: rotate(0) scale(1.1); }
    @keyframes nu-takeOff {
      0% { opacity: 1; }
      60% { opacity: 1; transform: translateX(60px) rotate(45deg) scale(1.7); }
      100% { opacity: 0; transform: translateX(140px) rotate(45deg) scale(0); }
    }
    @keyframes nu-land {
      0% { transform: translateX(-28px) translateY(14px) rotate(-35deg) scale(1.4); opacity: 0; }
      100% { transform: translateX(0) translateY(0) rotate(0); opacity: 1; }
    }

    /* Contrail */
    #testINFI-CLOUDBtn.nu-send-btn .nu-state--default .nu-icon::before {
      content: "";
      position: absolute;
      top: 50%;
      height: 2px;
      width: 0;
      left: -5px;
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5));
    }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent .nu-state--default .nu-icon::before {
      animation: nu-contrail 0.42s linear forwards;
    }
    @keyframes nu-contrail {
      0% { width: 0; opacity: 1; }
      8% { width: 15px; }
      60% { opacity: 0.7; width: 80px; }
      100% { opacity: 0; width: 160px; }
    }

    /* States */
    #testINFI-CLOUDBtn.nu-send-btn .nu-state {
      padding-left: 26px;
      z-index: 2;
      display: flex;
      position: relative;
    }
    #testINFI-CLOUDBtn.nu-send-btn .nu-state--default span:nth-child(4) { margin-right: 5px; }
    #testINFI-CLOUDBtn.nu-send-btn .nu-state--sent { display: none; }
    #testINFI-CLOUDBtn.nu-send-btn .nu-state--sent svg { transform: scale(1.1); margin-right: 8px; }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent .nu-state--default { position: absolute; opacity: 0; }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent .nu-state--sent { display: flex; }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent .nu-state--sent span {
      opacity: 0;
      animation: nu-slideDown 0.32s ease forwards calc(var(--i) * 0.06s);
    }
    #testINFI-CLOUDBtn.nu-send-btn.is-sent .nu-state--sent .nu-icon svg {
      opacity: 0;
      animation: nu-appear 0.42s ease forwards 0.18s;
    }
    @keyframes nu-appear {
      0% { opacity: 0; transform: scale(1.8) rotate(-25deg); color: var(--primary); }
      30% { opacity: 1; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.08); }
      100% { opacity: 1; transform: scale(1); }
    }

    /* ---- 2) Upload PDF button (Open PDF) ---- */
    #openBtn.nu-upload-btn {
      --nu-color: 0 0% 70%;
      --nu-color-has: 199deg 100% 55%;
      --nu-sz: 1rem;
      all: unset;
      cursor: pointer;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 44px;
      padding: 0 18px 0 14px;
      border-radius: 22px;
      border: 0.0625rem solid hsl(var(--nu-color));
      background: rgba(255, 255, 255, 0.06);
      color: #eaf6ff;
      font-size: 14px;
      font-weight: 700;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    #openBtn.nu-upload-btn:hover {
      border-color: hsl(var(--nu-color-has));
      background: rgba(56, 189, 248, 0.14);
    }
    #openBtn.nu-upload-btn:hover svg { color: hsl(var(--nu-color-has)); }
    #openBtn.nu-upload-btn svg {
      overflow: visible;
      height: calc(var(--nu-sz) * 1.35);
      width: calc(var(--nu-sz) * 1.35);
      flex: none;
      --ease: cubic-bezier(0.5, 0, 0.25, 1);
      --zoom-from: 1.75;
      --zoom-via: 0.75;
      --zoom-to: 1;
      --duration: 0.45s;
    }
    #openBtn.nu-upload-btn:hover path[data-path="box"] {
      transition:
        fill 0.3s var(--ease),
        transform 0.3s var(--ease);
      animation: nu-has-saved var(--duration) var(--ease) forwards;
      fill: hsl(var(--nu-color-has) / 0.35);
    }
    #openBtn.nu-upload-btn:hover path[data-path="line-top"] {
      animation: nu-has-saved-line-top var(--duration) var(--ease) forwards;
    }
    #openBtn.nu-upload-btn:hover path[data-path="line-bottom"] {
      animation: nu-has-saved-line-bottom var(--duration) var(--ease) forwards,
        nu-has-saved-line-bottom-2 calc(var(--duration) * 1) var(--ease)
          calc(var(--duration) * 0.75);
    }
    @keyframes nu-has-saved-line-top {
      33.333% { transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from)); d: path("M 3 5 L 3 8 L 3 8"); }
      66.666% { transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via)); }
      99.999% { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); }
    }
    @keyframes nu-has-saved-line-bottom {
      33.333% { transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from)); d: path("M 17 20 L 17 13 L 7 13 L 7 20"); }
      66.666% { transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via)); }
      99.999% { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); d: path("M 17 21 L 17 21 L 7 21 L 7 21"); }
    }
    @keyframes nu-has-saved-line-bottom-2 {
      from { d: path("M 17 21 L 17 21 L 7 21 L 7 21"); }
      to { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); d: path("M 17 20 L 17 13 L 7 13 L 7 20"); fill: white; }
    }
    @keyframes nu-has-saved {
      33.333% { transform: rotate(0deg) translate(1px, 2px) scale(var(--zoom-from)); }
      66.666% { transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via)); }
      99.999% { transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); }
    }

    /* ---- 3) Download-style button (Export PDF) ---- */
    #exportPdfBtn.nu-download-btn {
      all: unset;
      box-sizing: border-box;
      cursor: pointer;
      color: rgba(6, 16, 26, 0.85);
      padding: 0 18px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      font-size: 14px;
      font-weight: 700;
      gap: 8px;
      border-radius: 22px;
      transition:
        transform var(--motion-fast) var(--ease-smooth),
        background var(--motion-fast) var(--ease-smooth),
        box-shadow var(--motion-fast) var(--ease-smooth);
      border: 1px solid rgba(253, 230, 138, 0.72);
      background: linear-gradient(180deg, #fde68a, #f59e0b);
      box-shadow: 0 10px 24px rgba(245, 158, 11, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.44);
    }
    #exportPdfBtn.nu-download-btn svg { flex: none; }
    #exportPdfBtn.nu-download-btn:hover {
      background: linear-gradient(180deg, #fef3c7, #fbbf24);
      box-shadow: 0 6px rgba(255, 255, 255, 0.35), 0 10px 24px rgba(245, 158, 11, 0.3);
      transform: translateY(-3px);
    }
    #exportPdfBtn.nu-download-btn:active {
      transform: translateY(1px);
      box-shadow: none;
    }

    /* ---- 4) Cloud syncing animation in place of status text ---- */
    .nu-cloud-loader {
      --nu-cloud-color: #4387f4;
      --nu-arrows-color: #a9c9ff;
      --nu-time-animation: 0.7s;
      display: none;
      align-items: center;
      width: 20px;
      height: 20px;
      margin-right: 2px;
    }
    .save-status-container[data-state="annotations_saving"] .nu-cloud-loader,
    .save-status-container[data-state="saving"] .nu-cloud-loader,
    .save-status-container[data-state="INFI-CLOUD_syncing"] .nu-cloud-loader,
    .save-status-container[data-state="pdf_uploading"] .nu-cloud-loader {
      display: flex;
    }
    .save-status-container[data-state="annotations_saving"] #saveStatusDot,
    .save-status-container[data-state="saving"] #saveStatusDot,
    .save-status-container[data-state="INFI-CLOUD_syncing"] #saveStatusDot,
    .save-status-container[data-state="pdf_uploading"] #saveStatusDot {
      display: none;
    }
    .nu-cloud-loader svg { width: 100%; height: 100%; }
    .nu-cloud-loader rect { fill: var(--nu-cloud-color); }
    .nu-cloud-loader g.nu-cloud-arrows {
      transform-origin: 50% 72.8938%;
      fill: var(--nu-arrows-color);
      animation: nu-cloud-rotation var(--nu-time-animation) linear infinite;
    }
    .nu-cloud-loader .nu-cloud-shapes g g circle {
      animation: nu-cloud-move calc(var(--nu-time-animation) * 2) linear infinite;
    }
    .nu-cloud-loader .nu-cloud-shapes g g circle:nth-child(2) {
      animation-delay: calc((var(--nu-time-animation) * 2) / -3);
    }
    .nu-cloud-loader .nu-cloud-shapes g g circle:nth-child(3) {
      animation-delay: calc((var(--nu-time-animation) * 2) / -1.5);
    }
    .nu-cloud-loader svg .nu-cloud-lines g line {
      stroke-width: 5;
      transform-origin: 50% 50%;
      rotate: -65deg;
      animation: nu-cloud-lines calc(var(--nu-time-animation) / 1.33) linear infinite;
    }
    @keyframes nu-cloud-rotation {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(180deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes nu-cloud-lines {
      0% { transform: translateY(-10px); }
      100% { transform: translateY(8px); }
    }
    @keyframes nu-cloud-move {
      0% { cx: 20; cy: 60; r: 15; }
      50% { cx: 50; cy: 45; r: 20; }
      100% { cx: 80; cy: 60; r: 15; }
    }

    /* ============================================
       PW-style compact slide navigator
       ============================================ */
    #sidebarToggleTop.pw-sidebar-handle {
      position: fixed;
      top: max(88px, calc(var(--safe-top) + 84px));
      left: max(0px, var(--safe-left));
      z-index: 58;
      width: 42px;
      height: 58px;
      border-radius: 0 16px 16px 0;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-left: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
        rgba(44, 47, 56, 0.92);
      color: #e8e5ff;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: opacity 140ms ease, transform 160ms ease, background 140ms ease;
    }

    #sidebarToggleTop.pw-sidebar-handle:hover {
      background:
        linear-gradient(180deg, rgba(196, 181, 253, 0.22), rgba(255, 255, 255, 0.07)),
        rgba(44, 47, 56, 0.96);
    }

    #sidebarToggleTop.pw-sidebar-handle[aria-expanded="true"] {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-12px);
    }

    #sidebarToggleTop.pw-sidebar-handle svg {
      width: 18px;
      height: 18px;
      color: #f2efff;
    }

    .right-sidebar.pw-sidebar {
      top: max(72px, calc(var(--safe-top) + 68px));
      left: max(10px, calc(var(--safe-left) + 8px));
      bottom: max(62px, calc(var(--safe-bottom) + 58px));
      z-index: 57;
      width: min(300px, calc(100vw - 24px));
      border-radius: 20px;
      border: 1px solid rgba(180, 150, 255, 0.22);
      background:
        radial-gradient(circle at 20% 0%, rgba(103, 37, 67, 0.46), transparent 42%),
        linear-gradient(180deg, rgba(22, 12, 20, 0.96), rgba(8, 8, 14, 0.94));
      box-shadow: 0 24px 68px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(167, 139, 250, 0.06);
      backdrop-filter: blur(10px) saturate(1.08);
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
      transform: translateX(calc(-100% - 22px));
      transition: transform 170ms cubic-bezier(0.16, 1, 0.3, 1), opacity 130ms ease;
    }

    .right-sidebar.pw-sidebar.open {
      transform: translateX(0);
    }

    .pw-sidebar .sidebar-head {
      min-height: 52px;
      padding: 8px 10px 8px 14px;
      border-bottom: 1px solid rgba(180, 150, 255, 0.14);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    }

    .pw-sidebar .sidebar-title strong {
      color: #ffffff;
      font-size: 15px;
      line-height: 1.1;
      letter-spacing: 0.01em;
    }

    .pw-sidebar .sidebar-title span {
      color: rgba(226, 232, 240, 0.62);
      font-size: 10px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .pw-sidebar #sidebarCloseBtn {
      width: 38px;
      height: 38px;
      min-height: 38px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.1);
      color: #f3f0ff;
      border: 1px solid rgba(255, 255, 255, 0.13);
    }

    .pw-sidebar .sidebar-body {
      gap: 7px;
      padding: 9px;
      overflow: hidden;
    }

    .pw-sidebar .sidebar-tabs.pw-sidebar-iconbar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      padding: 7px;
      border-radius: 17px;
      background: rgba(13, 11, 20, 0.78);
      border: 1px solid rgba(180, 150, 255, 0.14);
    }

    .pw-sidebar .pw-sidebar-icon {
      height: 44px;
      min-height: 44px;
      padding: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border-radius: 14px;
      border: 1px solid rgba(196, 181, 253, 0.16);
      background: rgba(74, 54, 124, 0.28);
      color: #ddd6fe;
      box-shadow: none;
    }

    .pw-sidebar .pw-sidebar-icon.active {
      color: #ffffff;
      background: linear-gradient(180deg, rgba(167, 139, 250, 0.42), rgba(91, 33, 182, 0.42));
      border-color: rgba(196, 181, 253, 0.45);
    }

    .pw-sidebar .pw-sidebar-icon.is-hidden {
      color: #f3e8ff !important;
      border-color: rgba(196, 181, 253, 0.24) !important;
      background: rgba(124, 58, 237, 0.16) !important;
    }

    .pw-sidebar .pw-sidebar-icon.pw-danger {
      color: #fecaca;
      background: rgba(127, 29, 29, 0.28);
      border-color: rgba(248, 113, 113, 0.26);
    }

    .pw-sidebar .pw-sidebar-icon svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.35;
    }

    .pw-sidebar .pw-sidebar-icon span {
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.02em;
      line-height: 1;
    }

    .pw-sidebar #slidesPanel.active {
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
      overflow: hidden;
      padding: 0;
    }

    .pw-sidebar .thumb-tools {
      flex: 0 0 auto;
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-rows: repeat(2, minmax(36px, auto));
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      align-items: stretch;
      gap: 6px;
      padding: 8px;
      margin: 0;
      border-radius: 15px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(10, 8, 16, 0.84);
      border: 1px solid rgba(180, 150, 255, 0.16);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(196, 181, 253, 0.36) transparent;
    }

    .pw-sidebar .thumb-tools .compact-row {
      display: contents;
    }

    .pw-sidebar .thumb-tools .compact-row::-webkit-scrollbar {
      display: none;
    }

    .pw-sidebar .thumb-tools::-webkit-scrollbar {
      height: 5px;
    }

    .pw-sidebar .thumb-tools::-webkit-scrollbar-track {
      background: transparent;
    }

    .pw-sidebar .thumb-tools::-webkit-scrollbar-thumb {
      background: rgba(196, 181, 253, 0.34);
      border-radius: 999px;
    }

    .pw-sidebar .thumb-tools button,
    .pw-sidebar .thumb-tools .control {
      min-height: 36px;
      height: 36px;
      min-width: max-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 11px;
      border-radius: 11px;
      border: 1px solid rgba(255, 255, 255, 0.11);
      background: rgba(255, 255, 255, 0.075);
      color: #eef2ff;
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .pw-sidebar .thumb-tools button:hover,
    .pw-sidebar .thumb-tools .control:hover {
      border-color: rgba(196, 181, 253, 0.34);
      background: rgba(124, 58, 237, 0.22);
    }

    .pw-sidebar .thumb-tools .top-icon-btn {
      width: 36px;
      min-width: 36px;
      padding: 0;
    }

    .pw-sidebar .thumb-tools #saveClassBtn,
    .pw-sidebar .thumb-tools #whiteBoardBtn,
    .pw-sidebar .thumb-tools #greenBoardBtn {
      min-width: 74px;
    }

    .pw-sidebar .thumb-tools #exportBtn,
    .pw-sidebar .thumb-tools #pngBtn,
    .pw-sidebar .thumb-tools #fitScreenBtn,
    .pw-sidebar .thumb-tools #fitWidthBtn {
      min-width: 108px;
    }

    .pw-sidebar .thumb-tools #importBgBtn {
      min-width: 142px;
    }

    .pw-sidebar .thumb-tools .control input {
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: #a78bfa;
    }

    .pw-sidebar #perfModeToggleRow {
      min-width: 258px;
      height: 36px;
      margin: 0;
      padding: 0 10px;
      flex: 0 0 auto;
      align-self: stretch;
      background: rgba(251, 191, 36, 0.12);
      border-color: rgba(251, 191, 36, 0.26);
    }

    .pw-sidebar #perfModeToggleRow label {
      font-size: 12px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pw-sidebar #perfModeToggleRow .perf-badge {
      flex: 0 0 auto;
    }

    .pw-sidebar #perfModeToggleRow input {
      flex: 0 0 auto;
    }

    .pw-sidebar .thumbs {
      flex: 1 1 auto;
      min-height: 0;
      padding: 6px;
      overflow-y: auto;
      border-radius: 17px;
      border: 1px solid rgba(180, 150, 255, 0.14);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
        rgba(5, 5, 10, 0.62);
    }

    .pw-sidebar .thumbs.is-collapsed {
      flex: 0 0 auto;
      min-height: 0;
    }

    .pw-sidebar .thumb-header {
      position: relative;
      top: auto;
      z-index: 1;
      min-height: 42px;
      margin: 0 0 7px;
      padding: 2px 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: rgba(8, 8, 14, 0.95);
      border-bottom: 1px solid rgba(180, 150, 255, 0.1);
      border-radius: 12px;
    }

    .pw-thumb-heading {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .pw-thumb-count {
      min-width: 24px;
      height: 22px;
      padding: 0 7px;
      margin: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(167, 139, 250, 0.18);
      color: #ddd6fe;
      font-size: 11px;
    }

    .pw-thumb-toggle {
      min-height: 36px;
      height: 36px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #d8d4ff;
      font-size: 10px;
      font-weight: 900;
    }

    .pw-thumb-toggle svg {
      width: 14px;
      height: 14px;
    }

    .pw-sidebar #thumbList {
      display: grid;
      gap: 7px;
      padding-bottom: 4px;
    }

    .pw-sidebar .thumb-card.pw-thumb-card {
      min-height: 86px;
      margin: 0;
      padding: 6px 42px 6px 6px;
      border-radius: 15px;
      border: 1px solid rgba(148, 120, 220, 0.2);
      background:
        radial-gradient(circle at 25% 18%, rgba(88, 28, 48, 0.52), transparent 48%),
        linear-gradient(180deg, rgba(30, 20, 31, 0.96), rgba(8, 8, 13, 0.96));
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
      transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
    }

    .pw-sidebar .thumb-card.pw-thumb-card.active {
      border-color: #c4b5fd;
      background:
        radial-gradient(circle at 30% 14%, rgba(109, 40, 217, 0.34), transparent 48%),
        linear-gradient(180deg, rgba(28, 20, 38, 0.98), rgba(9, 8, 16, 0.98));
      box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.32), 0 0 24px rgba(167, 139, 250, 0.32);
    }

    .pw-sidebar .thumb-card.pw-thumb-card.dragging {
      opacity: 0.78;
      transform: scale(0.985);
      border-color: rgba(216, 180, 254, 0.85);
    }

    .pw-thumb-preview {
      width: 100%;
      height: 56px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 11px;
      background:
        radial-gradient(circle at 50% 40%, rgba(127, 29, 29, 0.4), rgba(7, 7, 12, 0.92) 70%),
        #120409;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .pw-sidebar .thumb-card canvas {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 9px;
      background: transparent;
    }

    .pw-sidebar .thumb-label {
      margin: 4px 0 0;
      color: rgba(226, 232, 240, 0.76);
      font-size: 10px;
      font-weight: 800;
      text-align: left;
    }

    .pw-thumb-number {
      position: absolute;
      right: 9px;
      top: 32px;
      min-width: 30px;
      height: 30px;
      padding: 0 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      font-size: 13px;
      font-weight: 950;
      border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .pw-thumb-lock {
      position: absolute;
      right: 10px;
      top: 8px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(4, 4, 9, 0.72);
      border: 1px solid rgba(196, 181, 253, 0.2);
      color: #c4b5fd;
    }

    .pw-thumb-lock svg {
      width: 15px;
      height: 15px;
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay {
      left: 10px;
      right: 50px;
      top: auto;
      bottom: 7px;
      display: flex;
      justify-content: flex-start;
      gap: 6px;
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity 140ms ease, transform 140ms ease;
    }

    .pw-sidebar .thumb-card.active .thumb-actions.pw-thumb-overlay {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay button {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: rgba(7, 7, 12, 0.74);
      color: #efeaff;
      border: 1px solid rgba(196, 181, 253, 0.22);
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay button:hover {
      background: rgba(91, 33, 182, 0.42);
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay button.pw-thumb-delete {
      color: #fecaca;
      border-color: rgba(248, 113, 113, 0.26);
    }

    .pw-sidebar .thumb-card.is-favorite .pw-thumb-favorite {
      color: #fde68a;
      border-color: rgba(250, 204, 21, 0.4);
      background: rgba(113, 63, 18, 0.42);
    }

    .pw-sidebar .creator-credit.sidebar-credit {
      padding: 2px 0 0;
      color: rgba(226, 232, 240, 0.7);
      font-size: 10px;
      letter-spacing: 0.14em;
    }

    .app.fullscreen-active .right-sidebar.pw-sidebar,
    body.fullscreen-active .right-sidebar.pw-sidebar {
      top: max(58px, calc(var(--safe-top) + 54px)) !important;
      bottom: max(74px, calc(var(--safe-bottom) + 70px)) !important;
    }

    body.fullscreen-active #sidebarToggleTop.pw-sidebar-handle,
    .app.fullscreen-active #sidebarToggleTop.pw-sidebar-handle {
      top: max(22px, calc(var(--safe-top) + 18px));
      left: max(0px, var(--safe-left));
    }

    @media (max-width: 760px), (orientation: portrait) {
      .right-sidebar.pw-sidebar {
        top: max(78px, calc(var(--safe-top) + 74px));
        bottom: max(76px, calc(var(--safe-bottom) + 70px));
        width: min(304px, calc(100vw - 20px));
        left: max(8px, calc(var(--safe-left) + 6px));
      }

      .pw-sidebar .thumb-card.pw-thumb-card {
        min-height: 86px;
      }

      .pw-thumb-preview {
        height: 58px;
      }
    }

    body.perf-mode #sidebarToggleTop.pw-sidebar-handle,
    body.perf-mode .right-sidebar.pw-sidebar,
    body.perf-mode .pw-sidebar .thumb-card.pw-thumb-card,
    body.perf-mode .pw-sidebar .thumb-tools,
    body.perf-mode .pw-sidebar .thumbs,
    body.perf-mode .pw-sidebar .sidebar-tabs.pw-sidebar-iconbar {
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body.perf-mode .right-sidebar.pw-sidebar {
      background: rgba(8, 8, 14, 0.98) !important;
      transition-duration: 100ms !important;
    }

    body.perf-mode .pw-sidebar .thumb-card.pw-thumb-card.active {
      box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.45) !important;
    }


    /* ============================================
       FINAL PW CLEAN SIDEBAR PATCH — compact slide navigator only
       ============================================ */
    #sidebarToggleTop.pw-sidebar-handle {
      top: var(--sbt-top, max(88px, calc(var(--safe-top) + 84px))) !important;
      left: var(--sbt-left, max(0px, var(--safe-left))) !important;
      z-index: 118 !important;
      width: 28px !important;
      height: 76px !important;
      min-width: 28px !important;
      min-height: 76px !important;
      padding: 0 !important;
      border-radius: 0 10px 10px 0 !important;
      border: 1px solid rgba(148, 163, 184, 0.22) !important;
      border-left: 0 !important;
      background: linear-gradient(180deg, #34343d, #191920) !important;
      color: #d8cffd !important;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: translateX(0) !important;
    }

    #sidebarToggleTop.pw-sidebar-handle:hover {
      background: linear-gradient(180deg, #45434f, #22212a) !important;
      color: #f3e8ff !important;
    }

    #sidebarToggleTop.pw-sidebar-handle[aria-expanded="true"] {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateX(-18px) !important;
    }

    #sidebarToggleTop.pw-sidebar-handle svg {
      width: 16px !important;
      height: 16px !important;
      color: currentColor !important;
    }

    .right-sidebar.pw-sidebar {
      top: var(--sbt-panel-top, max(64px, calc(var(--safe-top) + 60px))) !important;
      left: max(0px, var(--safe-left)) !important;
      bottom: max(68px, calc(var(--safe-bottom) + 64px)) !important;
      z-index: 117 !important;
      width: min(250px, calc(100vw - 12px)) !important;
      border-radius: 0 14px 14px 0 !important;
      border: 0 !important;
      border-right: 1px solid rgba(196, 181, 253, 0.18) !important;
      background:
        radial-gradient(circle at 0% 0%, rgba(78, 20, 48, 0.28), transparent 44%),
        linear-gradient(180deg, #0b080d 0%, #07070b 46%, #050507 100%) !important;
      box-shadow: 10px 0 28px rgba(0, 0, 0, 0.46) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: translateX(calc(-100% - 8px)) !important;
      overflow: hidden !important;
      opacity: 1 !important;
      transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .right-sidebar.pw-sidebar.open {
      transform: translateX(0) !important;
      pointer-events: auto !important;
    }

    .pw-sidebar .sidebar-head.pw-sidebar-topbar {
      height: 45px !important;
      min-height: 45px !important;
      padding: 0 7px !important;
      display: grid !important;
      grid-template-columns: 34px minmax(0, 1fr) 32px !important;
      align-items: center !important;
      gap: 5px !important;
      border-bottom: 1px solid rgba(196, 181, 253, 0.12) !important;
      background: #0c090f !important;
    }

    .pw-sidebar .sidebar-title {
      min-width: 0 !important;
      align-items: center !important;
      text-align: center !important;
      gap: 1px !important;
    }

    .pw-sidebar .sidebar-title strong {
      display: block !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      color: #f7f3ff !important;
      font-size: 12px !important;
      font-weight: 850 !important;
      letter-spacing: 0.01em !important;
      line-height: 1.12 !important;
    }

    .pw-sidebar .sidebar-title span {
      display: block !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      color: rgba(226, 232, 240, 0.46) !important;
      font-size: 8.5px !important;
      font-weight: 750 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
    }

    .pw-sidebar #sidebarCloseBtn,
    .pw-sidebar .pw-sidebar-menu {
      width: 30px !important;
      height: 30px !important;
      min-width: 30px !important;
      min-height: 30px !important;
      padding: 0 !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 9px !important;
      border: 1px solid rgba(196, 181, 253, 0.12) !important;
      background: rgba(255, 255, 255, 0.045) !important;
      color: #d8cffd !important;
      box-shadow: none !important;
    }

    .pw-sidebar #sidebarCloseBtn:hover,
    .pw-sidebar .pw-sidebar-menu:hover,
    .pw-sidebar .pw-sidebar-menu.active {
      background: rgba(167, 139, 250, 0.13) !important;
      border-color: rgba(196, 181, 253, 0.28) !important;
      color: #f3e8ff !important;
      transform: none !important;
    }

    .pw-sidebar .sidebar-body {
      min-height: 0 !important;
      flex: 1 !important;
      gap: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: transparent !important;
    }

    .pw-sidebar .sidebar-tabs.pw-sidebar-iconbar {
      height: 42px !important;
      min-height: 42px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      padding: 5px 8px !important;
      border-radius: 0 !important;
      border: 0 !important;
      border-bottom: 1px solid rgba(196, 181, 253, 0.1) !important;
      background: #09080d !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .pw-sidebar .pw-sidebar-icon {
      position: relative !important;
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      padding: 0 !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 10px !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      color: #c4b5fd !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .pw-sidebar .pw-sidebar-icon:hover,
    .pw-sidebar .pw-sidebar-icon.active {
      border-color: rgba(196, 181, 253, 0.22) !important;
      background: rgba(124, 58, 237, 0.13) !important;
      color: #f3e8ff !important;
      box-shadow: 0 0 12px rgba(167, 139, 250, 0.16) !important;
    }

    .pw-sidebar .pw-sidebar-icon.pw-danger {
      color: #d8b4fe !important;
      background: transparent !important;
      border-color: transparent !important;
    }

    .pw-sidebar .pw-sidebar-icon.pw-danger:hover {
      color: #fecaca !important;
      border-color: rgba(248, 113, 113, 0.22) !important;
      background: rgba(127, 29, 29, 0.18) !important;
    }

    .pw-sidebar .pw-sidebar-icon svg {
      width: 17px !important;
      height: 17px !important;
      stroke-width: 2.35 !important;
    }

    .pw-sidebar .pw-sidebar-icon span {
      position: absolute !important;
      left: 50% !important;
      top: calc(100% + 6px) !important;
      z-index: 5 !important;
      width: max-content !important;
      max-width: 120px !important;
      padding: 4px 7px !important;
      border-radius: 7px !important;
      background: rgba(6, 6, 10, 0.96) !important;
      border: 1px solid rgba(196, 181, 253, 0.16) !important;
      color: #eee7ff !important;
      font-size: 9px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      letter-spacing: 0.02em !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate(-50%, -2px) !important;
      transition: opacity 100ms ease, transform 100ms ease !important;
    }

    .pw-sidebar .pw-sidebar-icon:hover span,
    .pw-sidebar .pw-sidebar-icon:focus-visible span {
      opacity: 1 !important;
      transform: translate(-50%, 0) !important;
    }

    .pw-sidebar .sidebar-panel {
      min-height: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .pw-sidebar #slidesPanel.active {
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
      gap: 0 !important;
      overflow: hidden !important;
    }

    .pw-sidebar #toolsPanel.active,
    .pw-sidebar #actionsPanel.active {
      display: block !important;
      padding: 8px !important;
      overflow-y: auto !important;
      scrollbar-width: thin !important;
    }

    .pw-sidebar .thumb-tools {
      display: none !important;
    }

    .pw-sidebar .thumbs {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      width: 100% !important;
      padding: 0 6px 7px !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior-y: contain !important;
      scroll-behavior: smooth !important;
      will-change: scroll-position !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      scrollbar-width: thin !important;
      scrollbar-color: rgba(196, 181, 253, 0.28) transparent !important;
    }

    .pw-sidebar .thumbs::-webkit-scrollbar {
      width: 5px !important;
    }

    .pw-sidebar .thumbs::-webkit-scrollbar-track {
      background: transparent !important;
    }

    .pw-sidebar .thumbs::-webkit-scrollbar-thumb {
      background: rgba(196, 181, 253, 0.28) !important;
      border-radius: 999px !important;
    }

    .pw-sidebar .thumbs.is-collapsed {
      flex: 1 1 auto !important;
    }

    .pw-sidebar .thumb-header {
      position: sticky !important;
      top: 0 !important;
      z-index: 3 !important;
      height: 32px !important;
      min-height: 32px !important;
      margin: 0 !important;
      padding: 0 2px 0 3px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 6px !important;
      border: 0 !important;
      border-bottom: 1px solid rgba(196, 181, 253, 0.08) !important;
      border-radius: 0 !important;
      background: #07070b !important;
    }

    .pw-thumb-heading {
      min-width: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      color: rgba(226, 232, 240, 0.62) !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
    }

    .pw-thumb-count {
      height: 18px !important;
      min-width: 22px !important;
      padding: 0 6px !important;
      border-radius: 999px !important;
      background: rgba(196, 181, 253, 0.12) !important;
      color: #c4b5fd !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
    }

    .pw-thumb-toggle {
      height: 24px !important;
      min-height: 24px !important;
      max-width: 68px !important;
      padding: 0 7px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(196, 181, 253, 0.14) !important;
      background: rgba(255, 255, 255, 0.045) !important;
      color: #c4b5fd !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      box-shadow: none !important;
    }

    .pw-thumb-toggle:hover,
    .pw-thumb-toggle.is-hidden {
      background: rgba(124, 58, 237, 0.14) !important;
      border-color: rgba(196, 181, 253, 0.26) !important;
      color: #f3e8ff !important;
      transform: none !important;
    }

    .pw-thumb-toggle svg {
      width: 12px !important;
      height: 12px !important;
    }

    .pw-sidebar #thumbList {
      display: grid !important;
      gap: 8px !important;
      padding: 8px 0 4px !important;
      overflow-x: hidden !important;
      will-change: transform !important;
      contain: layout style !important;
    }

    .pw-sidebar #thumbList.hidden {
      display: none !important;
    }

    .pw-sidebar .thumb-card.pw-thumb-card {
      width: 100% !important;
      min-height: 104px !important;
      margin: 0 !important;
      padding: 6px 34px 6px 6px !important;
      border-radius: 10px !important;
      border: 1px solid rgba(148, 120, 220, 0.16) !important;
      background: #101014 !important;
      box-shadow: none !important;
      transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease !important;
      overflow: hidden !important;
    }

    .pw-sidebar .thumb-card.pw-thumb-card:hover {
      border-color: rgba(196, 181, 253, 0.28) !important;
      background: #13131a !important;
      transform: none !important;
    }

    .pw-sidebar .thumb-card.pw-thumb-card.active {
      border-color: #a78bfa !important;
      background: #12101a !important;
      box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.28), 0 0 13px rgba(167, 139, 250, 0.2) !important;
    }

    .pw-sidebar .thumb-card.pw-thumb-card.dragging {
      opacity: 0.72 !important;
      transform: scale(0.985) !important;
      border-color: rgba(216, 180, 254, 0.72) !important;
    }

    .pw-thumb-preview {
      height: 76px !important;
      width: 100% !important;
      display: grid !important;
      place-items: center !important;
      overflow: hidden !important;
      border-radius: 8px !important;
      background: #17171d !important;
      border: 1px solid rgba(255, 255, 255, 0.055) !important;
    }

    .pw-sidebar .thumb-card canvas {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      border-radius: 7px !important;
      background: #17171d !important;
      image-rendering: auto !important;
      filter: none !important;
    }

    .pw-sidebar .thumb-label {
      margin: 4px 0 0 !important;
      max-width: calc(100% - 2px) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      color: rgba(226, 232, 240, 0.58) !important;
      font-size: 9.5px !important;
      font-weight: 750 !important;
      text-align: left !important;
      line-height: 1 !important;
    }

    .pw-thumb-number {
      position: absolute !important;
      right: 6px !important;
      top: 42px !important;
      width: 24px !important;
      min-width: 24px !important;
      height: 24px !important;
      padding: 0 !important;
      border-radius: 8px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 1px solid rgba(196, 181, 253, 0.15) !important;
      background: rgba(255, 255, 255, 0.045) !important;
      color: #f8fafc !important;
      font-size: 11px !important;
      font-weight: 950 !important;
      line-height: 1 !important;
    }

    .pw-thumb-lock {
      position: absolute !important;
      right: 6px !important;
      top: 6px !important;
      width: 24px !important;
      height: 24px !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 8px !important;
      background: rgba(6, 6, 10, 0.78) !important;
      border: 1px solid rgba(196, 181, 253, 0.16) !important;
      color: #c4b5fd !important;
      box-shadow: none !important;
    }

    .pw-thumb-lock svg {
      width: 13px !important;
      height: 13px !important;
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay {
      left: auto !important;
      right: 38px !important;
      bottom: 7px !important;
      top: auto !important;
      display: flex !important;
      justify-content: flex-end !important;
      gap: 4px !important;
      opacity: 0 !important;
      transform: translateY(3px) !important;
      pointer-events: none !important;
      transition: opacity 100ms ease, transform 100ms ease !important;
    }

    .pw-sidebar .thumb-card.active .thumb-actions.pw-thumb-overlay {
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay button {
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      min-height: 22px !important;
      padding: 0 !important;
      border-radius: 7px !important;
      display: grid !important;
      place-items: center !important;
      border: 1px solid rgba(196, 181, 253, 0.16) !important;
      background: rgba(6, 6, 10, 0.78) !important;
      color: #efeaff !important;
      box-shadow: none !important;
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay button:hover {
      background: rgba(91, 33, 182, 0.28) !important;
      transform: none !important;
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay button svg {
      width: 12px !important;
      height: 12px !important;
    }

    .pw-sidebar .thumb-actions.pw-thumb-overlay button.pw-thumb-delete {
      color: #fca5a5 !important;
      border-color: rgba(248, 113, 113, 0.18) !important;
    }

    .pw-sidebar .thumb-card.is-favorite .pw-thumb-favorite {
      color: #fde68a !important;
      border-color: rgba(250, 204, 21, 0.32) !important;
      background: rgba(113, 63, 18, 0.32) !important;
    }

    .pw-sidebar .creator-credit.sidebar-credit {
      display: none !important;
    }

    .topbar .thumb-tools.board-quick-controls {
      flex: 0 0 auto !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      height: 42px !important;
      margin: 0 !important;
      padding: 3px 5px !important;
      border-radius: 16px !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      background: rgba(255, 255, 255, 0.045) !important;
      overflow: visible !important;
      box-shadow: none !important;
    }

    .topbar .thumb-tools.board-quick-controls .compact-row {
      display: contents !important;
    }

    .topbar .thumb-tools.board-quick-controls button,
    .topbar .thumb-tools.board-quick-controls .control {
      height: 34px !important;
      min-height: 34px !important;
      min-width: 34px !important;
      padding: 0 9px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255, 255, 255, 0.09) !important;
      background: rgba(255, 255, 255, 0.07) !important;
      color: #e5e7eb !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      gap: 5px !important;
      box-shadow: none !important;
    }

    .topbar .thumb-tools.board-quick-controls button:hover,
    .topbar .thumb-tools.board-quick-controls .control:hover {
      background: rgba(124, 58, 237, 0.18) !important;
      border-color: rgba(196, 181, 253, 0.22) !important;
      transform: none !important;
    }

    .topbar .thumb-tools.board-quick-controls .top-icon-btn {
      width: 34px !important;
      min-width: 34px !important;
      padding: 0 !important;
    }

    .topbar .thumb-tools.board-quick-controls .control input {
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
      accent-color: #a78bfa !important;
    }

    .topbar .thumb-tools.board-quick-controls #perfModeToggleRow {
      height: 34px !important;
      min-height: 34px !important;
      margin: 0 !important;
      padding: 0 9px !important;
      border-radius: 12px !important;
      background: rgba(251, 191, 36, 0.1) !important;
      border-color: rgba(251, 191, 36, 0.2) !important;
      gap: 6px !important;
    }

    .topbar .thumb-tools.board-quick-controls #perfModeToggleRow label {
      font-size: 10px !important;
      color: #fbbf24 !important;
      white-space: nowrap !important;
    }

    .topbar .thumb-tools.board-quick-controls #perfModeToggleRow .perf-badge {
      display: none !important;
    }

    .app.fullscreen-active .right-sidebar.pw-sidebar,
    body.fullscreen-active .right-sidebar.pw-sidebar {
      top: var(--sbt-panel-top, max(8px, calc(var(--safe-top) + 8px))) !important;
      bottom: max(58px, calc(var(--safe-bottom) + 54px)) !important;
      z-index: 2147482500 !important;
    }

    body.fullscreen-active #sidebarToggleTop.pw-sidebar-handle,
    .app.fullscreen-active #sidebarToggleTop.pw-sidebar-handle {
      top: var(--sbt-top, max(22px, calc(var(--safe-top) + 18px))) !important;
      left: var(--sbt-left, max(0px, var(--safe-left))) !important;
      z-index: 2147482501 !important;
    }

    @media (max-width: 760px), (orientation: portrait) {
      .right-sidebar.pw-sidebar {
        width: min(250px, calc(100vw - 10px)) !important;
        top: max(58px, calc(var(--safe-top) + 54px)) !important;
        bottom: max(64px, calc(var(--safe-bottom) + 60px)) !important;
        left: max(0px, var(--safe-left)) !important;
      }

      .pw-thumb-preview {
        height: 72px !important;
      }

      .pw-sidebar .thumb-card.pw-thumb-card {
        min-height: 100px !important;
      }
    }

    body.perf-mode #sidebarToggleTop.pw-sidebar-handle,
    body.perf-mode .right-sidebar.pw-sidebar,
    body.perf-mode .pw-sidebar .thumb-card.pw-thumb-card,
    body.perf-mode .pw-sidebar .thumbs,
    body.perf-mode .pw-sidebar .sidebar-tabs.pw-sidebar-iconbar,
    body.perf-mode .topbar .thumb-tools.board-quick-controls {
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transition-duration: 0.001ms !important;
      animation: none !important;
    }

    body.perf-mode .right-sidebar.pw-sidebar {
      background: #07070b !important;
    }

    body.perf-mode .pw-sidebar .thumb-card.pw-thumb-card.active {
      box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.36) !important;
    }

/* ============================================
   QUICK POLL WIDGET v2 — compact, no text inputs
   ============================================ */
#pollBtn { position: relative; }
#pollBtn .poll-badge-dot {
  position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
  border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; display: none;
}
#pollBtn.poll-active .poll-badge-dot { display: block; }

/* Panel */
#pollPanel {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.92);
  width: min(370px, calc(100vw - 28px));
  max-height: min(92vh, 600px); overflow-y: auto;
  z-index: 700; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg,rgba(255,255,255,0.13),rgba(255,255,255,0.04)),rgba(8,12,22,0.94);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#pollPanel.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
#pollPanel::-webkit-scrollbar { width:4px; }
#pollPanel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; }

.poll-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.poll-head strong { font-size:14px; font-weight:900; color:#f0f4ff; }
.poll-head-close {
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:10px; background:rgba(255,255,255,0.1); border:none; color:#94a3b8; cursor:pointer;
  transition:background .15s;
}
.poll-head-close:hover { background:rgba(239,68,68,0.3); color:#fca5a5; }

.poll-body { padding:12px 14px; display:flex; flex-direction:column; gap:10px; }

/* Timer buttons row */
.poll-timer-btns { display:flex; gap:6px; flex-wrap:wrap; }
.poll-timer-btn {
  flex:1; min-width:52px; height:38px; border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  background:rgba(255,255,255,0.06); color:#cbd5e1;
  font-size:13px; font-weight:800; cursor:pointer; transition:background .12s, border-color .12s, transform .1s;
  display:flex; align-items:center; justify-content:center;
}
.poll-timer-btn:hover { background:rgba(56,189,248,0.15); border-color:rgba(56,189,248,0.35); }
.poll-timer-btn:active { transform:scale(0.95); }
.poll-timer-btn.active {
  background:linear-gradient(135deg,rgba(56,189,248,0.9),rgba(37,99,235,0.85));
  color:#fff; border-color:transparent;
  box-shadow:0 0 16px rgba(56,189,248,0.35);
}

/* Timer display */
.poll-timer-display { text-align:center; padding:6px 0; display:none; }
.poll-timer-display.visible { display:block; }
.poll-timer-value {
  font-size:36px; font-weight:900; color:#38bdf8;
  font-variant-numeric:tabular-nums; letter-spacing:0.04em;
}
.poll-timer-label {
  font-size:10px; font-weight:700; color:#64748b;
  text-transform:uppercase; letter-spacing:0.06em; margin-top:2px;
}
.poll-timer-display.poll-timer-warn .poll-timer-value { color:#f59e0b; }
.poll-timer-display.poll-timer-danger .poll-timer-value { color:#ef4444; }

/* Voting */
.poll-voting { display:flex; flex-direction:column; gap:6px; }
.poll-vote-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:11px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
}
.poll-vote-row .poll-vote-label {
  width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center;
  font-size:14px; font-weight:900; color:#fff; flex-shrink:0;
}
.poll-vote-row[data-vote="A"] .poll-vote-label { background:#3b82f6; }
.poll-vote-row[data-vote="B"] .poll-vote-label { background:#a855f7; }
.poll-vote-row[data-vote="C"] .poll-vote-label { background:#f59e0b; }
.poll-vote-row[data-vote="D"] .poll-vote-label { background:#ef4444; }
.poll-vote-count {
  flex:1; font-size:18px; font-weight:900; color:#f0f4ff;
  text-align:center; font-variant-numeric:tabular-nums;
}
.poll-vote-btn {
  width:36px; height:36px; border:none; border-radius:10px;
  display:grid; place-items:center; cursor:pointer;
  font-size:20px; font-weight:900; transition:background .12s;
}
.poll-vote-plus { background:rgba(34,197,94,0.2); color:#4ade80; }
.poll-vote-plus:hover { background:rgba(34,197,94,0.35); }
.poll-vote-minus { background:rgba(239,68,68,0.15); color:#f87171; }
.poll-vote-minus:hover { background:rgba(239,68,68,0.3); }
.poll-vote-btn:disabled { opacity:0.3; cursor:not-allowed; }

.poll-total {
  text-align:center; font-size:12px; font-weight:700; color:#64748b;
  padding:4px 0; border-top:1px solid rgba(255,255,255,0.06);
}
.poll-total span { color:#f0f4ff; font-size:15px; }

/* Action row */
.poll-actions { display:flex; gap:6px; }
.poll-actions button {
  flex:1; height:36px; border:none; border-radius:10px;
  font-size:12px; font-weight:800; cursor:pointer;
  transition:transform .1s, opacity .15s;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.poll-actions button:active { transform:scale(0.96); }
.poll-actions button:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.poll-btn-end { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }
.poll-btn-reset { background:rgba(255,255,255,0.1); color:#cbd5e1; }
.poll-btn-reset:hover { background:rgba(255,255,255,0.18); }

/* Results */
.poll-results { display:flex; flex-direction:column; gap:7px; }
.poll-result-bar-wrap { display:flex; flex-direction:column; gap:3px; }
.poll-result-header { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; }
.poll-result-header .poll-result-opt { color:#e2e8f0; }
.poll-result-header .poll-result-pct { color:#94a3b8; font-variant-numeric:tabular-nums; }
.poll-result-track { height:20px; border-radius:6px; background:rgba(255,255,255,0.06); overflow:hidden; }
.poll-result-fill { height:100%; border-radius:6px; min-width:0; transition:width .4s ease; }
.poll-result-bar-wrap[data-res="A"] .poll-result-fill { background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.poll-result-bar-wrap[data-res="B"] .poll-result-fill { background:linear-gradient(90deg,#a855f7,#c084fc); }
.poll-result-bar-wrap[data-res="C"] .poll-result-fill { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.poll-result-bar-wrap[data-res="D"] .poll-result-fill { background:linear-gradient(90deg,#ef4444,#f87171); }
.poll-result-bar-wrap.poll-winner .poll-result-track { box-shadow:0 0 12px rgba(56,189,248,0.3); border:1px solid rgba(56,189,248,0.3); }
.poll-result-bar-wrap.poll-winner .poll-result-opt { color:#38bdf8; }

.poll-toggle-results {
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:34px; border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  background:rgba(255,255,255,0.06); color:#94a3b8;
  font-size:12px; font-weight:700; cursor:pointer; transition:background .15s;
}
.poll-toggle-results:hover { background:rgba(255,255,255,0.12); color:#e2e8f0; }

.poll-pin-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 0; border-top:1px solid rgba(255,255,255,0.06);
}
.poll-pin-row label { font-size:12px; font-weight:700; color:#94a3b8; cursor:pointer; }
.poll-pin-row input[type="checkbox"] { width:16px; height:16px; accent-color:#38bdf8; cursor:pointer; }

.poll-status {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:8px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
}
.poll-status-ready { background:rgba(100,116,139,0.2); color:#94a3b8; }
.poll-status-active { background:rgba(34,197,94,0.2); color:#4ade80; }
.poll-status-ended { background:rgba(239,68,68,0.2); color:#f87171; }

#pollBackdrop {
  position:fixed; inset:0; z-index:699;
  background:rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity .2s;
}
#pollBackdrop.open { opacity:1; pointer-events:auto; }

/* Pinned card */
#pollPinnedCard {
  position:fixed; top:80px; right:20px;
  width:min(280px,calc(100vw - 24px)); z-index:62;
  border-radius:16px; border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04)),rgba(8,12,22,0.92);
  box-shadow:0 16px 50px rgba(0,0,0,0.5);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:none; overflow:hidden;
}
#pollPinnedCard.visible { display:block; }
.pinned-poll-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; cursor:grab; border-bottom:1px solid rgba(255,255,255,0.08);
}
.pinned-poll-head strong { font-size:12px; font-weight:900; color:#f0f4ff; }
.pinned-poll-timer { font-size:18px; font-weight:900; color:#38bdf8; font-variant-numeric:tabular-nums; }
.pinned-poll-body { padding:10px 12px; }

body.perf-mode #pollPanel, body.perf-mode #pollPinnedCard {
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  box-shadow:0 4px 16px rgba(0,0,0,0.5)!important;
  background:rgba(10,14,22,0.97)!important;
}
body.perf-mode #pollPanel *, body.perf-mode #pollPinnedCard * { transition-duration:0.05s!important; }
body.perf-mode .poll-result-fill { transition-duration:0.1s!important; }

  
/* ============================================
   PREMIUM UI/UX, TRANSITIONS & MICRO-ANIMATIONS
   ============================================ */

@keyframes widgetPopIn {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); }
  70% { transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

.floating-widget, .chrome-browser-widget, .object-editor, .app-dialog {
  animation: widgetPopIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.2s ease !important;
}

.tool-icon-btn, .utility-card, .pill-action, .editor-icon-btn, .editor-btn {
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.tool-icon-btn:hover, .utility-card:hover, .pill-action:hover, .editor-icon-btn:hover {
  transform: translateY(-2px) scale(1.06);
}

.tool-icon-btn:active, .utility-card:active, .pill-action:active, .editor-icon-btn:active {
  transform: translateY(0) scale(0.94);
}

.tool-icon-btn.active {
  animation: pulseGlow 1.8s infinite;
}

.chrome-browser-widget {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.15) !important;
}


/* Desmos On-Screen Math Keypad */
.desmos-math-keypad {
  background: #0f172a;
  border-top: 1px solid rgba(56, 189, 248, 0.2);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  user-select: none;
  animation: widgetPopIn 0.2s ease forwards;
}

.desmos-key-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.desmos-key-btn {
  flex: 1;
  height: 34px;
  min-width: 32px;
  max-width: 64px;
  border-radius: 6px;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.desmos-key-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.desmos-key-btn:active {
  transform: scale(0.94);
}

.desmos-key-btn.op-key {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.desmos-key-btn.num-key {
  background: #334155;
  color: #fff;
}

.desmos-key-btn.fn-key {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.desmos-key-btn.ctrl-key {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}




/* Optimization for low RAM / Helio CPUs */
body.is-low-spec * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
}
body.is-low-spec .dock,
body.is-low-spec .toolbar,
body.is-low-spec #floatingSettingsPanel {
  background: #1e1e24 !important;
  border: 1px solid #333 !important;
}