/* ── OVERLAY ── */
    .overlay{
      position:fixed;inset:0;
      background:var(--overlay-bg);backdrop-filter:blur(12px);
      display:none;align-items:center;justify-content:center;
      padding:24px;z-index:80;
      animation: fadeIn 0.22s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .overlay.open{display:flex}
    .panel{
      width:min(100%, 500px);max-height:min(88vh, 740px);overflow-y:auto;
      border-radius:24px;background:var(--surface);
      border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:28px;
    }
    .panel-head{
      display:flex;align-items:flex-start;justify-content:space-between;
      gap:14px;margin-bottom:20px;
    }
    .panel-head h5{font-size:20px;font-weight:700;letter-spacing:-.025em}
    .panel-sub{font-size:13px;color:var(--muted);margin-top:4px}
    .x-btn{
      width:36px;height:36px;border-radius:14px;
      background:var(--surface-off);color:var(--muted);
      display:grid;place-items:center;font-size:13px;
      flex-shrink:0;transition:var(--tr);
      cursor: pointer;
      box-shadow: var(--shadow-xs);
    }
    .x-btn:hover{
      background:var(--chip);
      color: var(--text);
      transform: scale(1.06) rotate(90deg);
    }
    .x-btn:active{transform: scale(0.94) rotate(90deg)}
    /* flow detail 右上角關閉流的 x 按鈕:用 Blush 奶昔粉(讓 6 色 pastel 盤用於更明確的 UI 元素) */
    .x-btn[data-close="flowDetailOverlay"],
    .x-btn[data-close="flowDetailOverlay"]:hover {
      background: var(--pastel-blush);
      color: var(--stamp-rejected-text);
    }
    .field{margin-bottom:16px}
    .field label{
      display:block;margin-bottom:7px;
      font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em;
    }
    .field input,.field textarea{
      width:100%;border:1px solid var(--line);
      background:var(--bg);border-radius:13px;
      padding:11px 14px;color:var(--text);outline:none;
      transition:var(--tr);
    }
    .field textarea{min-height:90px;resize:vertical;line-height:1.7}
    .field input:focus,.field textarea:focus{
      border-color:var(--primary-soft);
      box-shadow:0 0 0 3px var(--focus-ring);
    }
    .swatches{display:flex;gap:10px;flex-wrap:wrap}
    .swatch{
      width:28px;height:28px;border-radius:50%;
      border:2px solid transparent;
      box-shadow:var(--shadow-xs);transition:var(--tr);cursor:pointer;
    }
    .swatch.active{border-color:var(--text);transform:scale(1.15)}
    .panel-foot{
      display:flex;align-items:center;justify-content:space-between;
      gap:12px;padding-top:18px;
      border-top:1px solid var(--line);margin-top:4px;
    }
    .danger-btn{
      font-size:13px;font-weight:600;
      color:var(--danger);
      padding: 9px 18px;
      border-radius: 14px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
      transition:var(--tr);
      cursor: pointer;
    }
    .danger-btn:hover{
      color: #ffffff;
      background: var(--danger);
      border-color: transparent;
      transform: translateY(-1.5px) scale(1.04);
      box-shadow: var(--shadow-sm);
    }
    .danger-btn:active{transform: translateY(0) scale(0.98)}

    .modal-card {
      width: min(100%, 500px);
      max-height: min(88vh, 740px);
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--surface);
      box-shadow: var(--shadow-lg);
      padding: 28px;
    }

    .modal-sub {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .feedback-form-icon,
    .feedback-form-title,
    .feedback-form-sub,
    .feedback-success {
      text-align: center;
    }

    .feedback-form-icon {
      margin-bottom: 6px;
      font-size: 36px;
    }

    .feedback-form-title {
      font-size: 20px;
    }

    .feedback-first-field {
      margin-top: 16px;
    }

    .feedback-name-field {
      margin-top: 12px;
    }

    .feedback-form-actions {
      margin-top: 20px;
    }

    .feedback-success[hidden] {
      display: none;
    }

    .feedback-success {
      padding: 14px 0 2px;
    }

    .feedback-success-icon {
      margin-bottom: 8px;
      font-size: 44px;
    }

    .feedback-success h4 {
      margin-bottom: 6px;
      color: var(--stamp-approved-text);
      font-size: 17px;
      font-weight: 700;
    }

    .feedback-success > p {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .feedback-tracking-card {
      margin-top: 18px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--bg);
      text-align: left;
    }

    .feedback-tracking-card label {
      display: block;
      margin-bottom: 8px;
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
    }

    .feedback-tracking-row {
      display: flex;
      gap: 8px;
    }

    .feedback-tracking-row input {
      min-width: 0;
      flex: 1;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      padding: 10px 12px;
      color: var(--text);
      font-size: 12px;
      outline: none;
    }

    .feedback-tracking-row input:focus {
      border-color: var(--primary-soft);
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .feedback-copy-btn {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .feedback-copy-status {
      min-height: 18px;
      margin-top: 6px;
      color: var(--stamp-approved-text);
      font-size: 12px;
    }

    .feedback-success .feedback-private-warning {
      margin-top: 14px;
      color: var(--stamp-rejected-text);
    }

    .feedback-success .feedback-browser-note {
      margin-top: 6px;
    }

    .feedback-close-btn {
      margin-top: 16px;
    }

    /* ── 沉浸式無外框浮層：邀請／搜尋／回收桶共用 ── */
    .overlay.focus-overlay {
      padding: 36px 24px;
      background: rgba(58, 58, 61, .34);
      backdrop-filter: blur(18px) saturate(.72);
      -webkit-backdrop-filter: blur(18px) saturate(.72);
      overflow-y: auto;
    }

    .focus-dialog {
      width: min(100%, 560px);
      max-height: min(88vh, 780px);
      display: flex;
      flex-direction: column;
      color: var(--text);
      animation: focusRise 280ms cubic-bezier(.22, 1, .36, 1);
    }

    .focus-dialog[tabindex="-1"]:focus {
      outline: none;
    }

    @keyframes focusRise {
      from { opacity: 0; transform: translateY(14px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .focus-dialog-head {
      margin-bottom: 22px;
    }

    .focus-dialog-head h3 {
      margin: 0;
      color: var(--text);
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 750;
      letter-spacing: -.035em;
      line-height: 1.2;
    }

    .focus-dialog-head p {
      margin-top: 5px;
      color: rgba(58, 58, 61, .74);
      font-size: 14px;
      line-height: 1.6;
    }

    .focus-kicker {
      margin-bottom: 7px;
      color: rgba(58, 58, 61, .56);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
    }

    .focus-field label {
      display: block;
      margin-bottom: 7px;
      color: rgba(58, 58, 61, .68);
      font-size: 12px;
      font-weight: 650;
    }

    .focus-link-row {
      display: flex;
      align-items: stretch;
      gap: 9px;
    }

    .focus-link-input {
      min-width: 0;
      flex: 1;
      border: 1px solid rgba(255, 255, 255, .6);
      border-radius: 15px;
      outline: 0;
      background: rgba(248, 248, 246, .94);
      color: var(--text);
      padding: 11px 15px;
      box-shadow: var(--shadow-xs);
      font-size: 13px;
    }

    .focus-link-input:focus {
      border-color: var(--primary-soft);
      box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-xs);
    }

    .focus-copy-btn {
      flex: 0 0 auto;
      min-height: 42px;
      padding: 0 17px;
      white-space: nowrap;
    }

    .focus-copy-status {
      min-height: 18px;
      margin-top: 5px;
      color: var(--stamp-approved-text);
      font-size: 12px;
    }

    .collect-setting {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .collect-setting-title {
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
    }

    .collect-setting-copy {
      margin-top: 3px;
      color: rgba(58, 58, 61, .68);
      font-size: 12px;
      line-height: 1.55;
    }

    .toy-switch {
      position: relative;
      width: 46px;
      height: 28px;
      flex: 0 0 auto;
      cursor: pointer;
    }

    .toy-switch input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .toy-switch-track {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(58, 58, 61, .16);
      border-radius: 999px;
      background: rgba(248, 248, 246, .82);
      box-shadow: inset 0 1px 3px rgba(58, 58, 61, .08);
      transition: var(--tr);
    }

    .toy-switch-track::after {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--white-porcelain);
      box-shadow: var(--shadow-sm);
      transition: var(--tr);
    }

    .toy-switch input:checked + .toy-switch-track {
      border-color: transparent;
      background: var(--pastel-mint);
    }

    .toy-switch input:checked + .toy-switch-track::after {
      transform: translateX(18px);
      background: var(--primary);
    }

    .toy-switch input:focus-visible + .toy-switch-track {
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .collect-link-wrap {
      margin-top: 15px;
    }

    .collect-link-wrap[hidden] { display: none; }

    /* 對話框底部的一句說明：講清楚這條連結給誰、能做什麼 */
    .focus-hint {
      margin-top: 16px;
      color: rgba(58, 58, 61, .62);
      font-size: 12px;
      line-height: 1.7;
    }

    .focus-dialog-actions {
      display: flex;
      justify-content: flex-start;
      margin-top: 22px;
    }

    .focus-dialog-actions .btn-ghost {
      background: rgba(248, 248, 246, .94);
      color: var(--text);
    }

    @media (max-width: 540px) {
      .modal-card {
        padding: 22px 18px;
      }

      .feedback-tracking-row {
        flex-direction: column;
      }

      .feedback-copy-btn {
        width: 100%;
      }

      .overlay.focus-overlay {
        align-items: flex-start;
        padding: 28px 18px;
      }

      .focus-dialog {
        width: 100%;
        max-height: none;
        margin: auto 0;
      }

      .focus-dialog-head {
        margin-bottom: 18px;
      }

      .focus-link-row {
        flex-direction: column;
      }

      .focus-copy-btn {
        width: 100%;
      }
    }