:root {
    --bg: #f4f5f8;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;

    --dark: #0d1119;
    --dark-soft: #151c28;

    --text: #141821;
    --muted: #6f7785;

    --border: rgba(17,24,39,.09);

    --gold: #d6b55f;
    --gold-light: #ebd38d;

    --green: #14a065;
    --red: #e44350;

    --shadow:
        0 20px 60px rgba(20,24,33,.10);
}


* {
    box-sizing:
        border-box;
}


html,
body {
    margin:
        0;

    min-height:
        100%;
}


body {
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top right,
            rgba(214,181,95,.12),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fbfcfe,
            #f3f5f8
        );

    color:
        var(--text);

    -webkit-font-smoothing:
        antialiased;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
textarea {
    font:
        inherit;
}


/* HEADER */

.family-topbar {
    min-height:
        86px;

    padding:
        0 5vw;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        rgba(255,255,255,.84);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(18px);

    position:
        relative;

    z-index:
        20;
}


.family-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.family-brand-mark {
    width:
        48px;

    height:
        48px;

    border-radius:
        16px;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    color:
        #161616;

    font-weight:
        900;
}


.family-brand-copy {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.family-brand-copy strong {
    font-size:
        16px;
}


.family-brand-copy small {
    color:
        var(--muted);
}


.family-exit {
    min-height:
        40px;

    padding:
        0 15px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        white;

    color:
        #4d5562;

    cursor:
        pointer;
}


/* MAIN */

.family-main {
    width:
        min(1500px, 94vw);

    margin:
        0 auto;

    padding:
        38px 0 60px;
}


.family-footer {
    padding:
        30px 5vw;

    border-top:
        1px solid var(--border);

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--muted);

    font-size:
        12px;
}


.family-footer strong {
    color:
        #333a46;
}


/* LOGIN */

.family-access-page {
    min-height:
        calc(100vh - 230px);

    display:
        grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(420px,.75fr);

    overflow:
        hidden;

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        30px;

    box-shadow:
        var(--shadow);
}


.family-access-visual {
    position:
        relative;

    min-height:
        680px;

    background:
        url("/images/streaming-hero.svg")
        center / cover
        no-repeat;
}


.family-access-shade {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(10,14,21,.88),
            rgba(10,14,21,.44)
        );
}


.family-access-visual-content {
    position:
        absolute;

    left:
        7%;

    bottom:
        9%;

    max-width:
        650px;

    color:
        white;

    z-index:
        2;
}


.family-access-visual-content > span,
.family-kicker {
    color:
        #b48d32;

    font-size:
        10px;

    letter-spacing:
        1.7px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.family-access-visual-content span {
    color:
        var(--gold-light);
}


.family-access-visual-content h1 {
    margin:
        14px 0;

    font-size:
        clamp(
            42px,
            5vw,
            74px
        );

    line-height:
        .98;

    letter-spacing:
        -.045em;
}


.family-access-visual-content p {
    max-width:
        560px;

    margin:
        0;

    color:
        rgba(255,255,255,.82);

    font-size:
        17px;

    line-height:
        1.7;
}


.family-access-panel {
    padding:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.family-access-card {
    width:
        min(100%, 470px);
}


.family-access-icon {
    width:
        60px;

    height:
        60px;

    margin-bottom:
        24px;

    border-radius:
        19px;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    font-weight:
        900;
}


.family-access-card h2 {
    margin:
        9px 0 12px;

    font-size:
        34px;

    letter-spacing:
        -.035em;
}


.family-access-card > p {
    margin:
        0;

    color:
        var(--muted);

    line-height:
        1.7;
}


.family-access-form {
    margin-top:
        30px;

    display:
        grid;

    gap:
        18px;
}


.family-field {
    display:
        grid;

    gap:
        7px;
}


.family-field label {
    color:
        #444b57;

    font-size:
        12px;

    font-weight:
        700;
}


.family-field input {
    min-height:
        54px;

    width:
        100%;

    padding:
        0 16px;

    border:
        1px solid var(--border);

    border-radius:
        15px;

    outline:
        0;

    background:
        #fafbfc;

    color:
        #161b24;

    transition:
        .18s ease;
}


.family-field input:focus {
    border-color:
        rgba(182,143,48,.65);

    background:
        white;

    box-shadow:
        0 0 0 4px
        rgba(214,181,95,.12);
}


.family-code-input {
    font-family:
        Consolas,
        monospace !important;

    font-size:
        22px !important;

    letter-spacing:
        3px;

    text-align:
        center;
}


.family-primary-button {
    min-height:
        54px;

    border:
        0;

    border-radius:
        15px;

    cursor:
        pointer;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    color:
        #161616;

    font-weight:
        800;

    box-shadow:
        0 15px 30px
        rgba(214,181,95,.24);
}


.family-validation {
    color:
        #b63744;

    font-size:
        11px;
}


.family-privacy-note {
    margin-top:
        24px;

    padding:
        15px;

    border-radius:
        15px;

    background:
        #f7f8fa;

    border:
        1px solid var(--border);
}


.family-privacy-note strong,
.family-privacy-note span {
    display:
        block;
}


.family-privacy-note strong {
    font-size:
        12px;
}


.family-privacy-note span {
    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        11px;
}


/* VIEWER */

.viewer-shell {
    display:
        grid;

    gap:
        22px;
}


.viewer-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;
}


.viewer-heading h1 {
    margin:
        8px 0 7px;

    font-size:
        clamp(
            32px,
            4vw,
            52px
        );

    letter-spacing:
        -.045em;
}


.viewer-heading p {
    margin:
        0;

    color:
        var(--muted);
}


.viewer-status {
    min-height:
        40px;

    padding:
        0 14px;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    background:
        #edf0f4;

    color:
        #5e6672;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.viewer-status.live {
    background:
        #fdecef;

    color:
        #d23140;
}


.viewer-status.finished {
    background:
        #eaf7f0;

    color:
        #16784c;
}


.viewer-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(330px,.55fr);

    gap:
        22px;

    align-items:
        start;
}


.viewer-primary {
    display:
        grid;

    gap:
        20px;
}


.video-card {
    position:
        relative;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #080b10;

    border-radius:
        26px;

    box-shadow:
        var(--shadow);

    border:
        1px solid rgba(0,0,0,.12);
}


.family-video,
.video-placeholder-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


.video-placeholder-shade {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            0deg,
            rgba(9,12,17,.88),
            rgba(9,12,17,.20)
        );
}


.video-state-message {
    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    color:
        white;

    text-align:
        center;
}


.video-state-icon {
    width:
        64px;

    height:
        64px;

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(255,255,255,.12);

    border:
        1px solid
        rgba(255,255,255,.26);

    backdrop-filter:
        blur(10px);

    font-size:
        26px;
}


.video-state-message h2 {
    margin:
        18px 0 7px;

    font-size:
        25px;
}


.video-state-message p {
    margin:
        0;

    max-width:
        540px;

    color:
        rgba(255,255,255,.76);
}


.live-corner {
    position:
        absolute;

    left:
        18px;

    top:
        18px;

    z-index:
        4;

    min-height:
        34px;

    padding:
        0 11px;

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    background:
        rgba(214,48,64,.94);

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .9px;
}


.live-corner span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        white;
}


.viewer-info-card,
.family-chat-card,
.viewer-help-card {
    background:
        rgba(255,255,255,.90);

    border:
        1px solid var(--border);

    border-radius:
        22px;

    box-shadow:
        0 10px 34px
        rgba(20,24,33,.06);

    backdrop-filter:
        blur(12px);
}


.viewer-info-card {
    padding:
        26px;
}


.viewer-info-card h2 {
    margin:
        7px 0 5px;

    font-size:
        28px;

    letter-spacing:
        -.035em;
}


.viewer-family-reference {
    color:
        var(--muted);
}


.viewer-info-grid {
    margin-top:
        23px;

    display:
        grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        12px;
}


.viewer-info-grid > div {
    padding:
        16px;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        var(--surface-soft);
}


.viewer-info-grid span {
    display:
        block;

    color:
        var(--muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;
}


.viewer-info-grid strong {
    display:
        block;

    margin-top:
        7px;

    font-size:
        13px;
}


.recording-expiry {
    margin-top:
        16px;

    padding:
        14px;

    border-radius:
        14px;

    background:
        #fff9e8;

    border:
        1px solid #ecdcae;

    color:
        #71613a;

    font-size:
        12px;

    line-height:
        1.55;
}


.viewer-sidebar {
    display:
        grid;

    gap:
        18px;

    position:
        sticky;

    top:
        20px;
}


/* CHAT */

.family-chat-card {
    overflow:
        hidden;
}


.chat-heading {
    padding:
        20px;

    border-bottom:
        1px solid var(--border);

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;
}


.chat-heading h2 {
    margin:
        5px 0 0;

    font-size:
        21px;
}


.chat-user {
    align-self:
        center;

    max-width:
        140px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    color:
        var(--muted);

    font-size:
        11px;
}


.chat-messages {
    height:
        440px;

    padding:
        17px;

    overflow-y:
        auto;

    background:
        #fafbfc;
}


.chat-empty {
    height:
        100%;

    display:
        grid;

    place-items:
        center;

    padding:
        25px;

    text-align:
        center;

    color:
        #969da8;

    font-size:
        12px;
}


.chat-message {
    margin-bottom:
        12px;

    padding:
        12px 13px;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        white;
}


.chat-message-header {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;
}


.chat-message-header strong {
    font-size:
        11px;
}


.chat-message-header span {
    color:
        #9ba0a9;

    font-size:
        9px;
}


.chat-message p {
    margin:
        6px 0 0;

    color:
        #515864;

    font-size:
        12px;

    line-height:
        1.55;

    word-break:
        break-word;
}


.chat-form {
    padding:
        14px;

    border-top:
        1px solid var(--border);

    display:
        grid;

    gap:
        9px;
}


.chat-form textarea {
    width:
        100%;

    min-height:
        72px;

    resize:
        none;

    padding:
        12px;

    border:
        1px solid var(--border);

    border-radius:
        13px;

    outline:
        0;
}


.chat-form textarea:focus {
    border-color:
        rgba(182,143,48,.60);

    box-shadow:
        0 0 0 3px
        rgba(214,181,95,.10);
}


.chat-form button {
    min-height:
        42px;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    font-weight:
        800;

    cursor:
        pointer;
}


.viewer-help-card {
    padding:
        20px;
}


.viewer-help-card h3 {
    margin:
        8px 0;

    font-size:
        17px;
}


.viewer-help-card p {
    margin:
        0;

    color:
        var(--muted);

    line-height:
        1.6;

    font-size:
        12px;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .family-access-page,
    .viewer-layout {
        grid-template-columns:
            1fr;
    }

    .family-access-visual {
        min-height:
            430px;
    }

    .viewer-sidebar {
        position:
            static;
    }

    .chat-messages {
        height:
            330px;
    }
}


@media (max-width: 650px) {

    .family-main {
        width:
            min(94vw, 100%);

        padding-top:
            20px;
    }

    .family-topbar {
        padding:
            0 4vw;
    }

    .family-access-panel {
        padding:
            30px 22px;
    }

    .family-access-visual-content {
        left:
            7%;

        right:
            7%;
    }

    .viewer-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .viewer-info-grid {
        grid-template-columns:
            1fr;
    }

    .family-footer {
        flex-direction:
            column;
    }
}

/* =========================================================
   FAMILY RECORDINGS V1
   ========================================================= */

.family-recordings-panel {
    margin-top: 22px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 10px 34px
        rgba(20,24,33,.06);
}

.family-recordings-heading h2 {
    margin: 7px 0 6px;
    font-size: 28px;
    letter-spacing: -.035em;
}

.family-recordings-heading p {
    margin: 0;
    color: var(--muted);
}

.family-recordings-list {
    margin-top: 20px;
    display: grid;
    gap: 18px;
}

.family-recording-item {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #f8f9fb;
}

.family-recording-item-heading {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.family-recording-item-heading strong {
    font-size: 14px;
}

.family-recording-item-heading span {
    color: var(--muted);
    font-size: 11px;
}

.family-recording-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: 15px;
    background: #080b10;
}

/* =========================================================
   FAMILY DYNAMIC SETTINGS V1
   ========================================================= */

.family-welcome-message {
    margin: 14px 0 18px;
    padding: 14px 16px;
    border: 1px solid #ece7d8;
    border-radius: 14px;
    background: #fcfaf4;
    color: #62605a;
    font-size: 12px;
    line-height: 1.65;
}