* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/*
 * 告诉浏览器：
 * 本页面自己控制颜色，不跟随 Android 系统深色主题切换。
 */
:root {
    color-scheme: only light;
}

html,
body,
input,
textarea,
button,
select {
    color-scheme: only light;
}



html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        "PingFang SC",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #70757a 0%,
            #5f6469 100%
        );

    color: #f3f3f3;

    overscroll-behavior: none;
}


/* =====================================================
   页面
===================================================== */

.page {
    width: 100%;

    max-width: 760px;

    min-height: 100vh;

    margin: 0 auto;

    padding:
        7px
        7px
        8px;

    display: flex;

    flex-direction: column;
}


@supports (min-height: 100svh) {

    .page {
        min-height: 100svh;
    }
}


/* =====================================================
   顶部
===================================================== */

.topbar {
    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        44px;

    align-items: center;

    min-height: 36px;
}


.topbar-side {
    min-width: 0;
}


/* =====================================================
   标题
   完整显示，不省略
===================================================== */

.page-title {
    min-width: 0;

    text-align: center;

    padding:
        4px
        5px;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1.35;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    white-space: normal;

    overflow: visible;

    text-overflow: clip;

    overflow-wrap: anywhere;
}


/* =====================================================
   日期切换
===================================================== */

.event-tabs {
    display: grid;

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

    gap: 6px;

    margin:
        4px
        1px
        5px;
}


.event-tab {
    min-width: 0;

    height: 37px;

    padding:
        0
        6px;

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

    border-radius: 10px;

    background:
        rgba(
            40,
            44,
            48,
            .17
        );

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

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform .10s,
        background .13s,
        color .13s,
        border-color .13s;
}


.event-tab:active {
    transform:
        scale(.97);
}


.event-tab.selected {
    border-color:
        rgba(
            255,
            255,
            255,
            .42
        );

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

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

    box-shadow:
        inset
        0 -2px 0
        rgba(
            255,
            255,
            255,
            .42
        );
}


/* =====================================================
   pageNote
   12px + 换行
===================================================== */

.page-note {
    margin-bottom: 6px;

    padding:
        3px
        8px
        6px;

    text-align: center;

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

    font-size: 12px;

    line-height: 1.45;

    white-space: pre-line;

    overflow-wrap: anywhere;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;
}


.editable-meta:active {
    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    border-radius: 8px;
}


/* =====================================================
   三队
===================================================== */

.teams {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 7px;

    min-height: 0;
}


.team {
    position: relative;

    flex: 1;

    min-height: 150px;

    overflow: hidden;

    padding:
        15px
        9px
        10px;

    background:
        rgba(
            61,
            65,
            69,
            .72
        );

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

    border-radius: 14px;

    box-shadow:
        0 5px 17px
        rgba(
            0,
            0,
            0,
            .11
        ),
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .04
        );
}


/* =====================================================
   队名暗影
===================================================== */

.team-watermark {
    position: absolute;

    z-index: 0;

    right: 13px;

    bottom: -5px;

    font-size: 58px;

    font-weight: 900;

    letter-spacing: -4px;

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

    text-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            .22
        );

    pointer-events: none;

    user-select: none;
}


.team-black
.team-watermark {
    color:
        rgba(
            0,
            0,
            0,
            .18
        );

    text-shadow:
        0 1px 1px
        rgba(
            255,
            255,
            255,
            .08
        );
}


/* =====================================================
   人数
===================================================== */

.team-count {
   left: 12px;
right: auto;
display: inline-block;
width: auto;
white-space: nowrap;

    padding:
        3px
        7px;

    border-radius: 999px;

    background:
        rgba(
            0,
            0,
            0,
            .09
        );

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

    font-size: 10px;
}


/* =====================================================
   成员列表
===================================================== */

.member-list {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    align-items: center;

    gap:
        7px
        6px;

    padding-top: 10px;
}


/* =====================================================
   成员
===================================================== */

.member {
    display: inline-flex;

    align-items: center;

    min-height: 40px;

    padding:
        5px
        8px
        5px
        5px;

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

    border-radius: 12px;

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

    box-shadow:
        0 2px 6px
        rgba(
            0,
            0,
            0,
            .07
        );

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    transition:
        transform .11s ease,
        background .11s ease;
}


.member:active {
    transform:
        scale(.965);

    background:
        rgba(
            255,
            255,
            255,
            .14
        );
}


/* =====================================================
   衣服图标
===================================================== */

.member-color {
    width: 30px;

    height: 30px;

    flex:
        0 0
        30px;

    margin-right: 6px;

    border-radius: 8px;

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

    box-shadow:
        0 1px 4px
        rgba(
            0,
            0,
            0,
            .24
        ),
        inset
        0 0 0 1px
        rgba(
            0,
            0,
            0,
            .08
        );
}


/* =====================================================
   昵称
===================================================== */

.member-name {
    max-width: 110px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

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

    font-size: 15px;

    font-weight: 600;
}


/* =====================================================
   性别
===================================================== */

.member-gender {
    position: relative;

    top: -1px;

    margin-left: 5px;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;
}


.member-gender.male {
    color:
        rgba(
            120,
            200,
            255,
            .82
        );
}


.member-gender.female {
    color:
        rgba(
            255,
            160,
            210,
            .86
        );
}


/* =====================================================
   场次
===================================================== */

.member-games {
    margin-left: 6px;

    padding:
        3px
        5px;

    border-radius: 6px;

    background:
        rgba(
            0,
            0,
            0,
            .11
        );

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

    font-size: 10px;

    white-space: nowrap;
}


/* =====================================================
   添加
===================================================== */

.add-member {
    min-height: 40px;

    padding:
        0
        11px;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            .25
        );

    border-radius: 12px;

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

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

    font-size: 12px;

    cursor: pointer;
}


.add-member:active {
    transform:
        scale(.96);

    background:
        rgba(
            255,
            255,
            255,
            .10
        );
}


/* =====================================================
   Overlay
===================================================== */

.overlay {
    display: none;

    position: fixed;

    z-index: 1000;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    padding: 14px;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            31,
            34,
            37,
            .61
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.overlay.show {
    display: flex;
}


/* =====================================================
   Dialog
===================================================== */

.dialog {
    width: 100%;

    max-width: 420px;

    max-height:
        calc(
            100vh - 28px
        );

    overflow-y: auto;

    background: #f4f4f3;

    color: #292c2f;

    border-radius: 18px;

    box-shadow:
        0 22px 55px
        rgba(
            0,
            0,
            0,
            .34
        );

    animation:
        dialogIn
        .15s
        ease-out;
}


@keyframes dialogIn {

    from {
        opacity: 0;

        transform:
            translateY(6px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.dialog-head {
    padding:
        17px
        18px
        9px;
}


.dialog-title {
    font-size: 19px;

    font-weight: 700;
}


.dialog-sub {
    margin-top: 4px;

    color: #858585;

    font-size: 12px;

    line-height: 1.45;
}


.dialog-body {
    padding:
        2px
        18px
        18px;
}


/* =====================================================
   输入
===================================================== */

.field-label {
    display: block;

    margin:
        13px
        0
        6px;

    color: #60656a;

    font-size: 12px;

    font-weight: 650;
}


.text-input {
    width: 100%;

    height: 44px;

    padding:
        0
        12px;

    border:
        1px solid
        #d4d5d6;

    outline: none;

    border-radius: 10px;

    background: #fff;

    color: #222;

    font-size: 16px;

    transition:
        border-color .15s,
        box-shadow .15s;
}


.text-input:focus {
    border-color: #737b84;

    box-shadow:
        0 0 0 3px
        rgba(
            80,
            90,
            100,
            .10
        );
}


/* =====================================================
   场次 + 性别
===================================================== */

.member-basic-row {
    display: flex;

    align-items: flex-end;

    gap: 9px;
}


.basic-field {
    min-width: 0;
}


.games-field {
    flex: 1;
}


.gender-field {
    flex:
        0 0
        126px;
}


.games-input-wrap {
    position: relative;
}


.games-input {
    padding-right: 42px;
}


.games-unit {
    position: absolute;

    right: 12px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #929292;

    font-size: 13px;
}


/* =====================================================
   性别
===================================================== */

.gender-options {
    height: 44px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 5px;
}


.gender-option {
    border:
        1px solid
        #d4d5d6;

    border-radius: 10px;

    background: #fff;

    color: #595d61;

    font-size: 13px;

    font-weight: 650;

    cursor: pointer;
}


.gender-option:active {
    transform:
        scale(.96);
}


.gender-option.selected {
    border:
        2px solid
        #59626b;

    background:
        #e5e8ea;

    color: #272a2d;
}


.gender-symbol {
    margin-right: 2px;

    font-size: 15px;

    font-weight: 600;
}


.male-symbol {
    color:
        rgb(
            85,
            175,
            240
        );
}


.female-symbol {
    color:
        rgb(
            240,
            115,
            180
        );
}


/* =====================================================
   原衣服 + 队服
===================================================== */

.shirt-main-options {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 6px;
}


.shirt-option,
.uniform-trigger {
    min-width: 0;

    height: 58px;

    padding:
        4px
        2px;

    border:
        1px solid
        #d7d8d9;

    border-radius: 11px;

    background: #fff;

    color: #444;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;
}


.shirt-option:active,
.uniform-trigger:not(:disabled):active {
    transform:
        scale(.96);
}


.shirt-option.selected {
    border:
        2px solid
        #525b64;

    background:
        #e8eaec;
}


.shirt-preview {
    display: block;

    width: 19px;

    height: 19px;

    margin:
        0
        auto
        4px;

    border-radius: 5px;
}


.preview-black {
    background: #111;

    border:
        1px solid
        #777;
}


.preview-white {
    background: #fff;

    border:
        1px solid
        #999;
}


.preview-color {
    background:
        linear-gradient(
            135deg,
            #ef5350,
            #ffc107,
            #42a5f5,
            #66bb6a
        );
}


/* =====================================================
   穿队服按钮
===================================================== */

.uniform-trigger {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;
}


.uniform-trigger:disabled {
    cursor: default;

    color: #aaa;

    border-color: #dedede;

    background: #e7e7e7;

    opacity: .72;
}


.uniform-trigger.enabled {
    color: #41464b;

    background: #fafafa;
}


.uniform-trigger.has-uniform {
    border:
        2px solid
        #59626b;

    background: #e8eaec;
}


.uniform-trigger-title {
    font-size: 12px;

    font-weight: 700;
}


.uniform-trigger-state {
    font-size: 9px;

    color: #999;
}


.uniform-trigger.has-uniform
.uniform-trigger-state {
    color: #59626b;

    font-weight: 650;
}


/* =====================================================
   自定义衣服颜色
===================================================== */

.custom-color {
    display: none;

    align-items: center;

    justify-content: space-between;

    margin-top: 9px;

    padding:
        8px
        10px;

    border-radius: 10px;

    background: #e7e9ea;

    color: #686868;

    font-size: 12px;
}


.custom-color.show {
    display: flex;
}


.custom-color-right {
    display: flex;
    align-items: center;
    gap: 7px;
}


/*
 * 独立预览。
 * 这个才作为“实际保存颜色”的可信显示。
 */
.custom-color-preview {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border: 1px solid #8e9296;
    border-radius: 8px;

    background: #2196f3;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        0 1px 3px rgba(0,0,0,.12);

    forced-color-adjust: none;
}


/*
 * 重置 Android / Chrome 对颜色输入框的系统主题样式。
 */
.custom-color input[type="color"] {
    width: 48px;
    height: 36px;

    padding: 0;

    border: 1px solid #aaa;
    border-radius: 8px;

    background: transparent;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;

    overflow: hidden;

    color-scheme: only light;

    forced-color-adjust: none;
}


.custom-color input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}


.custom-color input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 7px;
}

/* =====================================================
   队服选择
===================================================== */

.uniform-panel {
    display: none;

    margin-top: 9px;

    padding: 10px;

    border:
        1px solid
        #d8dade;

    border-radius: 12px;

    background: #e9ebed;
}


.uniform-panel.show {
    display: block;
}


.uniform-panel-title {
    margin-bottom: 7px;

    color: #5f656a;

    font-size: 12px;

    font-weight: 650;
}


.uniform-options {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 6px;
}


.uniform-option {
    height: 51px;

    border:
        1px solid
        #d0d2d4;

    border-radius: 10px;

    background: #fff;

    color: #444;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;
}


.uniform-option:active {
    transform:
        scale(.96);
}


.uniform-option.selected {
    border:
        2px solid
        #59626b;

    background: #f6f7f7;
}


.uniform-preview {
    display: block;

    width: 18px;

    height: 18px;

    margin:
        0
        auto
        4px;

    border-radius: 5px;
}


.uniform-white {
    background: #fff;

    border:
        1px solid
        #999;
}


.uniform-black {
    background: #111;

    border:
        1px solid
        #777;
}


.uniform-neon {
    background: #b7ff2a;

    border:
        1px solid
        #82b41d;
}


.remove-uniform-btn {
    display: none;

    width: 100%;

    height: 30px;

    margin-top: 7px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #85898d;

    font-size: 11px;

    cursor: pointer;
}


.remove-uniform-btn.show {
    display: block;
}


/* =====================================================
   底部按钮
===================================================== */

.dialog-actions {
    display: flex;

    gap: 8px;

    padding:
        12px
        18px
        17px;

    border-top:
        1px solid
        #dedede;
}


.dialog-btn {
    height: 43px;

    flex: 1;

    border: 0;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 650;

    cursor: pointer;
}


.cancel-btn {
    background: #e3e5e6;

    color: #333;
}


.save-btn {
    background: #454d55;

    color: #fff;
}


.delete-btn {
    display: none;

    flex:
        0 0
        70px;

    background: #f2dddd;

    color: #a83636;
}


/* =====================================================
   文本编辑
===================================================== */

.text-dialog {
    max-width: 440px;
}


.meta-textarea {
    width: 100%;

    min-height: 135px;

    resize: vertical;

    padding: 11px;

    border:
        1px solid
        #d4d5d6;

    border-radius: 10px;

    outline: none;

    font-family: inherit;

    font-size: 15px;

    line-height: 1.55;
}


/* =====================================================
   管理员窗口
===================================================== */

.admin-dialog {
    max-width: 470px;
}


.admin-event-row {
    display: flex;

    gap: 10px;

    margin-top: 12px;

    padding:
        12px;

    border:
        1px solid
        #dedfe1;

    border-radius: 12px;

    background: #fff;
}


.admin-event-number {
    width: 27px;

    height: 27px;

    flex:
        0 0
        27px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 18px;

    border-radius: 50%;

    background: #555e67;

    color: #fff;

    font-size: 12px;

    font-weight: 700;
}


.admin-event-fields {
    min-width: 0;

    flex: 1;
}


.admin-mini-label {
    display: block;

    margin-bottom: 5px;

    color: #777;

    font-size: 10px;

    font-weight: 650;
}


.admin-label-gap {
    margin-top: 8px;
}


.admin-id-input {
    font-family:
        Consolas,
        monospace;

    letter-spacing: 1px;
}


.admin-tip {
    margin:
        10px
        3px
        0;

    color: #8a8d90;

    font-size: 10px;

    line-height: 1.5;
}


/* =====================================================
   管理员危险区域
===================================================== */

.admin-danger-zone {
    margin-top: 16px;

    padding: 13px;

    border:
        1px solid
        #ebcccc;

    border-radius: 12px;

    background: #faf1f1;
}


.admin-danger-title {
    color: #9a6969;

    font-size: 10px;

    font-weight: 650;
}


.admin-current-day {
    margin:
        4px
        0
        10px;

    color: #473b3b;

    font-size: 15px;

    font-weight: 700;
}


.admin-clear-day-btn {
    width: 100%;

    height: 39px;

    border:
        1px solid
        #dfb6b6;

    border-radius: 9px;

    background: #f4dddd;

    color: #a13e3e;

    font-size: 13px;

    font-weight: 650;

    cursor: pointer;
}


.admin-clear-day-btn:active {
    transform:
        scale(.98);
}


.admin-clear-note {
    margin-top: 6px;

    text-align: center;

    color: #9c7a7a;

    font-size: 9px;
}


/* =====================================================
   Toast
===================================================== */

.toast {
    position: fixed;

    z-index: 3000;

    left: 50%;

    bottom: 25px;

    max-width:
        calc(
            100% - 30px
        );

    padding:
        9px
        14px;

    border-radius: 9px;

    background:
        rgba(
            27,
            29,
            32,
            .94
        );

    color: #fff;

    font-size: 12px;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(8px);

    transition:
        opacity .16s,
        transform .16s;
}


.toast.show {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =====================================================
   手机
===================================================== */

@media (
    max-width: 520px
) {

    .page {
        padding:
            5px
            6px
            7px;
    }


    .topbar {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            30px;
    }


    .page-title {
        font-size: 18px;

        line-height: 1.3;
    }


    .event-tabs {
        gap: 5px;
    }


    .event-tab {
        height: 36px;

        padding:
            0
            3px;

        font-size: 11px;
    }


    .page-note {
        font-size: 12px;
    }


    .teams {
        gap: 6px;
    }


    .team {
        min-height: 145px;

        padding:
            13px
            7px
            9px;

        border-radius: 13px;
    }


    .team-watermark {
        right: 9px;

        bottom: -2px;

        font-size: 52px;
    }


    .member-list {
        gap:
            6px
            5px;

        padding-top: 9px;
    }


    .member {
        min-height: 38px;

        padding:
            4px
            6px
            4px
            4px;
    }


    .member-color {
        width: 28px;

        height: 28px;

        flex-basis: 28px;

        margin-right: 5px;
    }


    .member-name {
        max-width: 87px;

        font-size: 14px;
    }


    .member-gender {
        margin-left: 4px;

        font-size: 12px;
    }


    .member-games {
        margin-left: 4px;

        padding:
            3px
            4px;

        font-size: 10px;
    }


    .add-member {
        min-height: 38px;

        padding:
            0
            9px;
    }


    .member-basic-row {
        gap: 8px;
    }


    .gender-field {
        flex-basis: 112px;
    }


    .shirt-main-options {
        gap: 5px;
    }


    .shirt-option,
    .uniform-trigger {
        height: 56px;
    }


    .uniform-options {
        gap: 5px;
    }


    .uniform-option {
        height: 49px;
    }


    .admin-event-row {
        padding: 10px;

        gap: 8px;
    }
}


/* =====================================================
   PC
===================================================== */

@media (
    min-width: 800px
) {

    .team {
        min-height: 190px;
    }


    .team-watermark {
        font-size: 72px;
    }
}



/* =====================================================
   管理员：换成新活动
===================================================== */

.admin-replace-btn {
    width: 100%;
    height: 32px;

    margin-top: 8px;

    border:
        1px solid
        #d4d7da;

    border-radius: 8px;

    background: #eef0f2;

    color: #697077;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .12s,
        transform .10s;
}


.admin-replace-btn:hover {
    background: #e5e8ea;
}


.admin-replace-btn:active {
    transform: scale(.98);

    background: #dde1e4;
}




/* =====================================================
   迟到时间
===================================================== */

.member-late {
    margin-left: 6px;

    padding:
        3px
        6px;

    border:
        1px solid
        rgba(
            255,
            177,
            92,
            .30
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            145,
            50,
            .13
        );

    color: #ffc17a;

    font-size: 10px;

    font-weight: 650;

    line-height: 1;

    white-space: nowrap;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .05
        );
}


@media (
    max-width: 520px
) {

    .member-late {
        margin-left: 4px;

        padding:
            3px
            5px;

        font-size: 9px;
    }
}

/* =====================================================
   迟到
===================================================== */

.optional-text {
    margin-left: 4px;

    color: #9b9fa3;

    font-size: 10px;

    font-weight: 400;
}


.member-late {
    margin-left: 6px;

    padding:
        3px
        6px;

    border:
        1px solid
        rgba(
            255,
            173,
            78,
            .32
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            146,
            43,
            .14
        );

    color: #ffc078;

    font-size: 10px;

    font-weight: 650;

    line-height: 1;

    white-space: nowrap;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .05
        );
}


@media (max-width: 520px) {

    .member-late {
        margin-left: 4px;

        padding:
            3px
            5px;

        font-size: 9px;
    }
}



/* =====================================================
   新手成员：少于11场
===================================================== */

.member-games.low-games {
    padding: 2px 5px;

    border: 1px solid rgba(255, 92, 92, .32);
    border-radius: 999px;

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

    color: #ff7777;

    font-weight: 700;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* 输入框占位文字：更小、更淡 */
/* 输入框占位文字：更小、更淡 */
.text-input::placeholder {
    font-size: 11px;
    color: rgba(255, 255, 255, .32);
    opacity: 1;
}

.text-input::placeholder {
    font-size: 11px;
    color: rgba(80, 80, 80, .42);
    opacity: 1;
}

.power-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.power-reference {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    opacity: .55;
}

.team {
    padding-top: 8px;
}

.team-count {
    top: 9px;
    right: 12px;

    font-size: 11px;
    line-height: 1.2;

    white-space: nowrap;

    opacity: .72;
}

/* =====================================================
   成员序号
   很淡，只作为辅助识别
===================================================== */

.member-color {
    position: relative;
}

.member-number {
    position: absolute;

    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;

    color: #ffffff;

    opacity: .54;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .90),
        0 0 2px rgba(0, 0, 0, .60);

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
}


/* =====================================================
   迟到 / 替补
===================================================== */

.attendance-extra-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 14px;
}

.attendance-extra-item {
    min-width: 0;
}


/* =====================================================
   两边标题区域保持一样高
===================================================== */

.attendance-extra-head {
    min-height: 42px;

    margin-bottom: 6px;
}

.attendance-extra-title {
    font-size: 13px;
    line-height: 1.25;

    font-weight: 600;

    color: #5c6268;
}

.attendance-extra-title .optional-text {
    margin-left: 4px;

    font-size: 10px;
    font-weight: 400;

    color: #a1a6ab;
}

.attendance-extra-note {
    margin-top: 3px;

    font-size: 10px;
    line-height: 1.2;

    font-weight: 400;

    color: #a5aaaf;

    white-space: nowrap;
}


/* =====================================================
   迟到输入框
===================================================== */

.attendance-input {
    width: 100%;
    height: 46px;

    box-sizing: border-box;
}


/* =====================================================
   替补按钮
===================================================== */

.standby-toggle {
    display: block;

    width: 100%;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
}


/* 隐藏原生 checkbox */
.standby-toggle input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* 正常未激活状态 */
.standby-toggle-box {
    width: 100%;
    height: 46px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid #ccd1d5;
    border-radius: 10px;

    background: #f7f8f9;

    color: #60666c;

    font-size: 13px;
    font-weight: 600;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


/* 左边的小圆点 */
.standby-toggle-icon {
    width: 18px;
    height: 18px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1.5px solid #aeb4ba;
    border-radius: 50%;

    color: transparent;

    font-size: 11px;
    font-weight: 800;

    background: #ffffff;
}



html:not(.access-granted) .page,html:not(.access-granted) #memberOverlay,html:not(.access-granted) #textOverlay,html:not(.access-granted) #adminOverlay,html:not(.access-granted) #toast{display:none!important}








/* =====================================================
   激活以后
===================================================== */

.standby-toggle input:checked
+
.standby-toggle-box {
    border-color: #e2a54e;

    background: #fff5e6;

    color: #b36d16;

    box-shadow:
        0 0 0 2px rgba(226, 165, 78, .10);
}

.standby-toggle input:checked
+
.standby-toggle-box
.standby-toggle-icon {
    border-color: #e2a54e;

    background: #e2a54e;

    color: #ffffff;
}


/* =====================================================
   状态文字切换
===================================================== */

.standby-text-on {
    display: none;
}

.standby-toggle input:checked
+
.standby-toggle-box
.standby-text-off {
    display: none;
}

.standby-toggle input:checked
+
.standby-toggle-box
.standby-text-on {
    display: inline;
}


/* =====================================================
   替补成员卡
===================================================== */

.member.is-standby {
    opacity: .36;
}
.note-link {

color: #5cb2ff;

text-decoration: underline;

text-decoration-style: dotted;
}
.note-link:active {

    opacity:.65;
}

/* 底部可编辑提示 */
.page-bottom-tip {

    text-align: center;

    margin-top: 20px;

    padding: 8px 0 15px;

    font-size: 12px;

    color: #b8bdc5;

    letter-spacing: .3px;

    user-select: none;

    cursor: pointer;

}


/* 双击反馈 */
.page-bottom-tip:active {

    opacity: .6;

}

.member-color {
    width: 7px !important;
    min-width: 7px !important;
    height: 25px !important;
    flex: 0 0 7px !important;
    padding: 0 !important;
    margin-right: 4px !important;
    border-radius: 3px !important;
    overflow: hidden;
}

.member-number {
    opacity: .10 !important;
    font-size: 6px !important;
}

/* =====================================================
   顶部标题真正使用接近整个屏幕宽度
===================================================== */

.topbar {
    width: 99vw !important;
    max-width: 99vw !important;

    margin-left:
        calc(
            50% - 49.5vw
        ) !important;

    display: block !important;
}

.topbar .topbar-side {
    display: none !important;
}

#pageTitle.page-title {
    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box;

    margin-left: 0 !important;
    margin-right: 0 !important;

    white-space: normal;
    overflow-wrap: break-word;
}



/* 性别符号跨平台垂直居中，修复 iPhone 基线偏移 */
.member-gender {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 1em;
    height: 1em;

    line-height: 1 !important;
    vertical-align: middle !important;

    font-family: Arial, "Helvetica Neue", sans-serif !important;

    position: relative;
    top: 0;
}

/* iPhone / Safari 再轻微向上校正 */
@supports (-webkit-touch-callout: none) {
    .member-gender {
        transform: translateY(-1px);
    }
}


html.access-granted #accessIcpFooter{display:none!important}