/*
  LIVE shell — color-dominant counterpart of ADMIN.
  Atomic components (cards, buttons, lang-picker, footer) come from app.css.
  Same classes as ADMIN, only the layout-scoped colour variables flip —
  that's the only difference between the two areas.
*/

.live-layout {
    /* Flip the layout-scoped variables for the LIVE area. */
    --sidan-layout-bg:    var(--sidan-color-primary);
    --sidan-layout-text:  var(--sidan-color-text-on-primary);
    --sidan-card-bg:      var(--sidan-surface);
    --sidan-card-text:    var(--sidan-text);

    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sidan-layout-bg);
    color: var(--sidan-layout-text);
}

.live-header {
    flex-shrink: 0;
    background: var(--sidan-color-primary-hover);
    color: var(--sidan-color-text-on-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 0;
}

.live-header .area-label {
    margin-left: 12px;
    font-weight: var(--sidan-font-weight-bold);
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.live-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem;
}