:root {
      --bg: #eef3f8;
      --panel: #ffffff;
      --ink: #17324d;
      --subtle: #5f7287;
      --accent: #0f85ff;
      --accent-2: #14b6a6;
      --border: #d8e3ef;
      --shadow: 0 12px 28px rgba(10, 48, 86, 0.14);
      --glass-border: rgba(194, 212, 230, 0.86);
      --glass-top: rgba(255, 255, 255, 0.62);
      --glass-btm: rgba(247, 252, 255, 0.42);
      --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 28px rgba(8, 36, 67, 0.14);
      --toolbar-h: 72px;
      --thumbs-h: 132px;
      --slide-w: 1280;
      --slide-h: 720;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Zalando Sans SemiExpanded", "Rubik", "Avenir Next", "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 18% 12%, rgba(20, 182, 166, 0.2), transparent 45%),
        radial-gradient(circle at 86% 78%, rgba(15, 133, 255, 0.2), transparent 46%),
        linear-gradient(170deg, #f7fbff 0%, #ebf2f9 100%);
      height: 100vh;
      overflow: hidden;
    }

    .home-landing {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 5;
    }

    .home-landing.active {
      display: flex;
    }

    .home-card {
      width: min(92vw, 420px);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      backdrop-filter: blur(16px) saturate(1.2);
      box-shadow: var(--glass-shadow);
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
    }

    .home-logo {
      font-family: "Boldonse", "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      font-size: 34px;
      font-weight: 400;
      text-align: center;
      color: var(--ink);
      margin-bottom: 10px;
      text-transform: lowercase;
    }

    .home-input {
      height: 46px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.84);
      color: var(--ink);
      padding: 0 12px;
      font: 500 16px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      outline: none;
    }

    .home-input:focus {
      border-color: rgba(15, 133, 255, 0.6);
      box-shadow: 0 0 0 2px rgba(15, 133, 255, 0.14);
    }

    .home-code-input {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-weight: 600;
      text-align: center;
    }

    .home-btn {
      height: 46px;
      border-radius: 12px;
      border: 1px solid #0a74d8;
      background: linear-gradient(160deg, var(--accent), #1181ec);
      color: #fff;
      font: 600 15px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      cursor: pointer;
      margin-top: 6px;
    }

    .home-btn-secondary {
      border-color: var(--border);
      background: rgba(255, 255, 255, 0.62);
      color: var(--subtle);
      font-size: 13px;
      margin-top: 2px;
    }

    .home-btn-account {
      margin-top: 0;
      font-size: 12px;
      color: #2e587f;
      border-color: rgba(155, 178, 198, 0.78);
      background: rgba(255, 255, 255, 0.76);
    }

    .home-btn-scan {
      border-color: rgba(133, 162, 187, 0.75);
      background: rgba(255, 255, 255, 0.88);
      color: #244c71;
      margin-top: 2px;
    }

    .home-btn-scan:hover {
      border-color: rgba(15, 133, 255, 0.64);
      background: rgba(255, 255, 255, 0.96);
    }

    .home-legal-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      color: rgba(69, 92, 115, 0.7);
      font: 500 12px/1.2 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
    }

    .home-legal-links a {
      color: rgba(45, 89, 128, 0.92);
      text-decoration: none;
      transition: color 140ms ease;
    }

    .home-legal-links a:hover {
      color: #0f85ff;
      text-decoration: underline;
    }

    .home-scan-modal {
      position: absolute;
      inset: 0;
      z-index: 40;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(8, 24, 40, 0.36);
      backdrop-filter: blur(6px);
    }

    .home-scan-modal.open {
      display: flex;
    }

    .home-scan-card {
      width: min(92vw, 420px);
      border-radius: 20px;
      border: 1px solid var(--glass-border);
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(16px) saturate(1.2);
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .home-scan-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .home-scan-title {
      margin: 0;
      font: 600 15px/1.2 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      color: #17324d;
    }

    .home-scan-view {
      width: 100%;
      min-height: 280px;
      border-radius: 12px;
      border: 1px solid rgba(157, 184, 207, 0.72);
      background: rgba(255, 255, 255, 0.9);
      overflow: hidden;
      position: relative;
    }

    .home-scan-view video,
    .home-scan-view canvas {
      width: 100% !important;
      height: auto !important;
      display: block;
    }

    .home-scan-status {
      margin: 0;
      text-align: center;
      color: #4f6e88;
      font: 500 12px/1.35 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
    }

    .app {
      position: relative;
      height: 100vh;
      width: 100vw;
      display: none;
    }

    .app.active {
      display: block;
    }

    .toolbar {
      position: absolute;
      z-index: 1200;
      top: 14px;
      left: 14px;
      right: 14px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      backdrop-filter: blur(18px) saturate(1.2);
      box-shadow: var(--glass-shadow);
      overflow: visible;
      white-space: nowrap;
      transition: opacity 220ms ease, transform 220ms ease;
    }

    .toolbar-tools {
      display: flex;
      align-items: center;
      gap: 2px;
      justify-self: center;
    }

    .toolbar-left {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px 0 2px;
      margin-right: 6px;
      border-right: 1px solid var(--border);
      font-family: "Boldonse", "Zalando Sans SemiExpanded", "Rubik", "Segoe UI", sans-serif;
    }

    .brand-name {
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
      color: var(--ink);
      letter-spacing: 0.01em;
      text-transform: lowercase;
    }

    .brand-beta {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #37668f;
      border: 1px solid #b7cee3;
      border-radius: 999px;
      padding: 3px 7px 2px;
      background: rgba(255, 255, 255, 0.65);
    }

    .btn,
    .field,
    .toolbar label {
      height: 40px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--panel);
      color: var(--ink);
      padding: 0 12px;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .btn {
      font-weight: 600;
      transition: transform 0.12s ease, box-shadow 0.2s ease;
    }

    .btn .ico {
      display: inline-flex;
      width: 16px;
      height: 16px;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .btn .ico svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .toolbar-icon-btn {
      width: 72px;
      height: 56px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 0 6px;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    }

    .toolbar-icon-btn svg {
      width: 23px;
      height: 23px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .toolbar-icon-btn img {
      width: 22px;
      height: 22px;
      display: block;
      opacity: 0.92;
    }

    .toolbar-icon-btn .ico svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .toolbar-icon-btn .tool-label {
      font-size: 11px;
      line-height: 1;
      font-family: "Zalando Sans SemiExpanded", "Rubik", "Segoe UI", sans-serif;
      font-weight: 500;
      margin-top: 5px;
      color: var(--subtle);
    }

    .toolbar-icon-btn:hover {
      background: rgba(255, 255, 255, 0.62);
      border-color: rgba(125, 153, 184, 0.42);
      transform: translateY(-1px);
    }

    .toolbar-icon-btn.active {
      background: rgba(15, 133, 255, 0.12);
      border-color: rgba(15, 133, 255, 0.45);
      color: #0f85ff;
    }

    .toolbar-icon-btn.active img {
      opacity: 1;
    }

    .toolbar-icon-btn.active .tool-label {
      color: #0f85ff;
    }

    .toolbar-right {
      justify-self: end;
      display: inline-flex;
    }

    .toolbar-popover {
      position: absolute;
      z-index: 48;
      top: calc(var(--toolbar-h) + 20px);
      min-width: 220px;
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(14px);
      padding: 12px;
      display: none;
    }

    .toolbar-popover.open {
      display: block;
    }

    .btn.icon-only {
      width: 40px;
      min-width: 40px;
      justify-content: center;
      padding: 0;
      font-size: 17px;
    }

    .btn.icon-only.compact {
      width: 34px;
      min-width: 34px;
      height: 34px;
      border-radius: 9px;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(9, 42, 78, 0.12);
    }

    .btn.primary {
      background: linear-gradient(160deg, var(--accent), #1181ec);
      color: #fff;
      border-color: #0a74d8;
    }

    .btn[disabled],
    .field[disabled],
    label.disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .field {
      padding: 0 10px;
      font-weight: 600;
    }

    .bg-tools {
      height: 40px;
      padding: 4px 8px;
      gap: 8px;
    }

    .bg-tools.disabled {
      opacity: 0.45;
      pointer-events: none;
    }

    .bg-tools .bg-label {
      font-size: 12px;
      color: #51657b;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .color-picker-wrap {
      position: relative;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid #bdd1e5;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      cursor: pointer;
    }

    .color-picker-wrap .swatch {
      position: absolute;
      inset: 3px;
      border-radius: 5px;
      border: 1px solid rgba(36, 60, 88, 0.2);
      background: #f4f7fb;
      pointer-events: none;
    }

    .color-picker-wrap input[type="color"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    .pattern-picker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .pattern-chip {
      --chip-bg: #f4f7fb;
      width: 28px;
      height: 28px;
      border: 1px solid #c8d7e6;
      border-radius: 7px;
      padding: 0;
      cursor: pointer;
      background-color: var(--chip-bg);
      transition: box-shadow 0.2s ease, transform 0.12s ease;
    }

    .pattern-chip:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(9, 42, 78, 0.13);
    }

    .pattern-chip.active {
      border-color: #0f85ff;
      box-shadow: 0 0 0 2px rgba(15, 133, 255, 0.2);
    }

    .pattern-chip[data-pattern="dots"] {
      background-image: radial-gradient(rgba(16, 86, 158, 0.3) 1.3px, transparent 1.3px);
      background-size: 9px 9px;
    }

    .pattern-chip[data-pattern="grid"] {
      background-image:
        linear-gradient(to right, rgba(16, 86, 158, 0.26) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 86, 158, 0.26) 1px, transparent 1px);
      background-size: 9px 9px;
    }

    .pattern-chip[data-pattern="diagonal"] {
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(16, 86, 158, 0.28),
        rgba(16, 86, 158, 0.28) 3px,
        transparent 3px,
        transparent 8px
      );
    }

    .pattern-chip[data-pattern="none"] {
      background-image: none;
      position: relative;
    }

    .pattern-chip[data-pattern="none"]::after {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      top: 50%;
      height: 1px;
      background: rgba(16, 86, 158, 0.32);
      transform: rotate(-25deg);
    }

    .toolbar input[type="color"] {
      display: block;
    }

    .toolbar select {
      border: none;
      outline: none;
      font: inherit;
      color: inherit;
      background: transparent;
      width: 120px;
    }

    .workspace {
      position: absolute;
      inset: 0;
      overflow: hidden;
      padding: calc(var(--toolbar-h) + 30px) 16px calc(var(--thumbs-h) + 36px);
    }

    .stage {
      position: absolute;
      width: calc(var(--slide-w) * 1px);
      height: calc(var(--slide-h) * 1px);
      left: 0;
      top: 0;
      transform-origin: top left;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255, 255, 255, 0.7);
      transition: background-color 0.2s ease;
    }

    .stage.pattern-dots {
      background-image: radial-gradient(rgba(16, 86, 158, 0.18) 1.5px, transparent 1.5px);
      background-size: 24px 24px;
    }

    .stage.pattern-grid {
      background-image:
        linear-gradient(to right, rgba(16, 86, 158, 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 86, 158, 0.16) 1px, transparent 1px);
      background-size: 36px 36px;
    }

    .stage.pattern-diagonal {
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(16, 86, 158, 0.16),
        rgba(16, 86, 158, 0.16) 8px,
        transparent 8px,
        transparent 20px
      );
    }

    .canvas-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    }

    .guide-line {
      position: absolute;
      pointer-events: none;
      z-index: 8;
      display: none;
      background: rgba(15, 133, 255, 0.78);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
    }

    .guide-line.v {
      width: 1px;
      top: 0;
      bottom: 0;
    }

    .guide-line.h {
      height: 1px;
      left: 0;
      right: 0;
    }

    .marquee-select {
      position: absolute;
      border: 1px dashed rgba(15, 133, 255, 0.9);
      background: rgba(15, 133, 255, 0.14);
      pointer-events: none;
      z-index: 20;
    }

    .el {
      position: absolute;
      min-width: 48px;
      min-height: 38px;
      border: 1px solid transparent;
      border-radius: 10px;
      cursor: default;
      user-select: none;
      z-index: 6;
    }

    .el.selected {
      border-color: rgba(15, 133, 255, 0.7);
      box-shadow: 0 0 0 3px rgba(15, 133, 255, 0.16);
    }

    .el.locked {
      cursor: default;
      border-color: transparent;
      box-shadow: none;
    }

    .el .resize-handle {
      position: absolute;
      width: 14px;
      height: 14px;
      right: -6px;
      bottom: -6px;
      border-radius: 4px;
      border: 1px solid #fff;
      background: linear-gradient(145deg, #0f85ff, #14b6a6);
      box-shadow: 0 4px 10px rgba(6, 39, 73, 0.3);
      cursor: nwse-resize;
    }

    .el.locked .resize-handle {
      display: none;
    }

    .text-el {
      padding: 0;
      overflow: visible;
    }

    .text-content {
      width: 100%;
      height: auto;
      padding: 10px 12px;
      backdrop-filter: none;
      font-size: 34px;
      font-weight: 500;
      line-height: 1.15;
      color: #14283e;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }

    .text-content[contenteditable="true"]:focus {
      outline: none;
      background: inherit;
    }

    .image-el {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    .imported-slide-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
    }

    .thumbs {
      position: absolute;
      z-index: 35;
      left: 14px;
      right: 14px;
      bottom: 14px;
      border: 1px solid var(--glass-border);
      border-radius: 22px;
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      backdrop-filter: blur(18px) saturate(1.2);
      display: flex;
      align-items: center;
      padding: 12px 14px;
      gap: 10px;
      overflow: visible;
      box-shadow: var(--glass-shadow);
      transition: opacity 220ms ease, transform 220ms ease;
    }

    .thumb-add-wrap {
      position: relative;
      flex: 0 0 auto;
      z-index: 60;
    }

    .thumb-add {
      flex: 0 0 auto;
      width: 54px;
      height: 96px;
      border: 1px dashed #b7ccdf;
      border-radius: 11px;
      background: #fff;
      color: #24527b;
      font-size: 27px;
      font-weight: 600;
      cursor: pointer;
    }

     .thumb-add:hover {
      border-color: #0f85ff;
      box-shadow: 0 6px 12px rgba(15, 50, 84, 0.15);
    }

    .thumb-add-menu {
      position: absolute;
      left: 0;
      bottom: 104px;
      width: 170px;
      padding: 6px;
      border-radius: 12px;
      border: 1px solid var(--glass-border);
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      backdrop-filter: blur(14px);
      box-shadow: 0 10px 24px rgba(8, 36, 67, 0.2);
      display: none;
      z-index: 1200;
    }

    .thumb-add-menu.open {
      display: block;
    }

    .thumb-add-item {
      width: 100%;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 8px;
      font: 500 13px/1.2 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      padding: 8px;
      cursor: pointer;
      text-align: left;
    }

    .thumb-add-item:hover {
      background: rgba(15, 133, 255, 0.12);
    }

    .thumb-add-item-ico {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #1f4568;
      flex: 0 0 18px;
    }

    .thumb-add-item-ico svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .thumb {
      flex: 0 0 auto;
      width: 160px;
      display: grid;
      gap: 6px;
      cursor: pointer;
      user-select: none;
    }

    .thumb-card {
      width: 160px;
      height: 90px;
      border-radius: 10px;
      border: 2px solid transparent;
      background: #fff center/cover no-repeat;
      box-shadow: 0 6px 12px rgba(15, 50, 84, 0.13);
      overflow: hidden;
    }

    .thumb.active .thumb-card {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(15, 133, 255, 0.15);
    }

    .thumb.drag-target .thumb-card {
      border-color: #14b6a6;
    }

    .thumb-meta {
      font-size: 12px;
      color: #4a6077;
      display: flex;
      justify-content: space-between;
      font-weight: 500;
    }

    .thumb-kind {
      font-weight: 400;
      opacity: 0.5;
    }

    .status {
      margin-left: auto;
      font-size: 13px;
      color: var(--subtle);
      font-weight: 500;
    }

    .hint {
      position: absolute;
      right: 24px;
      bottom: calc(var(--thumbs-h) + 30px);
      background: rgba(23, 50, 77, 0.88);
      color: #fff;
      border-radius: 10px;
      padding: 9px 12px;
      font-size: 12px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: 0.25s ease;
    }

    .hint.show {
      opacity: 1;
      transform: translateY(0);
    }

    .workspace:fullscreen {
      padding: 0;
      background: #041222;
    }

    .workspace:fullscreen .hint {
      display: none;
    }

    .workspace:fullscreen .zoom-reset-btn {
      display: none;
    }

    body.zoomed-in .toolbar {
      opacity: 0;
      transform: translateY(-10px);
      pointer-events: none;
    }

    body.zoomed-in .thumbs {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
    }

    .project-title-input {
      width: 230px;
      min-width: 130px;
      max-width: 130px;
      height: 32px;
      border: none;
      outline: none;
      background: transparent;
      color: var(--ink);
      font: 500 16px/1.2 "Zalando Sans SemiExpanded", "Rubik", "Avenir Next", "Segoe UI", sans-serif;
      padding: 0 2px;
    }

    .project-title-input:focus {
      border-bottom: 1px solid rgba(15, 133, 255, 0.55);
    }

    .ad-slot {
      position: fixed;
      right: 10px;
      bottom: 10px;
      width: 180px;
      height: 52px;
      border: 1px dashed #a7bcd1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.88);
      color: #64819c;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.02em;
      z-index: 50;
    }

    .canvas-menu {
      position: fixed;
      width: 150px;
      padding: 6px;
      border-radius: 12px;
      border: 1px solid var(--glass-border);
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      backdrop-filter: blur(16px) saturate(1.15);
      box-shadow: 0 14px 26px rgba(8, 36, 67, 0.18);
      z-index: 1200;
      display: none;
    }

    .canvas-menu.open {
      display: block;
    }

    .menu-item {
      width: 100%;
      border: 0;
      background: transparent;
      color: var(--ink);
      text-align: left;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      border-radius: 8px;
      padding: 8px 10px;
      cursor: pointer;
    }

    .menu-item:hover {
      background: rgba(15, 133, 255, 0.12);
    }

    .menu-item.disabled {
      opacity: 0.45;
      pointer-events: none;
    }

    .zoom-reset-btn {
      position: absolute;
      right: 24px;
      bottom: calc(var(--thumbs-h) + 34px);
      width: 34px;
      height: 34px;
      border-radius: 9px;
      border: 1px solid var(--glass-border);
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      color: var(--ink);
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 16px rgba(8, 36, 67, 0.18);
      z-index: 32;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .zoom-reset-btn svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .interactive-block {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(15, 133, 255, 0.34);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(242,248,255,0.72));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 20px rgba(8,36,67,0.12);
      display: grid;
      place-items: center;
      color: #1f4568;
      text-align: center;
      padding: 16px;
      z-index: 5;
      pointer-events: auto;
      cursor: default;
    }

    .interactive-block h3 {
      margin: 0 0 8px;
      font-size: 24px;
    }

    .interactive-block-inner {
      width: min(86%, 760px);
      margin: 0 auto;
    }

    .interactive-kind-icon {
      width: 44px;
      height: 44px;
      margin: 0 auto 12px;
      color: #1f4568;
    }

    .interactive-kind-icon svg {
      width: 44px;
      height: 44px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .interactive-config-btn {
      margin: 14px auto 0;
      min-width: 124px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid #bcd2e6;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 6px 14px rgba(8, 36, 67, 0.12);
      color: #1f4568;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 10px;
      cursor: pointer;
      font: 500 12px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
    }

    .interactive-config-btn:hover {
      border-color: #0f85ff;
      background: rgba(255, 255, 255, 0.98);
    }

    .interactive-config-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    

    .overlay-panel {
      position: absolute;
      z-index: 44;
      right: 20px;
      top: calc(var(--toolbar-h) + 54px);
      width: 320px;
      max-height: calc(100vh - 250px);
      overflow: auto;
      border: 1px solid var(--glass-border);
      border-radius: 15px;
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(14px);
      padding: 10px;
      display: none;
    }

    .overlay-panel.open {
      display: block;
    }

    .panel-body {
      padding: 10px;
    }

    .overlay-title {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--subtle);
      margin: 0 0 8px;
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 10px 8px;
      border-bottom: 1px solid rgba(130, 160, 190, 0.22);
      cursor: grab;
      user-select: none;
    }

    .panel-head:active {
      cursor: grabbing;
    }

    .panel-close {
      width: 24px;
      height: 24px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--panel);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      padding: 0;
    }

    .panel-close:hover {
      border-color: #0f85ff;
      box-shadow: 0 0 0 2px rgba(15, 133, 255, 0.14);
    }

    .overlay-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .overlay-row input,
    .overlay-row select,
    .overlay-row textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      padding: 7px 9px;
      font: inherit;
      font-size: 13px;
    }

    .overlay-list {
      display: grid;
      gap: 6px;
      margin: 6px 0;
    }

    .overlay-chip {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 500;
    }

    #interactionPanel {
      width: 360px;
      padding: 0;
      overflow: hidden;
    }

    #interactionPanel .panel-body {
      padding: 10px;
    }

    #interactionPanel .overlay-row input,
    #interactionPanel .overlay-row textarea,
    #interactionPanel .overlay-row select {
      border-radius: 10px;
      padding: 9px 10px;
    }

    #interactionPanel .overlay-row textarea {
      min-height: 104px;
      resize: vertical;
    }

    #interactionPanel .overlay-row:last-child {
      margin-bottom: 0;
    }

    #interactionPanel .overlay-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 6px;
    }

    .participant-app {
      display: none;
      min-height: 100vh;
      padding: 14px;
      background:
        radial-gradient(circle at 16% 10%, rgba(20, 182, 166, 0.16), transparent 45%),
        radial-gradient(circle at 84% 78%, rgba(15, 133, 255, 0.16), transparent 46%),
        linear-gradient(170deg, #f7fbff 0%, #ebf2f9 100%);
      color: #17324d;
      font-family: "Zalando Sans SemiExpanded", "Rubik", "Segoe UI", sans-serif;
    }

    .participant-app.active {
      display: block;
    }

    .phone-card {
      border: 1px solid #d1dfec;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,251,255,0.86));
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: 0 8px 20px rgba(8, 36, 67, 0.12);
    }

    .phone-options {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .phone-btn {
      border: 1px solid #b9cde2;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,252,255,0.92));
      min-height: 46px;
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      font: 500 15px/1.2 inherit;
      color: #17324d;
      cursor: pointer;
      transition: transform 120ms ease, box-shadow 160ms ease;
    }

    .phone-btn:active {
      transform: scale(0.99);
    }

    .phone-btn.selected {
      border-color: #0f85ff;
      box-shadow: 0 0 0 3px rgba(15, 133, 255, 0.16);
    }

    @media (max-width: 820px) {
      .home-btn-secondary {
        opacity: 0.45;
        pointer-events: none;
      }

      :root {
        --toolbar-h: 126px;
        --thumbs-h: 128px;
      }

      .toolbar {
        flex-wrap: wrap;
        align-content: center;
        left: 10px;
        right: 10px;
        top: 10px;
      }

      .toolbar-tools {
        width: 100%;
      }

      .thumbs {
        left: 10px;
        right: 10px;
        bottom: 10px;
      }

      .status {
        width: 100%;
        margin-left: 0;
      }
    }


    .interactive-subtitle {
      margin: 4px auto 10px;
      max-width: 720px;
      color: #325575;
      font-size: 18px;
      line-height: 1.35;
      font-weight: 500;
    }

    .poll-preview-list {
      width: min(78%, 760px);
      margin: 4px auto 0;
      display: grid;
      gap: 10px;
    }

    .poll-preview-opt {
      display: grid;
      gap: 8px;
      border: 1px solid rgba(52, 88, 120, 0.2);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.86);
      padding: 12px 14px;
      color: #224665;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 6px 14px rgba(8, 36, 67, 0.08);
    }

    .poll-preview-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .poll-preview-track {
      height: 10px;
      border-radius: 999px;
      background: rgba(22, 63, 99, 0.12);
      overflow: hidden;
    }

    .poll-preview-fill {
      height: 100%;
      border-radius: inherit;
      width: 0;
      transition: width 460ms cubic-bezier(0.2, 0.75, 0.2, 1);
      box-shadow: 0 4px 10px rgba(15, 133, 255, 0.32);
    }

    .poll-preview-count {
      min-width: 30px;
      text-align: right;
      color: #0f85ff;
      font-weight: 600;
    }

    .poll-preview-empty {
      border: 1px dashed rgba(52, 88, 120, 0.35);
      border-radius: 12px;
      padding: 14px;
      color: #5c7893;
      font-size: 14px;
    }

    .wordcloud-preview {
      width: min(82%, 800px);
      margin: 8px auto 0;
    }

    .wordcloud-canvas {
      position: relative;
      width: 100%;
      height: 340px;
      border-radius: 14px;
      border: 1px solid rgba(52, 88, 120, 0.24);
      background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(247,251,255,0.7));
      overflow: hidden;
    }

    .wc-word {
      position: absolute;
      transform: translate(-50%, -50%);
      color: #1d4566;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.01em;
      white-space: nowrap;
      user-select: none;
      font-size: var(--wc-size, 20px);
      transition: font-size 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
      text-shadow: 0 3px 10px rgba(17, 73, 116, 0.15);
    }

    .wc-word.wc-word-new {
      animation: wcPop 320ms ease;
    }

    @keyframes wcPop {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .wordcloud-placeholder {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #6a829a;
      font-size: 14px;
      font-weight: 500;
    }

    .config-card {
      border: 1px solid rgba(126, 153, 182, 0.3);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.6);
      padding: 10px;
      margin-bottom: 8px;
    }

    .config-title {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #5c7490;
      margin-bottom: 8px;
    }


    .session-panel-body {
      display: grid;
      gap: 10px;
    }

    .session-row {
      display: grid;
      gap: 6px;
    }

    .session-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #5e7893;
      font-weight: 600;
    }

    .session-url-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .session-url-row .btn {
      height: 36px;
      min-width: 68px;
      justify-content: center;
      padding: 0 12px;
      font-size: 13px;
    }

    .session-qr-row {
      justify-items: center;
      padding: 4px 0;
      gap: 8px;
    }

    .session-qr-box {
      background: #fff;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid #d2deea;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
      min-height: 188px;
      min-width: 188px;
      display: grid;
      place-items: center;
    }

    #sessionToggleBtn {
      width: 100%;
      height: 40px;
      justify-content: center;
      font-weight: 600;
    }

    .session-count {
      text-align: center;
      color: #2e5678;
      font-size: 14px;
      font-weight: 500;
      padding-top: 2px;
    }

    .present-join-badge {
      position: absolute;
      right: 16px;
      top: 16px;
      z-index: 60;
      display: none;
      border: 1px solid rgba(177, 205, 230, 0.82);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 20px rgba(8, 36, 67, 0.18);
      backdrop-filter: blur(12px);
      padding: 10px;
      width: 176px;
    }

    .present-join-badge.show {
      display: grid;
      gap: 8px;
      justify-items: center;
    }

    .present-join-title {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #365f83;
      font-weight: 600;
    }

    .session-code {
      font-size: 21px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #1f4f7a;
      padding: 2px 8px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(162, 188, 212, 0.75);
    }

    .present-join-code {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #1f4f7a;
      border: 1px solid rgba(150, 178, 202, 0.7);
      border-radius: 10px;
      background: rgba(255,255,255,0.74);
      padding: 3px 10px;
    }

    .present-qr-box {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #d2deea;
      padding: 7px;
      min-width: 114px;
      min-height: 114px;
      display: grid;
      place-items: center;
    }

    .participant-list {
      border: 1px solid #d2dfec;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.82);
      min-height: 52px;
      max-height: 140px;
      overflow: auto;
      padding: 6px;
      display: grid;
      gap: 4px;
    }

    .participant-item {
      border: 1px solid rgba(165, 189, 213, 0.52);
      border-radius: 8px;
      background: #fff;
      padding: 6px 8px;
      font-size: 13px;
      color: #2c5577;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .participant-empty {
      color: #6a839d;
      font-size: 13px;
      padding: 6px 2px;
      text-align: center;
    }

    #accountPanel {
      width: 420px;
      max-height: min(78vh, 740px);
      z-index: 2450;
      overflow: hidden;
    }

    .account-panel-body {
      display: grid;
      gap: 10px;
      max-height: calc(min(78vh, 740px) - 46px);
      overflow: auto;
      padding-top: 8px;
    }

    .account-profile-card,
    .account-plan-card,
    .account-library-card {
      border: 1px solid rgba(150, 180, 206, 0.45);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.82);
      padding: 10px;
      display: grid;
      gap: 10px;
    }

    .account-profile-main {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: center;
    }

    .account-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(128, 162, 191, 0.62);
      background: linear-gradient(150deg, rgba(14, 133, 255, 0.2), rgba(20, 182, 166, 0.2));
      display: grid;
      place-items: center;
      color: #1e4f79;
      font-size: 14px;
      font-weight: 600;
    }

    .account-profile-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .account-name {
      color: #1f476a;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-email {
      color: #5d7692;
      font-size: 12px;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-profile-actions,
    .account-plan-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .account-plan-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-plan-head,
    .account-library-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #2b5377;
      font-size: 13px;
      font-weight: 600;
    }

    .account-plan-head strong {
      border: 1px solid rgba(148, 179, 204, 0.66);
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #2c5679;
      background: rgba(255, 255, 255, 0.8);
    }

    .account-plan-copy {
      color: #607b95;
      font-size: 12px;
      line-height: 1.4;
    }

    .account-plan-actions .btn.active {
      border-color: rgba(15, 133, 255, 0.68);
      box-shadow: 0 0 0 2px rgba(15, 133, 255, 0.18);
      background: rgba(255, 255, 255, 0.98);
    }

    .account-library-list {
      display: grid;
      gap: 8px;
      max-height: 270px;
      overflow: auto;
      padding-right: 2px;
    }

    .account-library-empty {
      border: 1px dashed rgba(153, 183, 206, 0.74);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.8);
      color: #69849f;
      font-size: 12px;
      text-align: center;
      padding: 12px 8px;
    }

    .account-project-item {
      border: 1px solid rgba(151, 181, 206, 0.55);
      border-radius: 10px;
      background: #fff;
      padding: 8px;
      display: grid;
      gap: 8px;
    }

    .account-project-item.active {
      border-color: rgba(15, 133, 255, 0.68);
      box-shadow: 0 0 0 2px rgba(15, 133, 255, 0.16);
    }

    .account-project-meta {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .account-project-title {
      color: #1f476a;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-project-sub {
      color: #67819a;
      font-size: 11px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-project-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .account-project-actions .btn.danger {
      border-color: rgba(196, 64, 64, 0.7);
      color: #b03131;
      background: rgba(255, 246, 246, 0.94);
    }

    .phone-name-row {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .phone-text-input {
      width: 100%;
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid #b9cde2;
      background: #fff;
      color: #17324d;
      font: 500 14px/1.2 inherit;
      padding: 0 10px;
      outline: none;
    }

    .phone-text-input:focus {
      border-color: #0f85ff;
      box-shadow: 0 0 0 3px rgba(15, 133, 255, 0.14);
    }

    .phone-secondary-btn {
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid #b9cde2;
      background: #fff;
      color: #17324d;
      padding: 0 12px;
      font: 500 14px/1.2 inherit;
      cursor: pointer;
    }

    .welcome-overlay {
      position: absolute;
      inset: 0;
      z-index: 85;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(255, 255, 255, 0.26);
      backdrop-filter: blur(6px);
    }

    .welcome-overlay.open {
      display: flex;
    }

    .welcome-card {
      width: min(920px, 94vw);
      border-radius: 22px;
      border: 1px solid rgba(191, 212, 232, 0.92);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.92));
      box-shadow: 0 20px 46px rgba(8, 36, 67, 0.24);
      padding: 24px;
    }

    .welcome-kicker {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #4f6f8d;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .welcome-title {
      margin: 0;
      font-size: 30px;
      line-height: 1.15;
      font-weight: 600;
      color: #17324d;
    }

    .welcome-copy {
      margin: 8px 0 0;
      color: #4e6984;
      font-size: 15px;
      line-height: 1.4;
      font-weight: 400;
    }

    .welcome-board-grid {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .welcome-board-btn {
      border: 1px solid #c9dced;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.92);
      min-height: 180px;
      padding: 16px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 8px;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .welcome-board-btn:hover {
      transform: translateY(-2px);
      border-color: #0f85ff;
      box-shadow: 0 12px 24px rgba(9, 42, 78, 0.14);
    }

    .welcome-board-ico {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(178, 202, 225, 0.9);
      background: rgba(246, 251, 255, 0.96);
      color: #205176;
    }

    .welcome-board-ico svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .welcome-board-name {
      font-size: 18px;
      line-height: 1.2;
      font-weight: 600;
      color: #17324d;
    }

    .welcome-board-sub {
      font-size: 13px;
      line-height: 1.3;
      font-weight: 400;
      color: #587491;
      text-align: center;
    }

    @media (max-width: 900px) {
      .welcome-board-grid {
        grid-template-columns: 1fr;
      }

      .welcome-board-btn {
        min-height: 132px;
      }
    }

    #interactionPanel .overlay-row label {
      display: block;
      margin-bottom: 6px;
      color: #4f6b86;
      font-size: 12px;
      letter-spacing: 0.02em;
      font-weight: 500;
    }

    .thumb-add-item-ico img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      display: block;
    }

    .interactive-kind-icon img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      display: block;
      margin: 0 auto;
    }

    .welcome-board-ico img {
      width: 24px;
      height: 24px;
      object-fit: contain;
      display: block;
    }

    .toolbar-icon-btn .tool-label {
      font-family: "Zalando Sans SemiExpanded", "Rubik", "Segoe UI", sans-serif;
      font-weight: 500;
    }

    .bg-tools {
      height: auto;
      width: 100%;
      display: grid;
      gap: 10px;
      padding: 8px;
      background: rgba(255, 255, 255, 0.58);
      border-radius: 10px;
      border: 1px solid rgba(178, 202, 225, 0.65);
    }

    .hue-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 8px;
    }

    .hue-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #4f6d88;
      font-weight: 600;
    }

    .hue-slider {
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 999px;
      border: 1px solid #c5d8ea;
      background: linear-gradient(90deg,
        hsl(0 72% 94%), hsl(60 72% 94%), hsl(120 72% 94%),
        hsl(180 72% 94%), hsl(240 72% 94%), hsl(300 72% 94%), hsl(360 72% 94%));
      outline: none;
    }

    .hue-slider::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid #7fa5c7;
      background: #fff;
      box-shadow: 0 1px 4px rgba(10, 40, 70, 0.22);
      cursor: pointer;
    }

    .hue-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid #7fa5c7;
      background: #fff;
      box-shadow: 0 1px 4px rgba(10, 40, 70, 0.22);
      cursor: pointer;
    }

    .hue-row .swatch {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      border: 1px solid rgba(36, 60, 88, 0.24);
      background: hsl(212 72% 94%);
      display: inline-block;
    }

    .interactive-block {
      background: transparent;
      box-shadow: none;
      border-color: rgba(15, 133, 255, 0.24);
      padding: 12px;
    }

    .interactive-block-inner {
      width: min(96%, 1160px);
      margin: 0 auto;
    }

    .interactive-block h3 {
      margin: 2px 0 10px;
      font-size: clamp(40px, 5vw, 64px);
      line-height: 1.02;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .interactive-subtitle {
      margin: 0 auto 14px;
      max-width: 980px;
      font-size: clamp(18px, 2vw, 28px);
      line-height: 1.2;
    }

    .poll-preview-list {
      width: min(94%, 1120px);
      gap: 12px;
    }

    .poll-preview-opt {
      min-height: 62px;
      font-size: 20px;
    }

    .wordcloud-preview {
      width: min(96%, 1160px);
      margin: 10px auto 0;
    }

    .wordcloud-canvas {
      height: clamp(420px, 56vh, 560px);
      background: rgba(255, 255, 255, 0.16);
    }

    .thumb-kind {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 400;
      opacity: 0.72;
    }

    .thumb-kind img {
      width: 13px;
      height: 13px;
      object-fit: contain;
      display: block;
      opacity: 0.86;
    }


    .poll-accent-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }

    #icPollAccent {
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 999px;
      border: 1px solid #c5d8ea;
      background: linear-gradient(90deg,
        hsl(0 86% 52%), hsl(60 86% 52%), hsl(120 86% 52%),
        hsl(180 86% 52%), hsl(240 86% 52%), hsl(300 86% 52%), hsl(360 86% 52%));
      outline: none;
    }

    #icPollAccentSwatch {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      border: 1px solid rgba(36, 60, 88, 0.24);
      background: hsl(212 86% 52%);
      display: inline-block;
    }

    .phone-wordcloud-list {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-height: 220px;
      overflow: auto;
    }

    .phone-word-chip {
      border: 1px solid rgba(120, 156, 186, 0.48);
      border-radius: 999px;
      background: rgba(255,255,255,0.88);
      color: #1f4a70;
      padding: 8px 10px;
      font: 500 13px/1 inherit;
      cursor: pointer;
      display: inline-flex;
      gap: 6px;
      align-items: center;
    }

    .phone-word-chip span {
      font-size: 12px;
      color: #0f85ff;
      font-weight: 700;
    }

    .phone-wordcloud-empty {
      color: #64819a;
      font-size: 13px;
      padding: 8px 2px;
    }

    /* Theme menu */
    .theme-font-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .theme-font-chip {
      border: 1px solid rgba(153, 181, 206, 0.62);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.78);
      min-height: 58px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 2px;
      cursor: pointer;
      color: #294f72;
      padding: 6px 4px;
      transition: 140ms ease;
    }

    .theme-font-chip:hover {
      border-color: rgba(15, 133, 255, 0.6);
      transform: translateY(-1px);
    }

    .theme-font-chip.active {
      border-color: #0f85ff;
      box-shadow: 0 0 0 2px rgba(15, 133, 255, 0.18);
      background: rgba(255, 255, 255, 0.96);
    }

    .theme-font-aa {
      font-size: 24px;
      line-height: 1;
      color: #183a5c;
    }

    .theme-font-name {
      font-size: 11px;
      line-height: 1;
      font-weight: 500;
      color: #4f6d88;
    }

    /* Thumb overlay content */
    .thumb-card {
      position: relative;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
    }

    .thumb-card-overlay {
      margin-top: auto;
      width: 100%;
      padding: 8px 8px 7px;
      background: linear-gradient(180deg, rgba(9, 30, 50, 0.12), rgba(9, 30, 50, 0.58));
      color: #fff;
      text-shadow: 0 2px 6px rgba(8, 32, 54, 0.45);
      display: grid;
      gap: 4px;
    }

    .thumb-card-kind {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 500;
      opacity: 0.94;
    }

    .thumb-card-kind img {
      width: 12px;
      height: 12px;
      object-fit: contain;
      display: block;
      filter: brightness(0) invert(1);
      opacity: 0.92;
    }

    .thumb-card-question {
      text-align: center;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 500;
      max-height: 2.4em;
      overflow: hidden;
    }

    /* Interactive boards */
    .interactive-block-inner {
      width: min(96%, 1140px);
      margin: 0 auto;
      color: var(--board-ink, #17324d);
      font-family: var(--board-font, "Zalando Sans SemiExpanded", "Rubik", "Segoe UI", sans-serif);
    }

    .interactive-kind-pill {
      margin: 0 auto 8px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(126, 156, 182, 0.46);
      background: rgba(255, 255, 255, 0.28);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--board-ink, #17324d);
    }

    .interactive-kind-pill img {
      width: 13px;
      height: 13px;
      object-fit: contain;
      display: block;
      opacity: 0.9;
    }

    .interactive-question {
      margin: 2px auto 14px;
      max-width: 1020px;
      font-size: clamp(40px, 5.2vw, 72px);
      line-height: 1.02;
      letter-spacing: -0.012em;
      font-weight: 600;
      color: var(--board-ink, #17324d);
      text-wrap: balance;
    }

    .interactive-question[title] {
      cursor: text;
    }

    .poll-preview-top span,
    .poll-preview-count,
    .wordcloud-placeholder,
    .wc-word {
      color: var(--board-ink, #17324d);
    }

    .poll-preview-opt span:first-child[title] {
      cursor: text;
    }

    .poll-add-option-btn {
      margin: 6px auto 0;
      width: fit-content;
      border: 1px dashed rgba(81, 115, 144, 0.5);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      color: #305a7f;
      padding: 8px 13px;
      font: 500 13px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      cursor: pointer;
    }

    .poll-add-option-btn:hover {
      border-color: #0f85ff;
      background: rgba(255, 255, 255, 0.86);
    }

    .wordcloud-canvas {
      background: rgba(255, 255, 255, 0.12);
    }

    /* Interaction settings */
    .setting-toggle {
      width: 100%;
      min-height: 40px;
      border: 1px solid rgba(138, 169, 194, 0.64);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.74);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 4px 6px 4px 4px;
      cursor: pointer;
      color: #264a6b;
      transition: 150ms ease;
      text-align: left;
    }

    .setting-toggle-knob {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(116, 147, 174, 0.72);
      background: #fff;
      box-shadow: 0 2px 8px rgba(8, 36, 67, 0.16);
      flex: 0 0 26px;
      transition: 150ms ease;
    }

    .setting-toggle-copy {
      font-size: 13px;
      line-height: 1.2;
      font-weight: 500;
      color: #355e82;
    }

    .setting-toggle.on {
      border-color: rgba(15, 133, 255, 0.72);
      background: rgba(15, 133, 255, 0.12);
    }

    .setting-toggle.on .setting-toggle-knob {
      transform: translateX(8px);
      border-color: #0f85ff;
    }

    .setting-toggle.on .setting-toggle-copy {
      color: #0f5ea8;
    }

    /* Mobile audience UI */
    .participant-app {
      touch-action: manipulation;
      padding: 0;
      min-height: 100dvh;
      background:
        radial-gradient(circle at 16% 10%, rgba(20, 182, 166, 0.22), transparent 45%),
        radial-gradient(circle at 84% 78%, rgba(15, 133, 255, 0.2), transparent 46%),
        linear-gradient(170deg, #f4f9ff 0%, #e8f1fb 100%);
    }

    .participant-shell {
      min-height: 100dvh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      padding: 14px;
    }

    .phone-header-wrap,
    .phone-main,
    .phone-footer {
      border: 1px solid rgba(176, 203, 226, 0.7);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,251,255,0.88));
      box-shadow: 0 10px 22px rgba(8, 36, 67, 0.12);
      backdrop-filter: blur(14px);
    }

    .phone-header-wrap {
      padding: 14px;
      display: grid;
      gap: 6px;
    }

    .phone-session-title {
      font-size: 22px;
      line-height: 1.05;
      font-weight: 600;
      color: #17324d;
    }

    .phone-session-sub {
      font-size: 13px;
      color: #5c7590;
      font-weight: 500;
    }

    .phone-main {
      padding: 14px;
      overflow: auto;
      display: grid;
      align-content: start;
      gap: 12px;
    }

    .phone-footer {
      padding: 12px 14px;
      font-size: 13px;
      color: #496986;
      font-weight: 500;
    }

    .phone-hero {
      display: grid;
      gap: 8px;
      margin-bottom: 2px;
    }

    .phone-prompt {
      margin: 0;
      font-size: clamp(28px, 6.2vw, 40px);
      line-height: 1.05;
      letter-spacing: -0.01em;
      color: #17324d;
      font-weight: 600;
      text-wrap: balance;
    }

    .phone-helper {
      margin: 0;
      font-size: 14px;
      line-height: 1.35;
      color: #5d7690;
      font-weight: 500;
    }

    .phone-options {
      gap: 10px;
    }

    .phone-option-btn {
      border: 1px solid rgba(132, 167, 196, 0.58);
      border-radius: 14px;
      background: rgba(255,255,255,0.92);
      min-height: 60px;
      width: 100%;
      text-align: left;
      padding: 12px 14px;
      font: 500 17px/1.2 inherit;
      color: #163855;
      cursor: pointer;
      transition: 140ms ease;
      touch-action: manipulation;
    }

    .phone-option-btn.selected {
      border-color: #0f85ff;
      box-shadow: 0 0 0 3px rgba(15, 133, 255, 0.17);
      background: rgba(239, 248, 255, 0.95);
      color: #0f4f8d;
    }

    .phone-submit-btn {
      border: 1px solid #0f85ff;
      border-radius: 14px;
      background: linear-gradient(160deg, #0f85ff, #1181ec);
      min-height: 54px;
      width: 100%;
      color: #fff;
      padding: 0 14px;
      font: 600 17px/1 inherit;
      cursor: pointer;
      touch-action: manipulation;
    }

    .phone-submit-btn:disabled {
      opacity: 0.48;
      cursor: not-allowed;
    }

    .phone-text-input {
      min-height: 54px;
      font-size: 18px;
      border-radius: 14px;
      padding: 0 14px;
      touch-action: manipulation;
    }

    .phone-secondary-btn {
      min-height: 40px;
      border-radius: 11px;
      touch-action: manipulation;
    }

    .phone-wordcloud-list {
      margin-top: 0;
      gap: 8px;
      max-height: 40dvh;
      align-content: flex-start;
    }

    .phone-word-chip {
      min-height: 38px;
      font-size: 14px;
      touch-action: manipulation;
    }

    .phone-waiting {
      min-height: 38dvh;
      display: grid;
      place-items: center;
      color: #4f6e8a;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
    }

    /* Toolbar alignment and menu */
    .toolbar {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      z-index: 120;
    }

    .toolbar-left {
      justify-self: start;
      min-width: 0;
    }

    .toolbar-tools {
      justify-self: center;
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }

    .toolbar-right {
      justify-self: end;
    }

    .menu-btn {
      width: 64px;
    }

    .top-menu-popover {
      min-width: 200px;
      padding: 10px;
    }

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

    .menu-grid-btn {
      border: 1px solid rgba(167, 192, 214, 0.6);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.84);
      min-height: 76px;
      display: grid;
      place-items: center;
      gap: 6px;
      color: var(--ink);
      cursor: pointer;
      font: 500 12px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
    }

    .menu-grid-btn:hover {
      border-color: rgba(15, 133, 255, 0.62);
      background: rgba(255, 255, 255, 0.96);
    }

    .menu-grid-btn img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      display: block;
    }

    .toolbar-icon-btn:disabled,
    .toolbar-icon-btn.disabled {
      opacity: 0.35;
      filter: grayscale(1);
      pointer-events: none;
    }

    /* Theme patterns */
    .pattern-chip[data-pattern="gradient"] {
      background-image: linear-gradient(to top, rgba(20, 57, 90, 0.22), rgba(255, 255, 255, 0.08));
    }

    .stage.pattern-gradient {
      background-image: linear-gradient(to top, rgba(15, 45, 78, 0.22), rgba(255, 255, 255, 0.04) 58%);
    }

    /* Welcome overlay should sit above toolbar */
    .welcome-overlay {
      z-index: 1300;
      backdrop-filter: blur(14px);
    }

    /* Interactive canvas layout */
    .interactive-block-inner {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .interactive-question {
      width: 100%;
      margin: 6px auto 14px;
      text-align: center;
      font-size: 64px;
      line-height: 1.02;
      letter-spacing: -0.012em;
      font-weight: 600;
    }

    .interactive-kind-pill {
      font-family: "Zalando Sans SemiExpanded", "Rubik", "Segoe UI", sans-serif;
      font-weight: 500;
    }

    .poll-preview-opt {
      position: relative;
    }

    .poll-voters-tip {
      position: absolute;
      right: 10px;
      top: -8px;
      transform: translateY(-100%);
      border: 1px solid rgba(139, 169, 194, 0.76);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 8px 16px rgba(8, 36, 67, 0.14);
      padding: 6px 8px;
      display: grid;
      gap: 4px;
      z-index: 10;
      min-width: 132px;
      text-align: left;
    }

    .poll-voters-tip span {
      font-size: 12px;
      line-height: 1.2;
      color: #204d72;
      font-family: "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      font-weight: 500;
      white-space: nowrap;
    }

    .wordcloud-canvas.hovering .wc-word {
      opacity: 0.5;
    }

    .wordcloud-canvas .wc-word.active {
      opacity: 1;
    }

    .wc-author-pill {
      position: absolute;
      transform: translate(-50%, -100%);
      border: 1px solid rgba(139, 169, 194, 0.76);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 8px 16px rgba(8, 36, 67, 0.14);
      padding: 5px 10px;
      font-size: 12px;
      color: #204d72;
      font-family: "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      font-weight: 500;
      pointer-events: none;
      z-index: 10;
      white-space: nowrap;
    }

    /* Participant identity */
    .phone-avatar-grid {
      display: none;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .phone-avatar-grid.open {
      display: grid;
    }

    .phone-avatar-item {
      border: 1px solid rgba(129, 162, 189, 0.52);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.9);
      min-height: 34px;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      padding: 0;
    }

    .phone-avatar-item.active {
      border-color: #0f85ff;
      box-shadow: 0 0 0 2px rgba(15, 133, 255, 0.16);
    }

    .participant-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .participant-avatar {
      font-size: 15px;
      line-height: 1;
    }

    /* Movable / resizable present badge */
    .present-join-badge {
      min-width: 140px;
      width: 176px;
      padding-top: 18px;
      overflow: visible;
      --present-badge-scale: 1;
      transform-origin: top left;
      transform: scale(var(--present-badge-scale));
      cursor: grab;
      touch-action: none;
    }

    .present-join-badge:active {
      cursor: grabbing;
    }

    .present-badge-handle {
      position: absolute;
      left: 50%;
      top: 3px;
      transform: translateX(-50%);
      font-size: 10px;
      letter-spacing: -0.12em;
      color: #4b7091;
      user-select: none;
      cursor: move;
      opacity: 0.78;
    }

    .present-badge-resize {
      position: absolute;
      width: 14px;
      height: 14px;
      right: -4px;
      bottom: -4px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.9);
      background: linear-gradient(145deg, #0f85ff, #14b6a6);
      box-shadow: 0 3px 8px rgba(8, 36, 67, 0.28);
      cursor: nwse-resize;
      touch-action: none;
    }

    .poll-preview-list {
      overflow: visible;
    }

    .poll-option-row.controls-right .poll-option-delete,
    .poll-option-row.controls-right .poll-option-handle {
      left: auto;
      right: -28px;
    }

    .phone-main.poll-mode {
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      align-content: stretch;
    }

    .phone-options-scroll {
      min-height: 0;
      overflow: auto;
      padding-right: 4px;
    }

    /* Final UI overrides */
    .text-content {
      overflow: visible;
    }

    .top-menu-popover {
      min-width: 210px;
      z-index: 2600;
      padding: 8px;
    }

    .menu-list {
      display: grid;
      gap: 6px;
    }

    .menu-list-sep {
      height: 1px;
      background: rgba(152, 182, 208, 0.45);
      margin: 2px 2px;
      border-radius: 999px;
    }

    .menu-list-btn {
      width: 100%;
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(152, 182, 208, 0.56);
      background: rgba(255, 255, 255, 0.88);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      padding: 0 11px;
      font: 500 13px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      cursor: pointer;
      transition: background 140ms ease, border-color 140ms ease;
    }

    .menu-list-link {
      text-decoration: none;
    }

    .menu-list-btn:hover {
      border-color: rgba(15, 133, 255, 0.58);
      background: rgba(255, 255, 255, 0.97);
    }

    .menu-list-btn img,
    .menu-list-btn .ico {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .menu-list-btn .ico svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .menu-list-btn.danger {
      border-color: rgba(196, 64, 64, 0.75);
      color: #b03131;
      background: rgba(255, 246, 246, 0.94);
    }

    .menu-list-btn.danger:hover {
      border-color: #d64343;
      background: rgba(255, 236, 236, 0.98);
    }

    .theme-panel {
      width: 340px;
      max-height: min(74vh, 680px);
      z-index: 2400;
      overflow: hidden;
    }

    .theme-panel .panel-body {
      max-height: calc(74vh - 44px);
      overflow: auto;
      padding-top: 8px;
    }

    @media (max-width: 860px) {
      #accountPanel {
        left: 10px !important;
        right: 10px !important;
        width: auto;
        max-height: min(82vh, 760px);
      }

      .account-profile-actions,
      .account-plan-actions,
      .account-project-actions {
        grid-template-columns: 1fr;
      }
    }

    .window-size-overlay {
      position: absolute;
      inset: 0;
      z-index: 2550;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(7, 22, 38, 0.34);
      backdrop-filter: blur(6px);
    }

    .window-size-overlay.show {
      display: flex;
    }

    .window-size-card {
      width: min(92vw, 440px);
      border: 1px solid var(--glass-border);
      border-radius: 18px;
      background: linear-gradient(180deg, var(--glass-top), var(--glass-btm));
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(14px);
      padding: 18px 20px;
      text-align: center;
      color: var(--ink);
    }

    .window-size-card h3 {
      margin: 0 0 8px;
      font: 600 22px/1.1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
    }

    .window-size-card p {
      margin: 0;
      font: 500 14px/1.35 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      color: var(--subtle);
    }

    .phone-room-code {
      justify-self: end;
      margin-left: auto;
      margin-top: -2px;
      border: 1px solid rgba(117, 152, 182, 0.58);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      color: #20496f;
      font: 600 12px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 10px;
    }

    .phone-conn-row {
      margin-top: 9px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .phone-secondary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(126, 160, 187, 0.58);
      background: rgba(255, 255, 255, 0.9);
      color: #204e74;
      font: 500 13px/1 "Zalando Sans SemiExpanded", "Rubik", sans-serif;
      cursor: pointer;
      padding: 0 10px;
    }

    .phone-secondary-btn.danger {
      border-color: rgba(196, 64, 64, 0.7);
      color: #b03131;
      background: rgba(255, 246, 246, 0.95);
    }

    .phone-secondary-btn:hover {
      border-color: rgba(15, 133, 255, 0.62);
    }

    .phone-secondary-btn.danger:hover {
      border-color: #d64343;
    }

    .setting-toggle[disabled] {
      opacity: 0.48;
      cursor: not-allowed;
      pointer-events: none;
    }

    .poll-preview-list.layout-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .poll-preview-list.layout-grid2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

    .poll-option-row {
      position: relative;
      min-width: 0;
    }

    .poll-option-delete,
    .poll-option-handle {
      position: absolute;
      left: -28px;
      width: 22px;
      height: 22px;
      border-radius: 8px;
      border: 1px solid rgba(132, 163, 189, 0.58);
      background: rgba(255, 255, 255, 0.9);
      color: #44657f;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      padding: 0;
    }

    .poll-option-delete {
      top: 8px;
    }

    .poll-option-handle {
      top: 34px;
      font-size: 12px;
      letter-spacing: -0.1em;
      user-select: none;
      cursor: grab;
    }

    .poll-option-handle:active {
      cursor: grabbing;
    }

    .poll-option-delete svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .poll-option-delete:hover {
      border-color: rgba(196, 64, 64, 0.78);
      color: #bb3939;
      background: rgba(255, 245, 245, 0.96);
    }

    .poll-option-handle:hover {
      border-color: rgba(15, 133, 255, 0.62);
      color: #0f6fc6;
    }

    .poll-option-row.drag-target .poll-preview-opt {
      box-shadow: 0 0 0 2px rgba(20, 182, 166, 0.28), 0 8px 16px rgba(8, 36, 67, 0.1);
      border-color: rgba(20, 182, 166, 0.65);
    }

    .poll-option-row.dragging {
      opacity: 0.62;
    }

    .poll-preview-list.layout-grid2 .poll-add-option-btn {
      grid-column: 1 / -1;
    }

    /* Flat UI reskin overrides */
    :root {
      --bg: #f2f5fb;
      --panel: #ffffff;
      --ink: #1d324a;
      --subtle: #5d7185;
      --accent: #3f6cf6;
      --accent-2: #1fa77a;
      --border: #d7e2ef;
      --shadow: 0 4px 14px rgba(16, 42, 71, 0.08);
      --glass-border: #d7e2ef;
      --glass-top: #ffffff;
      --glass-btm: #ffffff;
      --glass-shadow: 0 4px 14px rgba(16, 42, 71, 0.08);
    }

    body {
      background:
        radial-gradient(circle at 20% 8%, rgba(63, 108, 246, 0.08), transparent 34%),
        radial-gradient(circle at 86% 82%, rgba(31, 167, 122, 0.08), transparent 34%),
        #f2f5fb;
      color: var(--ink);
    }

    .home-card,
    .home-scan-card,
    .toolbar,
    .thumbs,
    .overlay-panel,
    .top-menu-popover,
    .canvas-menu,
    .phone-header-wrap,
    .phone-main,
    .phone-footer,
    .window-size-card {
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: none;
    }

    .toolbar,
    .thumbs {
      border-radius: 14px;
      border-color: #d2deeb;
    }

    .home-card,
    .home-scan-card,
    .overlay-panel,
    .canvas-menu,
    .window-size-card {
      border-radius: 12px;
    }

    .btn,
    .field,
    .toolbar-icon-btn,
    .menu-list-btn,
    .home-btn,
    .phone-option-btn,
    .phone-submit-btn,
    .phone-secondary-btn,
    .thumb-add,
    .zoom-reset-btn {
      backdrop-filter: none;
      box-shadow: none;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--ink);
      font-weight: 600;
    }

    .btn.primary,
    .home-btn:not(.home-btn-secondary):not(.home-btn-scan),
    .phone-submit-btn {
      background: linear-gradient(180deg, #4b75f7, #3f6cf6);
      border-color: var(--accent);
      color: #fff;
    }

    .btn:hover,
    .toolbar-icon-btn:hover,
    .menu-list-btn:hover,
    .home-btn:hover,
    .thumb-add:hover,
    .phone-option-btn:hover {
      transform: none;
      box-shadow: none;
      border-color: #b8cade;
    }

    .stage {
      border: 1px solid #c9d6e6;
      box-shadow: 0 8px 22px rgba(16, 42, 71, 0.14);
    }

    .text-content {
      backdrop-filter: none;
      background: transparent;
    }

    .project-title-input,
    .home-input,
    .phone-text-input,
    .session-url-row input,
    #joinLinkInput {
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: none;
    }

    .thumb-card {
      box-shadow: none;
      border: 1px solid #c9d5e4;
      border-radius: 8px;
    }

    .thumb.active .thumb-card {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(63, 108, 246, 0.14);
    }

    .thumb-meta {
      color: #58708a;
    }

    .toolbar-icon-btn {
      border-radius: 10px;
      background: #fff;
      border-color: #d5e1ee;
    }

    .toolbar-icon-btn .tool-label {
      color: #52687e;
      font-weight: 600;
    }

    .toolbar-icon-btn img {
      opacity: 0.9;
    }

    .toolbar-icon-btn:hover {
      background: #f8fbff;
      border-color: #bfcee0;
    }

    .top-menu-popover {
      border-color: #cfdbea;
    }

    .menu-list-btn {
      border-color: #d2dfee;
      background: #fff;
    }

    .menu-list-btn:hover {
      background: #f6f9fe;
      border-color: #b9cce1;
    }

    .interactive-block {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(251, 253, 255, 0.92));
      border-radius: 0;
    }

    .interactive-question {
      color: #1f3349;
      letter-spacing: -0.012em;
    }

    .poll-preview-opt {
      border-color: #cddbeb;
      background: #fff;
    }

    .poll-preview-fill {
      background: linear-gradient(90deg, #6e8df8, #4d75f7);
    }

    .wordcloud-canvas {
      border: 1px dashed #cad8e7;
      border-radius: 12px;
      background: #fbfdff;
    }

    .hint {
      background: #1f3349;
      border-radius: 8px;
    }

    .ad-slot {
      border: 1px solid #cfd9e7;
      background: #fff;
      color: #6c7f93;
    }

    /* Premium contrast pass */
    :root {
      --bg: #f6f8fc;
      --panel: #ffffff;
      --ink: #12263a;
      --subtle: #495f74;
      --accent: #355fe5;
      --accent-2: #238f6e;
      --border: #c6d3e3;
      --shadow-sm: 0 1px 2px rgba(15, 30, 48, 0.12);
      --shadow-lg: 0 8px 24px rgba(15, 30, 48, 0.16);
      --radius-sm: 11px;
      --radius-md: 16px;
      --radius-lg: 20px;
    }

    body {
      background:
        radial-gradient(circle at 14% 0%, rgba(53, 95, 229, 0.08), transparent 32%),
        #f6f8fc;
    }

    .toolbar {
      background: #fff;
      border-color: #c8d5e5;
      box-shadow: var(--shadow-sm);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      gap: 10px;
    }

    .thumbs {
      background: #fff;
      border-color: #c8d5e5;
      box-shadow: var(--shadow-sm);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      gap: 8px;
    }

    .home-card,
    .home-scan-card,
    .overlay-panel,
    .top-menu-popover,
    .canvas-menu,
    .phone-header-wrap,
    .phone-main,
    .phone-footer,
    .window-size-card {
      border-color: #c8d5e5;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    .stage {
      border-color: #b9c8da;
      box-shadow: var(--shadow-lg);
      border-radius: var(--radius-lg);
    }

    .btn,
    .field,
    .toolbar-icon-btn,
    .menu-list-btn,
    .home-btn,
    .phone-option-btn,
    .phone-submit-btn,
    .phone-secondary-btn,
    .thumb-add,
    .zoom-reset-btn,
    .project-title-input,
    .home-input,
    .phone-text-input,
    .session-url-row input,
    #joinLinkInput {
      border-color: #bccbdb;
      border-radius: var(--radius-sm);
      color: var(--ink);
      font-weight: 600;
      line-height: 1.25;
    }

    .home-input,
    .project-title-input,
    .phone-text-input {
      font-weight: 500;
    }

    .btn.primary,
    .home-btn:not(.home-btn-secondary):not(.home-btn-scan),
    .phone-submit-btn {
      background: #355fe5;
      border-color: #2f58db;
      color: #fff;
      box-shadow: 0 1px 2px rgba(53, 95, 229, 0.26);
    }

    .btn:hover,
    .toolbar-icon-btn:hover,
    .menu-list-btn:hover,
    .home-btn:hover,
    .thumb-add:hover,
    .phone-option-btn:hover,
    .phone-secondary-btn:hover,
    .zoom-reset-btn:hover {
      transform: translateY(-1px);
      border-color: #9db2c8;
      box-shadow: 0 6px 14px rgba(20, 42, 68, 0.12);
    }

    .btn.primary:hover,
    .home-btn:not(.home-btn-secondary):not(.home-btn-scan):hover,
    .phone-submit-btn:hover {
      box-shadow: 0 8px 18px rgba(53, 95, 229, 0.28);
    }

    .toolbar-icon-btn {
      min-width: 54px;
      background: #fff;
    }

    .toolbar-icon-btn .tool-label {
      color: #3f556b;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    .toolbar-icon-btn img,
    .toolbar-icon-btn .ico svg {
      filter: saturate(0.85);
    }

    .brand-beta {
      border-color: #b4c6da;
      background: #f1f6fc;
      color: #365777;
    }

    .project-title-input {
      color: #1a2f45;
    }

    .thumb-card {
      border-color: #c4d2e3;
      border-radius: var(--radius-sm);
      box-shadow: none;
    }

    .thumb.active .thumb-card {
      border-color: #355fe5;
      box-shadow: 0 0 0 2px rgba(53, 95, 229, 0.16);
    }

    .thumb-meta {
      color: #49627b;
      font-weight: 600;
    }

    .menu-list-btn {
      min-height: 38px;
      font-size: 12px;
      border-color: #c4d2e2;
    }

    .menu-list-btn .ico,
    .menu-list-btn img {
      opacity: 0.9;
    }

    .interactive-block {
      border: 1px solid #c1d0e1;
      border-radius: 0;
      background: #fbfdff;
    }

    .interactive-kind-pill {
      border-color: #c2d0e1;
      background: #f4f8fd;
      color: #425a73;
      border-radius: 999px;
    }

    .interactive-question {
      color: #1a3047;
      letter-spacing: -0.01em;
      line-height: 1.12;
    }

    .poll-preview-opt {
      border-color: #c5d3e4;
      border-radius: var(--radius-sm);
      box-shadow: none;
    }

    .poll-preview-fill {
      background: linear-gradient(90deg, #5a79ea, #355fe5);
    }

    .wordcloud-canvas {
      border: 1px solid #c8d5e4;
      border-radius: 12px;
      background:
        linear-gradient(#edf3fb 1px, transparent 1px),
        linear-gradient(90deg, #edf3fb 1px, transparent 1px),
        #fbfdff;
      background-size: 24px 24px, 24px 24px, auto;
    }

    .empty-state,
    .poll-preview-empty,
    .wordcloud-placeholder {
      border: 1px solid #ccd8e8;
      border-style: solid;
      border-radius: 12px;
      background:
        linear-gradient(#eef3fa 1px, transparent 1px),
        linear-gradient(90deg, #eef3fa 1px, transparent 1px),
        #fbfdff;
      background-size: 20px 20px, 20px 20px, auto;
      color: #5c7288;
    }

    .hint {
      background: #132b40;
      border-radius: 10px;
    }

    .home-logo,
    .brand-name {
      letter-spacing: 0;
    }

    .ad-slot {
      border-color: #c8d4e4;
      border-radius: 10px;
    }

    /* Unified enterprise UI pass */
    :root {
      --accent: #6f63f6;
      --accent-2: #4f46e5;
      --ink: #111827;
      --subtle: #5b6474;
      --border: #d9dee8;
      --panel: #ffffff;
      --glass-border: #d9dee8;
      --glass-top: #ffffff;
      --glass-btm: #ffffff;
      --glass-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
    }

    body {
      background: #f5f7fb;
      color: var(--ink);
    }

    .home-card,
    .home-scan-card,
    .toolbar,
    .thumbs,
    .overlay-panel,
    .top-menu-popover,
    .canvas-menu,
    .phone-header-wrap,
    .phone-main,
    .phone-footer,
    .window-size-card {
      border: 1px solid var(--border);
      background: var(--panel);
      backdrop-filter: none;
      box-shadow: var(--glass-shadow);
      border-radius: 12px;
    }

    .toolbar,
    .thumbs {
      border-radius: 10px;
      box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
    }

    .brand-name,
    .home-logo {
      color: #151a24;
    }

    .brand-beta {
      border-color: #d6dbe6;
      background: #f3f5fb;
      color: #5f6b80;
    }

    .workspace {
      background: #f7f8fc;
    }

    .stage {
      border: 1px solid #cfd6e3;
      border-radius: 12px;
      box-shadow: 0 16px 30px rgba(17, 24, 39, 0.14);
    }

    .toolbar-icon-btn {
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: #3f4758;
    }

    .toolbar-icon-btn .tool-label {
      color: #586174;
      font-weight: 500;
    }

    .toolbar-icon-btn:hover,
    .toolbar-icon-btn.active {
      background: #f4f6fb;
      border-color: #d9deea;
      transform: translateY(-1px);
      box-shadow: 0 6px 12px rgba(17, 24, 39, 0.08);
    }

    .toolbar-icon-btn.active {
      color: var(--accent);
      border-color: rgba(111, 99, 246, 0.36);
      background: rgba(111, 99, 246, 0.08);
    }

    .btn,
    .field,
    .home-btn,
    .phone-btn,
    .phone-option-btn,
    .phone-submit-btn,
    .phone-secondary-btn,
    .project-title-input,
    .home-input,
    .phone-text-input,
    .menu-list-btn,
    .thumb-add,
    .zoom-reset-btn {
      border: 1px solid var(--border);
      background: #fff;
      color: #1f2937;
      border-radius: 8px;
      box-shadow: none;
      backdrop-filter: none;
      font-weight: 500;
    }

    .btn.primary,
    .home-btn:not(.home-btn-secondary):not(.home-btn-scan),
    .phone-submit-btn {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .btn:hover,
    .home-btn:hover,
    .phone-option-btn:hover,
    .menu-list-btn:hover,
    .thumb-add:hover {
      border-color: #c6cedd;
      box-shadow: 0 8px 16px rgba(17, 24, 39, 0.08);
    }

    .btn.primary:hover,
    .home-btn:not(.home-btn-secondary):not(.home-btn-scan):hover,
    .phone-submit-btn:hover {
      box-shadow: 0 10px 18px rgba(79, 70, 229, 0.28);
      background: var(--accent-2);
      border-color: var(--accent-2);
    }

    .thumb-card {
      border-radius: 8px;
      border: 1px solid #cfd6e3;
      box-shadow: none;
    }

    .thumb.active .thumb-card {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(111, 99, 246, 0.18);
    }

    .thumb-card-overlay {
      background: linear-gradient(180deg, rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0.58));
    }

    .hint {
      background: #111827;
      border-radius: 8px;
    }

    .interactive-kind-pill {
      border-color: #d2d8e4;
      background: #f5f7fb;
      color: #4d5669;
    }

    .interactive-question {
      color: #111827;
    }

    .poll-preview-opt,
    .runner-prompt,
    .config-card {
      border-color: #d5dbe7;
      background: #fff;
      box-shadow: none;
    }

    .poll-preview-fill {
      background: linear-gradient(90deg, #8b82ff, #6f63f6);
      box-shadow: none;
    }

    .wordcloud-canvas {
      border: 1px solid #d6dce8;
      background: #fbfcfe;
    }

    .overlay-title,
    .session-label,
    .config-title,
    .hue-label {
      color: #6b7485;
      font-weight: 600;
    }

    .panel-head {
      border-bottom-color: #e3e7ef;
    }