/* shared/stage.css — Stage.html-specific styles */
/* Tab navigation */
.stage-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
}
.stage-tab {
    flex: 1;
    padding: 0.65rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
    letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, border-color 0.15s;
    min-height: 44px;
}
.stage-tab.active {
    border-bottom-color: var(--shirofes-red);
    color: var(--text-primary);
}
/* At 480px: JA + EN label can't share a flex:1 slot without clipping.
   Shrink font + padding, let overflow scroll horizontally with snap. */
@media (max-width: 480px) {
    .stage-tabs {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .stage-tabs::-webkit-scrollbar { display: none; }
    .stage-tab {
        flex: 0 0 auto;
        font-size: 0.78rem;
        padding: 0.55rem 0.65rem;
        scroll-snap-align: start;
    }
}

/* Bracket tab — matchup cards */
.matchup-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.matchup-vs-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.matchup-btn {
    flex: 1;
    min-height: 68px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem 0.4rem;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.3;
    word-break: break-word;
    transition: transform 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.matchup-btn:active { transform: scale(0.96); }
.matchup-btn.winner {
    background: var(--shirofes-red);
    border-color: var(--shirofes-red);
    color: var(--text-primary);
}
.matchup-btn.loser { opacity: 0.35; }
.matchup-btn:disabled { cursor: default; opacity: 0.25; }
.matchup-pos {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.round-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
}
.round-nav-label { text-align: center; }

/* Circle assignment buttons */
.circle-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 4px;
}
.circle-btn {
    min-width: 56px;
    min-height: 56px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 10px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.circle-btn:active { transform: scale(0.91); }
.circle-btn.active {
    background: var(--shirofes-red);
    border-color: var(--shirofes-red);
    color: var(--text-primary);
}
.circle-btn.warn {
    background: var(--warning);
    border-color: #d97706;
    color: var(--text-primary);
}
.circle-btn.active.warn {
    background: var(--shirofes-red);
    border-color: var(--shirofes-red);
}
.circle-count {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.72;
    line-height: 1;
}

/* Balance dashboard */
.circle-rows { display: flex; flex-direction: column; gap: 8px; }
.circle-row {
    display: grid;
    grid-template-columns: 28px 1fr 80px;
    align-items: center;
    gap: 10px;
}
.circle-label { font-weight: 800; font-size: 1rem; text-align: center; }
.circle-bar-track {
    height: 22px;
    background: var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.circle-bar-fill { height: 100%; border-radius: 8px; transition: width 0.25s ease; }
.bar-green  { background: var(--success); }
.bar-yellow { background: var(--warning); }
.bar-red    { background: var(--error); }
.circle-stat {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    color: var(--text-secondary);
}
.circle-stat .count { font-size: 1rem; color: var(--text-primary); }

/* Participant assignment cards */
.circle-assign-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.circle-assign-info { margin-bottom: 0.5rem; }

/* Setup checklist */
.setup-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.setup-check-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s;
}
.setup-check-item.checked {
    border-color: var(--success);
    background: rgba(34,197,94,0.07);
}
.setup-check-box {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.setup-check-item.checked .setup-check-box {
    background: var(--success);
    border-color: var(--success);
    color: var(--text-primary);
}
.setup-check-label {
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
}
.setup-check-sublabel {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 1px;
}
.setup-check-item.checked .setup-check-label { color: var(--text-tertiary); }
.setup-headcount {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.setup-headcount-stat {
    text-align: center;
}
.setup-headcount-num {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}
.setup-headcount-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 3px;
}
.setup-headcount-divider {
    width: 1px;
    height: 48px;
    background: var(--border);
    flex-shrink: 0;
}

/* Prelim phase */
.prelim-circle-badge {
    text-align: center;
    padding: 1.25rem 1rem;
    background: var(--shirofes-red);
    border-radius: 16px;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}
.prelim-circle-name {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    font-family: 'Inter Tight', sans-serif;
}
.prelim-circle-sub {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.82;
    margin-top: 0.3rem;
}
.prelim-timer-wrap {
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    margin-bottom: 1.25rem;
}
.prelim-timer-display {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: 'Inter Tight', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: color 0.25s;
    color: var(--text-primary);
}
.prelim-timer-display.low  { color: var(--error); }
.prelim-timer-display.done { color: var(--text-tertiary); }
.prelim-timer-controls {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.9rem;
}
.prelim-dancer-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.prelim-dancer-num {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-tertiary);
    min-width: 36px;
}
.prelim-advance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s;
}
.prelim-advance-card.selected {
    border-color: var(--shirofes-red);
    background: rgba(220,38,38,0.06);
}
.prelim-advance-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: transparent;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.prelim-advance-card.selected .prelim-advance-check {
    background: var(--shirofes-red);
    border-color: var(--shirofes-red);
    color: var(--text-primary);
}

/* Round transition checklist */
.trans-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 0.5rem;
}
.trans-check-item.checked {
    border-color: var(--success);
    background: rgba(34,197,94,0.07);
}
.trans-check-item.checked .setup-check-box {
    background: var(--success);
    border-color: var(--success);
    color: var(--text-primary);
}
.trans-check-detail {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Tournament winner buttons */
.tournament-winner-btn {
    flex: 1;
    min-height: 64px;
    border-radius: 8px;
    border: 2.5px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.75rem 0.5rem;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    word-break: break-word;
    text-align: center;
}
.tournament-winner-btn:hover:not(:disabled) {
    border-color: var(--shirofes-red);
    background: rgba(220,38,38,0.1);
}
.tournament-winner-btn:active {
    transform: scale(0.97);
    background: rgba(220,38,38,0.18);
}
.tournament-winner-name {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.tournament-winner-sub {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Phase indicator */
.phase-indicator {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1rem 1rem;
    margin-bottom: 1.25rem;
}
.phase-steps {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.phase-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 1;
}
.phase-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.phase-step.done .phase-step-dot {
    background: var(--success);
    border-color: var(--success);
    color: var(--text-primary);
}
.phase-step.active .phase-step-dot {
    background: var(--shirofes-red);
    border-color: var(--shirofes-red);
    color: var(--text-primary);
    box-shadow: 0 0 0 4px rgba(220,38,38,0.18);
}
.phase-step-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}
.phase-step.active .phase-step-label { color: var(--text-primary); }
.phase-step.done  .phase-step-label { color: var(--success); }
.phase-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    align-self: flex-start;
    margin-top: 17px; /* center on larger dot */
    transition: background 0.15s;
}
.phase-connector.done { background: var(--success); }
.phase-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}
.phase-stats {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.phase-stats strong { color: var(--text-primary); }
.phase-advance-btn {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.phase-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

/* Phase confirmation modal */
.phase-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.phase-modal-box {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 360px;
}
.phase-modal-title {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.phase-modal-headline {
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}
.phase-modal-body {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.55;
}
.phase-modal-actions {
    display: flex;
    gap: 0.75rem;
}
/* Two buttons with flex:1 get tight on narrow phones. Stack them. */
@media (max-width: 480px) {
    .phase-modal-actions { flex-direction: column; }
    .phase-modal-actions > .btn { width: 100%; }
}

/* Complete phase */
.complete-view { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem; }
.complete-header { text-align: center; padding: 1rem 0 0.5rem; }
.complete-phase-badge {
    display: inline-block; background: var(--shirofes-red); color: var(--text-primary);
    font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem; border-radius: 4px; margin-bottom: 0.5rem;
}
.complete-battle-name { font-size: 1.4rem; font-weight: 900; color: var(--text-primary); }
.complete-stage-name  { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.2rem; }

.complete-results-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.complete-results-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 0.85rem; }

.complete-podium { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.complete-podium-slot { padding: 0.75rem 1rem; border-radius: 8px; }
.complete-podium-slot.champion { background: rgba(255,195,0,0.12); border: 2px solid rgba(255,195,0,0.6); }
.complete-podium-slot.runner-up { background: var(--surface-secondary, rgba(128,128,128,0.08)); border: 1px solid var(--border); }
.complete-podium-rank { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 0.3rem; }
.complete-podium-slot.champion .complete-podium-rank { color: rgba(200,150,0,0.9); }
.complete-podium-name { font-size: 1.1rem; }

.complete-section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); text-transform: uppercase; margin: 0.75rem 0 0.4rem; }
.complete-name-list { display: flex; flex-direction: column; gap: 0.3rem; }
.complete-name-row { font-size: 0.9rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.complete-name-row:last-child { border-bottom: none; }

.complete-export-banner {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1rem; border-radius: 8px; font-size: 0.88rem; line-height: 1.5;
}
.complete-export-banner.ready  { background: rgba(34,197,94,0.12); border: 1.5px solid rgba(34,197,94,0.5); color: var(--text-primary); }
.complete-export-banner.pending { background: rgba(255,160,0,0.1); border: 1.5px solid rgba(255,160,0,0.4); color: var(--text-primary); }
.complete-export-icon { font-size: 1.4rem; flex-shrink: 0; }
.complete-export-banner.ready  .complete-export-icon { color: var(--success); }
.complete-export-banner.pending .complete-export-icon { color: var(--warning); }

.complete-checklist-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.complete-check-item {
    display: flex; align-items: flex-start; gap: 0.85rem;
    width: 100%; text-align: left; background: none; border: none;
    padding: 0.7rem 0; border-bottom: 1px solid var(--border);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.complete-check-item:last-of-type { border-bottom: none; }
.complete-check-item.done .complete-check-icon { color: var(--success); }
.complete-check-icon { font-size: 1.2rem; flex-shrink: 0; color: var(--text-tertiary); padding-top: 0.1rem; }
.complete-check-label { font-size: 0.9rem; color: var(--text-primary); line-height: 1.45; }
.complete-check-item.done .complete-check-label { color: var(--text-tertiary); text-decoration: line-through; }
.complete-all-done {
    margin-top: 0.75rem; padding: 0.6rem; text-align: center;
    background: rgba(34,197,94,0.1); border-radius: 8px;
    color: var(--success); font-weight: 700; font-size: 0.9rem;
}

.complete-stage-btn {
    width: 100%; padding: 1rem; border-radius: 8px;
    background: var(--card-bg); border: 1.5px solid var(--border);
    font-weight: 700; font-size: 0.9rem; cursor: pointer; line-height: 1.5;
    color: var(--text-primary); -webkit-tap-highlight-color: transparent;
    min-height: 60px;
}

/* Director message FAB + panel */
#msgFab {
    position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 120;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--shirofes-red); border: none;
    font-size: 1.3rem; color: var(--text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(229,0,18,0.45);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
#msgFab:active { transform: scale(0.92); }
#msgFab.panel-open { background: rgba(255,255,255,0.12); }
#msgFab svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
}

#msgPanel {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 110;
    background: var(--bg-secondary, #12121e);
    border-top: 2px solid var(--border, #2a2a3a);
    border-radius: 16px 16px 0 0;
    padding: 0 1.25rem 2rem;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.34,1.06,0.64,1);
    max-height: 60vh; overflow-y: auto;
}
#msgPanel.open { transform: translateY(0); }

.msg-panel-handle {
    width: 36px; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,0.12); margin: 0.75rem auto 1rem;
}
.msg-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.85rem;
}
.msg-panel-title {
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em;
    color: var(--text-secondary);
    display: flex; align-items: center; gap: 0.45rem;
}
.msg-panel-title svg,
.msg-urgent-row svg {
    flex: 0 0 auto;
    stroke-width: 1.8;
}
#msgStageCtx {
    font-size: 0.75rem; color: var(--shirofes-red); font-weight: 600;
}
.msg-presets {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;
}
.msg-preset-btn {
    background: var(--bg-primary, #0c0c1a); border: 1.5px solid var(--border, #2a2a3a);
    border-radius: 8px; color: var(--text-primary); font-weight: 700;
    font-size: 0.88rem; padding: 0.75rem 0.5rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent; text-align: center;
    min-height: 52px; line-height: 1.3; font-family: inherit;
    transition: border-color 0.15s;
}
.msg-preset-btn:active { border-color: var(--shirofes-red); background: rgba(229,0,18,0.08); }

.msg-freetext-row {
    display: flex; gap: 0.5rem; margin-bottom: 0.75rem;
}
#msgCustomInput {
    flex: 1; background: var(--bg-primary, #0c0c1a);
    border: 1px solid var(--border, #2a2a3a); border-radius: 8px;
    color: var(--text-primary); font-size: 0.9rem; font-family: inherit;
    padding: 0.65rem 0.75rem; min-height: 44px;
}
#msgCustomInput:focus { outline: none; border-color: var(--shirofes-red); }
#msgCustomInput:focus-visible {
    outline: 2px solid var(--shirofes-red);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(229,0,18,0.18);
}
#msgSendCustomBtn {
    background: var(--shirofes-red); color: var(--text-primary); border: none;
    border-radius: 8px; font-weight: 700; font-size: 0.9rem;
    padding: 0 1rem; min-height: 44px; cursor: pointer;
    font-family: inherit; white-space: nowrap;
}

.msg-urgent-row {
    display: flex; align-items: center; gap: 0.65rem;
    font-size: 0.82rem; color: var(--text-secondary);
}
.msg-urgent-row label {
    display: flex; align-items: center; gap: 0.35rem;
}
#msgUrgentToggle {
    width: 20px; height: 20px; accent-color: var(--shirofes-red); cursor: pointer;
}

/* Cross-stage awareness strip */
#crossStageStrip {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.45rem 1rem 0.45rem;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border, #2a2a3a);
    font-size: 0.75rem; font-family: var(--font-body);
}
.cs-label {
    font-size: 0.65rem; letter-spacing: 0.12em; color: var(--text-tertiary);
    text-transform: uppercase; flex-shrink: 0;
}
.cs-item {
    display: flex; align-items: center; gap: 0.3rem;
    cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.cs-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    transition: transform 0.15s;
}
.cs-dot.on-time { background: var(--success); }
.cs-dot.minor   { background: var(--warning); }
.cs-dot.major   { background: var(--shirofes-red); animation: csPulse 1s ease-in-out infinite; }
.cs-dot.self    { box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }
.cs-name { color: var(--text-tertiary); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; }
.cs-delay { color: var(--warning); font-size: 0.65rem; }

/* Tooltip */
.cs-tooltip {
    display: none; position: absolute; top: 1.3rem; left: 50%;
    transform: translateX(-50%); white-space: nowrap; z-index: 200;
    background: var(--bg-secondary, #12121e); border: 1px solid var(--border, #2a2a3a);
    border-radius: 4px; padding: 0.35rem 0.6rem;
    font-size: 0.75rem; color: var(--text-secondary); pointer-events: none;
}
.cs-item.tip-open .cs-tooltip { display: block; }

@keyframes csPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

.cs-item.tip-open .cs-tooltip { display: block; }

/* Offline queue badge (UX improvement D) */
#offlineQueueBadge {
    position: fixed;
    top: 3.5rem;
    right: 1rem;
    background: var(--warning);
    color: var(--shirofes-black);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    z-index: 100;
    display: none;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#offlineQueueBadge.visible {
    display: flex;
    animation: slideInDown 0.25s ease-out;
}
@keyframes slideInDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}