/* 読み込み中の表示（全ページ共通）。
   ・画面上部の細い進行バー（ページ移動・通信が少し長引いたとき）
   ・ページ移動が長引いたときの「読み込み中」表示
   ・ボタンを押して処理している間の、ボタン上の回転アイコン
   色は各ページのテーマ（--accent / --panel）に合わせる。 */
:root { --sb-accent: var(--accent, #dc2626); --sb-accent-2: var(--accent-2, #06b6d4); }

.sb-bar { position: fixed; inset: 0 auto auto 0; z-index: 100000; width: 100%; height: 3px; pointer-events: none; opacity: 0; transform-origin: left; transform: scaleX(0);
          background: linear-gradient(90deg, var(--sb-accent), var(--sb-accent-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--sb-accent) 60%, transparent);
          transition: transform .35s ease, opacity .25s ease; }
.sb-bar.on { opacity: 1; }

.sb-leaving main, .sb-leaving .app-shell, .sb-leaving .admin-main, .sb-leaving .page-body { opacity: .72; transition: opacity .25s ease; }

.sb-toast { position: fixed; left: 50%; bottom: 28px; z-index: 100000; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
            background: var(--panel, #fff); color: var(--text, #1c1f26); border: 1px solid var(--line, #dfe2ea); box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
            font: 600 .9rem/1.2 system-ui, "Noto Sans JP", sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.sb-toast.on { opacity: 1; transform: translate(-50%, 0); }
.sb-toast .sb-ring { width: 18px; height: 18px; }

.sb-ring { display: inline-block; flex: none; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--sb-accent) 25%, transparent); border-top-color: var(--sb-accent); animation: sb-spin .75s linear infinite; }

/* 押したボタン: 中身を薄く覆って、中央に回転アイコンを出す（大きさは変わらない）。連打も防ぐ */
.sb-busy { position: relative !important; pointer-events: none !important; cursor: progress; }
.sb-busy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--panel, #fff) 88%, transparent); }
.sb-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(18px, 62%); aspect-ratio: 1; margin: calc(min(18px, 62%) / -2) 0 0 calc(min(18px, 62%) / -2);
                  border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--sb-accent) 25%, transparent); border-top-color: var(--sb-accent); animation: sb-spin .75s linear infinite; }

@keyframes sb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sb-bar, .sb-toast { transition: none; } .sb-ring, .sb-busy::after { animation-duration: 3s; } }
.reduce-motion .sb-ring, .reduce-motion .sb-busy::after { animation-duration: 3s; }