/**
 * 進行ボード（店舗据置・横長）
 */
#pb-root {
    min-height: 100vh;
    background: var(--color-bg-base, var(--bg-color));
    color: var(--color-text-main, var(--color-text-main));
}
#pb-narrow {
    display: none;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
}
#pb-gate {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 12, 0.92);
}
#pb-gate.hidden { display: none; }
#pb-start-btn {
    min-width: 240px;
    min-height: 64px;
    border: 0;
    border-radius: 14px;
    background: var(--anx-primary-soft));
    color: var(--anx-text);
    font-size: 1.35rem;
    font-weight: 800;
    cursor: pointer;
}
#pb-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--color-border, var(--color-border));
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-card, #16161c);
}
#pb-salon {
    font-size: 1.15rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#pb-clock {
    margin-left: auto;
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
#pb-header button {
    border: 1px solid var(--color-border, var(--anx-border));
    background: var(--color-surface, var(--color-card));
    color: var(--color-text-main, #fff);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
#pb-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 18px 6px;
    border-bottom: 1px solid var(--color-border, var(--color-border));
    background: var(--color-card, #16161c);
    font-size: 0.78rem;
    color: var(--color-text-sub, var(--anx-text-muted));
    font-variant-numeric: tabular-nums;
}
#pb-live-status.is-stale {
    color: #ffb86c;
    font-weight: 700;
}
#pb-day-banner {
    margin: 0;
    padding: 10px 18px;
    background: #2a3a55;
    color: #e8f0ff;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid #3d5278;
}
#pb-board {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 12px;
    padding: 10px 12px 24px;
    align-items: start;
    min-height: calc(100vh - 96px);
}
#pb-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#pb-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 1px solid var(--color-border, var(--color-border));
    padding-left: 10px;
    max-height: calc(100vh - 80px);
    overflow: auto;
}
.pb-empty {
    color: var(--color-text-sub, var(--anx-text-muted));
    text-align: center;
    padding: 48px 16px;
    font-size: 1rem;
    grid-column: 1 / -1;
}
.pb-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.pb-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    border: 1px solid var(--color-border, var(--anx-border));
    border-radius: 12px;
    background: var(--color-card, #1a1a22);
    color: inherit;
    padding: 12px 14px;
    cursor: pointer;
    min-height: 160px;
}
.pb-card.is-focus {
    box-shadow: 0 0 0 2px rgba(0, 206, 209, 0.45);
}
.pb-card.is-over {
    background: #4a1020;
    color: #fff8f8;
    border-color: #ff4d6d;
    box-shadow: 0 0 0 2px rgba(255, 77, 109, 0.45);
}
.pb-card.is-over .pb-name,
.pb-card.is-over .pb-status,
.pb-card.is-over .pb-laps,
.pb-card.is-over .pb-lap,
.pb-card.is-over .pb-fold,
.pb-card.is-over .pb-recipe,
.pb-card.is-over .pb-lap-staff {
    color: #fff8f8;
}
.pb-card.is-over .pb-status.is-over { color: #ffd6dc; }
.pb-card.is-over .pb-status.is-rest { color: #d4fff4; }
.pb-card.is-over .pb-recipe.is-empty { color: #ffc9d0; }
.pb-card.is-over .pb-end-rest {
    background: #6b1828;
    color: #fff8f8;
    border-color: #ffb3bd;
}
.pb-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pb-name {
    font-size: 1.05rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pb-staff {
    font-size: 0.82rem;
    color: var(--color-text-sub, var(--anx-text-muted));
    margin-top: 2px;
}
.pb-status {
    font-size: 0.92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.pb-status.is-over { color: #ff8fa3; }
.pb-status.is-rest { color: #7ee0c8; }
.pb-status.is-arrived { color: #9ec5ff; }
.pb-card.is-arrived {
    border-color: #3a5a8a;
}
.pb-laps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.pb-fold {
    color: var(--color-text-sub, #999);
    font-size: 0.85rem;
    font-weight: 700;
}
.pb-lap.is-live {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 800;
}
.pb-lap-staff {
    font-size: 0.75rem;
    color: var(--color-text-sub, var(--anx-text-muted));
    font-weight: 600;
    margin-left: 2px;
}
.pb-recipe {
    font-size: 0.78rem;
    color: var(--color-text-sub, var(--anx-text-muted));
    line-height: 1.45;
    max-height: 4.4em;
    overflow: hidden;
}
.pb-recipe.is-empty { color: #777; font-style: italic; }
.pb-end-rest {
    border: 1px solid #ff8fa3;
    background: #3a1018;
    color: #ffd0d8;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 800;
    cursor: pointer;
    font-size: 0.85rem;
    align-self: flex-start;
}
.pb-listrow {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-border, var(--anx-border));
    border-radius: 8px;
    background: var(--color-card, #1a1a22);
    color: inherit;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.88rem;
}
.pb-listrow.is-over {
    background: #4a1020;
    color: #fff8f8;
    border-color: #ff4d6d;
}
.pb-listrow.is-over .pb-ln,
.pb-listrow.is-over .pb-ls {
    color: #fff8f8;
}
.pb-listrow.is-focus {
    box-shadow: 0 0 0 1px rgba(0, 206, 209, 0.5);
}
.pb-listrow .pb-ln {
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pb-listrow .pb-ls {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-sub, var(--anx-border));
    white-space: nowrap;
}
@keyframes pb-blink {
    0%, 49% { background-color: #4a1020; }
    50%, 100% { background-color: #8a243c; }
}
.pb-card.is-over.is-blink,
.pb-listrow.is-over.is-blink {
    animation: pb-blink 0.5s linear infinite;
    color: #fff8f8;
}
.pb-detail {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pb-detail.is-on { display: flex; }
.pb-detail-card {
    width: min(720px, 100%);
    max-height: 80vh;
    overflow: auto;
    background: var(--color-card, #1a1a22);
    border: 1px solid var(--color-border, var(--anx-border));
    border-radius: 14px;
    padding: 18px 20px 16px;
}
.pb-detail-card h2 {
    margin: 0 0 12px;
    font-size: 1.15rem;
}
.pb-detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
#pb-tl-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--bg-color);
    flex-direction: column;
}
#pb-tl-overlay.is-on { display: flex; }
#pb-tl-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #16161c;
    border-bottom: 1px solid var(--anx-border);
}
#pb-tl-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--color-card);
}
#pb-tl-idle {
    margin-left: auto;
    font-weight: 800;
    color: #ffb020;
    display: none;
}
@media (max-width: 1023px) {
    #pb-app { display: none !important; }
    #pb-gate { display: none !important; }
    #pb-narrow { display: flex; }
}