/* ===================== 全局基础重置 ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", PingFang SC, system-ui, sans-serif;
}
body {
    background: #0F111A;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}
a {
    text-decoration: none;
    color: inherit;
}
input, select, textarea, button {
    outline: none;
    font-family: inherit;
    font-size: inherit;
}
ul, li {
    list-style: none;
}

/* ===================== 全局色彩变量 ===================== */
:root {
    --color-main: #3624E9;
    --color-light-purple: #7B61FF;
    --color-success: #00C48C;
    --color-danger: #FF4D4F;
    --color-warning: #FF9500;
    --color-bg-page: #0F111A;
    --color-bg-card: rgba(22, 26, 42, 0.75);
    --color-border-glass: rgba(123, 97, 255, 0.18);
    --text-white: #FFFFFF;
    --text-gray: #B4B9D3;
    --text-desc: #72799C;
    --radius-base: 12px;
    --radius-btn: 8px;
    --shadow-glass: 0 4px 20px rgba(54, 36, 233, 0.1);
    --transition-fast: all 0.2s ease;
}

/* ===================== 玻璃卡片 ===================== */
.glass-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 22px;
    margin-bottom: 24px;
}
.glass-card-sm {
    padding: 16px;
}

/* ===================== 按钮 ===================== */
.btn {
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--color-main), var(--color-light-purple));
    color: #fff;
}
.btn-primary:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border-glass);
    color: var(--text-white);
}
.btn-outline:hover {
    background: rgba(123, 97, 255, 0.12);
}
.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-success {
    background: var(--color-success);
    color: #fff;
}
.btn-warning {
    background: var(--color-warning);
    color: #fff;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}
.btn-block {
    width: 100%;
}

/* ===================== 表单 ===================== */
.form-row {
    margin: 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.form-label {
    width: 130px;
    color: var(--text-gray);
}
.form-input, .form-select, .form-textarea {
    flex: 1;
    min-width: 260px;
    padding: 10px 14px;
    background: rgba(30, 35, 58, 0.6);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-btn);
    color: var(--text-white);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-light-purple);
    box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.2);
}
.form-textarea {
    min-height: 70px;
    resize: vertical;
}

/* ===================== 状态标签 ===================== */
.tag {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}
.tag-success {
    background: rgba(0, 196, 140, 0.15);
    color: var(--color-success);
}
.tag-purple {
    background: rgba(123, 97, 255, 0.15);
    color: var(--color-light-purple);
}
.tag-warning {
    background: rgba(255, 149, 0, 0.15);
    color: var(--color-warning);
}
.tag-danger {
    background: rgba(255, 77, 79, 0.15);
    color: var(--color-danger);
}
.tag-gray {
    background: rgba(114, 121, 156, 0.15);
    color: var(--text-desc);
}

/* ===================== 表格 ===================== */
.table-wrap {
    overflow-x: auto;
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th, .table td {
    padding: 13px 10px;
    text-align: center;
    border-bottom: 1px solid var(--color-border-glass);
}
.table th {
    background: rgba(30, 35, 58, 0.5);
    color: var(--text-gray);
    font-weight: 500;
}
.table tr:hover td {
    background: rgba(123, 97, 255, 0.08);
}

/* ===================== 顶部导航 ===================== */
.top-nav-bar {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-base);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.top-nav-bar a {
    padding: 8px 14px;
    border-radius: var(--radius-btn);
    transition: var(--transition-fast);
}
.top-nav-bar a.active {
    background: linear-gradient(135deg, var(--color-main), var(--color-light-purple));
}
.top-nav-bar a:hover:not(.active) {
    background: rgba(123, 97, 255, 0.12);
}
.top-nav-bar a.danger {
    background: rgba(255, 77, 79, 0.18);
    color: var(--color-danger);
}

/* ===================== 弹窗 ===================== */
.modal-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.modal-box {
    width: min(90%, 520px);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-base);
    backdrop-filter: blur(10px);
    padding: 26px;
    position: relative;
}
.modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 22px;
    color: var(--text-desc);
    cursor: pointer;
}
.modal-title {
    font-size: 18px;
    margin-bottom: 18px;
    padding-left: 10px;
    border-left: 4px solid var(--color-light-purple);
}

/* ===================== 加载动画 ===================== */
.load-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,17,26,0.75);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.load-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(123,97,255,0.2);
    border-top-color: var(--color-light-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {transform: rotate(360deg);}
}

/* ===================== 提示浮窗 ===================== */
.msg-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 18px;
    border-radius: var(--radius-btn);
    z-index: 10001;
    backdrop-filter: blur(6px);
}
.msg-success {
    background: rgba(0,196,140,0.2);
    border:1px solid var(--color-success);
    color:#fff;
}
.msg-error {
    background: rgba(255,77,79,0.2);
    border:1px solid var(--color-danger);
    color:#fff;
}
.msg-warn {
    background: rgba(255,149,0,0.2);
    border:1px solid var(--color-warning);
    color:#fff;
}

/* ===================== 排钟大屏样式 ===================== */
.screen-page {
    padding: 0;
}
.screen-header {
    text-align: center;
    padding: 20px;
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(90deg, var(--color-main), var(--color-light-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 16px;
    padding: 20px;
}
.room-block {
    padding: 30px 10px;
    text-align: center;
    border-radius: var(--radius-base);
    font-size: 20px;
    font-weight: bold;
}
.room-free {
    background: rgba(0,196,140,0.18);
    border:2px solid var(--color-success);
}
.room-working {
    background: rgba(123,97,255,0.18);
    border:2px solid var(--color-light-purple);
}
.room-queue {
    background: rgba(255,149,0,0.18);
    border:2px solid var(--color-warning);
}
.room-time-flash {
    animation: flash 1s infinite alternate;
}
@keyframes flash {
    from {box-shadow:0 0 8px var(--color-danger);}
    to {box-shadow:0 0 22px var(--color-danger);}
}

/* ===================== 移动端适配 ===================== */
@media (max-width:768px) {
    .form-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-label {
        width: 100%;
        margin-bottom:6px;
    }
    .form-input, .form-select {
        width:100%;
        min-width: unset;
    }
    .top-nav-bar {
        gap:8px;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom:8px;
    }
    .glass-card {
        padding:16px;
    }
    .room-grid {
        grid-template-columns: repeat(2,1fr);
        gap:10px;
        padding:10px;
    }
    .screen-header {
        font-size:24px;
        padding:12px;
    }
}

/* ===================== 手机底部tab导航 ===================== */
.bottom-tab-bar {
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    background: var(--color-bg-card);
    border-top:1px solid var(--color-border-glass);
    padding:8px 0;
    z-index:99;
}
.bottom-tab-item {
    flex:1;
    text-align:center;
    padding:6px 0;
    color: var(--text-desc);
    font-size:12px;
}
.bottom-tab-item.active {
    color: var(--color-light-purple);
}
body.has-bottom-tab {
    padding-bottom:70px;
}

/* ===================== 表格文字颜色（修复白色不可见） ===================== */
.table td { color: #FFFFFF; }
.table th { color: var(--text-gray, #B4B9D3); }

/* ===================== 新功能通用组件样式 ===================== */
.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.plat-card { background: var(--color-bg-card); border: 1px solid var(--color-border-glass); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; color: var(--text-gray); text-decoration: none; }
.plat-card.active { border-color: var(--color-light-purple); color: #FFFFFF; }
.plat-card .icon { font-size: 28px; margin-bottom: 8px; }
.form-inline { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.form-inline input, .form-inline select, .form-inline textarea { padding: 10px; background: #1a1e30; border: 1px solid var(--color-border-glass); border-radius: 8px; color: #FFFFFF; }
.form-inline textarea { min-height: 80px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; color: var(--text-gray); font-size: 13px; margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; background: #1a1e30; border: 1px solid var(--color-border-glass); border-radius: 10px; color: #FFFFFF; }
.date-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.date-nav a { padding: 8px 14px; background: var(--color-bg-card); border: 1px solid var(--color-border-glass); border-radius: 8px; color: #FFFFFF; text-decoration: none; }
.cur-date { color: #FFFFFF; font-size: 18px; font-weight: 600; }
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.sum-card { background: var(--color-bg-card); border: 1px solid var(--color-border-glass); border-radius: 12px; padding: 20px; text-align: center; }
.sum-card .num { font-size: 24px; font-weight: 700; margin-top: 6px; }