/* ── HERO ── */
    .hero{width:80%;margin:0 auto;padding:24px 28px 0;}

    .hero-panel{
      border-radius:24px;
      border: 1px solid var(--line);
      background: var(--hero);
      padding: 32px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 24px;
      transition: background-color var(--tr), border-color var(--tr), box-shadow var(--tr);
    }
    .hero-top-row {
      display:flex;flex-direction:row;justify-content:space-between;gap:24px;
    }
    .hero-text-col {
      display:flex;flex-direction:column;flex:1;min-width:0;
    }

    .hero-kicker{
      display:inline-flex;align-items:center;border-radius:99px;
      border:1px solid var(--line);background:var(--kicker-bg);
      padding:6px 12px;font-size:12px;color:var(--primary);font-weight:600;margin-bottom:16px;
      align-self: flex-start;
      box-shadow: var(--shadow-xs);
      transition: var(--tr);
    }
    .hero h2{
      font-size:24px;line-height:1.2;letter-spacing:-.03em;
      white-space:normal;
      overflow:visible;text-overflow:clip;max-width:100%
    }
    .hero-desc{margin-top:12px;font-size:14px;line-height:1.75;color:var(--hero-desc-text);max-width:52ch}

    /* ── FOCUS CARD ── */
    .focus-card {
      border-radius: 20px;
      border: 1px solid var(--focus-card-border);
      background: var(--focus-card-bg);
      padding: 24px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      align-self: start;
      flex-shrink: 0;
      cursor: pointer;
      transition: var(--tr);
      box-shadow: var(--shadow-xs);
      min-width: 260px;
      user-select: none;
    }
    .focus-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--primary-soft);
    }

    .timer-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0.05em;
    }

    .timer-display {
      font-size: 38px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .timer-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--primary-soft);
      display: inline-block;
      transition: var(--tr);
    }
    .timer-dot.pulsing {
      animation: timerPulse 1.8s infinite ease-in-out;
      background: var(--timer-dot-pulsing-bg) !important;
    }
    @keyframes timerPulse {
      0% { transform: scale(0.85); opacity: 0.5; }
      50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px var(--primary-soft); }
      100% { transform: scale(0.85); opacity: 0.5; }
    }

    /* ── STUDIO SELECT ── */
    .studio-select-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      overflow: visible;
      position: relative;
      width: 100%;
      min-width: 0;
    }
    .studio-select-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 16px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      box-shadow: var(--shadow-sm);
      transition: var(--tr);
      flex-shrink: 0;
      z-index: 10;
    }
    .studio-select-btn:hover {
      background: var(--surface-off);
      transform: translateY(-2px) scale(1.05) rotate(-1deg);
      box-shadow: var(--shadow-sm);
    }
    .studio-select-btn .selected-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .studio-select-btn .arrow-icon {
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .studio-slide-container {
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0;
      max-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      scrollbar-width: none;
      flex: 1;
      min-width: 0;

      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 8px;
      padding-right: 64px;
      margin-top: -8px;
      margin-bottom: -8px;
      margin-left: -8px;

      -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - 64px), rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - 64px), rgba(0,0,0,0) 100%);

      transition: max-width 0.1s step-end 0.65s, opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .studio-slide-container::-webkit-scrollbar {
      display: none;
    }

    .studio-slide-container.open {
      opacity: 1;
      max-width: 2500px;
      pointer-events: auto;
      transition: max-width 0.1s ease, opacity 0.4s ease;
    }

    .studio-slide-option {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px 8px 14px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-left: 4px solid var(--slide-color, var(--line));
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      box-shadow: var(--shadow-xs);
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
      position: relative;

      opacity: 0;
      transform: translateX(-48px) scale(0.85);

      transition: opacity 0.4s cubic-bezier(0.25, 1, 0.25, 1),
                  transform 0.4s cubic-bezier(0.25, 1, 0.25, 1),
                  background var(--tr), border-color var(--tr);
      transition-delay: calc((var(--total) - 1 - var(--i)) * 0.06s) !important;
    }

    .studio-slide-option:hover {
      transform: translateY(-2px) rotate(-1deg) scale(1.05) !important;
      box-shadow: var(--shadow-md);
    }

    .studio-slide-container.open .studio-slide-option {
      opacity: 1;
      transform: translateX(0) scale(1);
      transition: opacity 0.48s cubic-bezier(0.34, 1.35, 0.64, 1),
                  transform 0.48s cubic-bezier(0.34, 1.35, 0.64, 1),
                  background var(--tr), border-color var(--tr);
      transition-delay: calc(var(--i) * 0.07s) !important;
    }

    .studio-slide-option.active {
      background: var(--primary);
      color: var(--btn-primary-text);
      border-color: var(--primary);
    }

    .studio-slide-option.add-option {
      border-style: dashed;
      border-color: var(--primary-soft);
      color: var(--primary-soft);
      background: transparent;
    }
    .studio-slide-option.add-option:hover {
      transform: translateY(-2px) scale(1.05) rotate(-1deg) !important;
      box-shadow: var(--shadow-sm);
    }
    .add-plus-icon {
      font-size: 14px;
      font-weight: 700;
      margin-right: 2px;
      line-height: 1;
    }
    .studio-slide-option .option-count {
      font-size: 10px;
      background: var(--chip);
      color: var(--muted);
      padding: 1px 5px;
      border-radius: 99px;
      transition: var(--tr);
    }
    .studio-slide-option.active .option-count {
      background: var(--active-count-bg);
      color: var(--active-count-text);
    }

    /* 刪除工作室：永遠佔位的 ✕(隱形但保留空間),hover 選項才顯示 */
    .slide-delete-btn {
      background: transparent;
      border: none;
      padding: 2px 4px;
      margin-left: 2px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      border-radius: 8px;
      opacity: 0;
      pointer-events: none;
      transition: var(--tr);
      color: var(--danger);
    }
    .studio-slide-option:hover .slide-delete-btn {
      opacity: 1;
      pointer-events: auto;
    }
    .slide-delete-btn:hover {
      transform: rotate(90deg) scale(1.15);
      background: var(--danger);
      color: #ffffff;
    }
    .slide-delete-btn:active {
      transform: rotate(90deg) scale(0.92);
    }

    .tab-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }