/* ── TOPBAR ── */
    .topbar{
      position:sticky;top:0;z-index:50;
      border-bottom:1px solid var(--line);
      background: var(--topbar-bg);
      backdrop-filter:blur(20px);
      width:100%;
      overflow: visible;          /* 讓子元素 tooltip 不被裁切 */
      transition: background-color var(--tr), border-color var(--tr);
    }
    .topbar-inner{
      width:80%;margin:0 auto;padding:16px 28px 14px;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
      overflow: visible;          /* 讓子元素 tooltip 不被裁切 */
    }
    .brand{display:flex;align-items:center;gap:12px}
    .brand-mark{
      width:40px;height:40px;border-radius:14px;
      background:var(--brand-mark-bg);color:var(--brand-mark-text);
      display:grid;place-items:center;
      font-size:16px;font-weight:700;
      box-shadow:var(--shadow-xs);flex-shrink:0;
      transition: var(--tr);
      cursor: default;
    }
    .brand-mark:hover{
      transform: scale(1.05) rotate(-4deg);
      box-shadow: var(--shadow-sm);
    }
    .brand h1{font-size:16px;font-weight:700;letter-spacing:-.025em;line-height:1}
    .brand p{font-size:12px;color:var(--muted);margin-top:3px}
    .topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
    #authContainer{display:flex;align-items:center;gap:8px}
    /* .ghost-btn 的 display:inline-flex 會蓋掉瀏覽器對 [hidden] 的 display:none，
       兩顆按鈕都要各自補一條，否則非工作室建立者仍看得到 */
    #inviteBtn[hidden],
    #collectBtn[hidden]{display:none}
    #inviteBtn:disabled{
      opacity:.58;cursor:wait;transform:none;box-shadow:var(--shadow-xs);
    }

    .topbar-site-link{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:38px;padding:0 10px;border-radius:12px;
      color:var(--muted);font-size:12px;font-weight:650;text-decoration:none;
      transition:var(--tr);
    }
    .topbar-site-link:hover,
    .topbar-site-link:focus-visible{
      outline:0;color:var(--text);background:var(--surface-off);
    }

    /* 註: .topbar-add-btn 已移除(死代碼,HTML/JS 無使用) */

    /* 次要動作（邀請、意見收集、複製連結）：抬起面 + 細邊，不填色。
       原本這一顆是實心薄荷綠，於是 topbar 上三顆按鈕等重排成一列，
       未登入的人看不出「Google 登入」才是他該按的那顆。 */
    .ghost-btn{
      background:var(--surface);color:var(--btn-ghost-text);
      height:38px;padding:0 18px;border-radius:14px;
      border:1px solid var(--line);
      font-size:14px;font-weight:600;
      box-shadow:var(--shadow-xs);transition:var(--tr);
      cursor: pointer;
      display:inline-flex;align-items:center;justify-content:center;
      text-decoration:none;
    }
    .ghost-btn:hover{
      color:var(--primary);
      border-color:var(--primary-soft);
      transform: translateY(-2px) scale(1.05) rotate(-1deg);
      box-shadow: var(--shadow-sm);
    }
    .ghost-btn:active{
      transform: translateY(1px) scale(0.98);
      box-shadow: var(--shadow-xs);
    }

    /* 未登入時唯一該按的那顆：留住原本的實心薄荷綠。
       它是入口動作，不是次要動作，所以填色要比 .ghost-btn 滿。 */
    .ghost-btn--accent{
      background:var(--pastel-mint);
      color:var(--stamp-approved-text);
      border-color:transparent;
    }
    .ghost-btn--accent:hover{
      color:var(--stamp-approved-text);
      border-color:transparent;
    }

    .primary-btn{
      background:var(--primary);color:var(--btn-primary-text);
      padding:12px 24px;border-radius:14px;
      font-size:13px;font-weight:600;
      box-shadow:var(--shadow-sm);transition:var(--tr);
      cursor: pointer;
    }
    .primary-btn:hover{
      transform: translateY(-1.5px) scale(1.04);
      box-shadow: var(--shadow-sm);
    }
    .primary-btn:active{transform: translateY(0) scale(0.98)}

    /* ── BTN-GHOST：次要按鈕（給 modal 取消等用） ── */
    .btn-ghost{
      background:var(--surface);color:var(--btn-ghost-text);
      padding:12px 24px;border-radius:14px;
      font-size:13px;font-weight:600;
      box-shadow:var(--shadow-xs);transition:var(--tr);
      cursor: pointer;
    }
    .btn-ghost:hover{
      transform: translateY(-2px) scale(1.05) rotate(-1deg);
      box-shadow: var(--shadow-sm);
    }
    .btn-ghost:active{
      transform: translateY(0) scale(0.98);
      box-shadow: inset 0 2px 4px rgba(58, 58, 61, 0.08);
    }
    .avatar{
      width:38px;height:38px;
      border-radius:50%;
      display:grid;place-items:center;
      font-size:14px;font-weight:700;
      color:var(--stamp-approved-text);
      box-shadow:var(--shadow-xs);
      transition: var(--tr);
      cursor: pointer;
      user-select:none;
    }
    .avatar:hover{
      transform: translateY(-2px) scale(1.05) rotate(-1deg);
      box-shadow: var(--shadow-sm);
    }
    .avatar:active{
      transform: translateY(1px) scale(0.98);
      box-shadow: var(--shadow-xs);
    }
    .avatar-sm{
      width:26px;height:26px;
      font-size:11px;
      box-shadow:var(--shadow-xs);
    }

    /* ── 登入使用者工具選單 ── */
    .user-menu-wrap {
      position: relative;
      display: inline-flex;
    }

    .avatar[aria-expanded="true"] {
      transform: translateY(-1px) scale(1.04);
      box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm);
    }

    .user-menu-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 100;
      width: 278px;
      padding: 10px;
      border: 1px solid rgba(58, 58, 61, .1);
      border-radius: 18px;
      background: rgba(248, 248, 246, .96);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transform-origin: top right;
      animation: userMenuIn 180ms cubic-bezier(.22, 1, .36, 1);
    }

    .user-menu-dropdown[hidden] {
      display: none;
    }

    @keyframes userMenuIn {
      from { opacity: 0; transform: translateY(-6px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .user-menu-identity {
      padding: 8px 9px 11px;
    }

    .user-menu-name {
      overflow: hidden;
      color: var(--text);
      font-size: 13px;
      font-weight: 750;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-menu-email {
      overflow: hidden;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-menu-divider {
      height: 1px;
      margin: 5px 7px;
      background: var(--line);
    }

    .user-menu-nav {
      display: grid;
      gap: 3px;
    }

    .user-menu-item {
      width: 100%;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 12px;
      color: var(--text);
      text-align: left;
      text-decoration: none;
      transition: var(--tr);
    }

    .user-menu-item:hover,
    .user-menu-item:focus-visible {
      outline: 0;
      background: var(--surface-off);
      transform: translateX(2px);
    }

    .user-menu-item-icon {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: var(--pastel-mint);
      color: var(--stamp-approved-text);
    }

    .user-menu-item-icon svg {
      width: 15px;
      height: 15px;
    }

    .user-menu-trash .user-menu-item-icon {
      background: var(--pastel-blush);
      color: var(--stamp-rejected-text);
    }

    .user-menu-website .user-menu-item-icon {
      background: var(--pastel-sky);
      color: var(--text);
    }

    .user-menu-logout .user-menu-item-icon {
      background: var(--pastel-peach);
    }

    .user-menu-item-label {
      font-size: 13px;
      font-weight: 650;
    }

    .user-menu-shortcut {
      color: var(--muted);
      font-size: 10px;
      font-weight: 650;
    }

    .user-menu-policy-links {
      display: flex;
      gap: 12px;
      padding: 7px 10px 5px;
    }

    .user-menu-policy-links a {
      color: var(--muted);
      font-size: 10px;
      font-weight: 600;
      text-decoration: none;
    }

    .user-menu-policy-links a:hover,
    .user-menu-policy-links a:focus-visible {
      outline: 0;
      color: var(--text);
      text-decoration: none;
    }

    @media (max-width: 540px) {
      .user-menu-dropdown {
        width: min(278px, calc(100vw - 24px));
      }

    }