@charset "UTF-8";
/* ============================================================
 * common.css — 海南阳光采购平台·外部场地预约V2 全局样式
 * 视觉规范：政务深蓝头部 #0F5299 + 浅灰白渐变页面背景
 * ============================================================ */

/* ==================== Reset ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100vh;font-family:"Microsoft YaHei","微软雅黑","Source Han Sans CN",sans-serif;font-size:14px;color:#333;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{border:none;vertical-align:middle}
input,button,select,textarea{font-family:inherit;font-size:inherit;outline:none;border:none}

/* ==================== 全站背景：浅灰白渐变纯色 ==================== */
html,body{height:100%;margin:0;padding:0}
body{
  min-height:100vh;
  background:#F5F7FA;
  background:linear-gradient(180deg,#F5F7FA 0%,#EEF2F6 50%,#E5ECF3 100%);
  background-attachment:fixed;
}

/* ==================== 页面布局 ==================== */
.page-wrapper{
  display:flex;flex-direction:column;
  width:100%;min-height:100vh;
}

/* ==================== 头部导航（通栏深蓝 #0F5299 ==================== */
.site-header{
  width:100%;height:72px;display:flex;align-items:center;
  background:#0F5299;
  box-shadow:0 2px 8px rgba(15,82,153,.18);
}
.site-header .header-inner{
  width:1280px;max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
}
.site-header .logo-wrap{display:flex;align-items:center;gap:12px}
.site-header .logo-wrap img{height:auto;width:auto;max-width:100%}
.site-header .logo-wrap img.site-logo{height:auto;width:auto;max-width:100%;display:block;}
.site-header .logo-wrap .logo-text{
  color:#fff;font-size:20px;font-weight:700;letter-spacing:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.site-header .header-extra{display:flex;align-items:center;gap:16px}
.site-header .header-extra .back-link{
  color:#fff;font-size:14px;display:flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:20px;
  background:rgba(255,255,255,.15);
  transition:all .2s ease;cursor:pointer;font-weight:500;
  border:1px solid rgba(255,255,255,.2);
}
.site-header .header-extra .back-link:hover{
  color:#0F5299;background:#fff;border-color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.site-header .header-extra .back-link svg{width:16px;height:16px}

/* ==================== 面包屑 ==================== */
.breadcrumb{
  max-width:1280px;width:100%;margin:0 auto;padding:18px 32px 4px;
  font-size:13px;color:#888;display:flex;align-items:center;gap:2px;
}
.breadcrumb a{color:#555;transition:color .2s;font-weight:500}
.breadcrumb a:hover{color:#0F5299}
.breadcrumb .sep{color:#bbb;margin:0 6px;font-size:12px}
.breadcrumb>span{color:#888}

/* ==================== 页面主体 ==================== */
.page-main{flex:1 1 auto;max-width:1280px;width:100%;margin:0 auto;padding:20px 32px 56px;min-height:0}
.page-main-center{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:1280px;width:100%;
  margin:0 auto;
  padding:60px 32px 80px;
  min-height:500px;
}

/* ==================== 页面标题区 ==================== */
.page-title-area{
  max-width:1280px;width:100%;margin:0 auto;padding:28px 32px 0;
}
.page-title-area h2{
  font-size:22px;font-weight:700;color:#1a1a1a;letter-spacing:1px;
  display:flex;align-items:center;gap:10px;
}
.page-title-area h2::before{
  content:'';display:inline-block;width:4px;height:24px;
  background:linear-gradient(180deg,#0078E8,#00C2B8);border-radius:2px;
}
.page-title-area p{font-size:14px;color:#666;margin-top:6px;padding-left:14px}

/* ==================== 卡片（统一圆角12px） ==================== */
.card{
  background:#fff;border-radius:12px;
  box-shadow:0 2px 12px rgba(15,82,153,.06),0 0 0 1px rgba(0,0,0,.03);
  padding:28px;transition:box-shadow .3s ease,transform .3s ease;
}
.card:hover{box-shadow:0 6px 24px rgba(15,82,153,.10),0 0 0 1px rgba(0,0,0,.03)}

/* ==================== 按钮 ==================== */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 26px;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,#0078E8 0%,#00C2B8 100%);
  border:none;border-radius:12px;cursor:pointer;
  transition:all .25s ease;user-select:none;white-space:nowrap;letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(0,120,232,.2);
}
.btn-primary:hover{
  opacity:.94;box-shadow:0 4px 16px rgba(0,120,232,.32);
  transform:translateY(-1px);
}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled,.btn-primary.disabled{
  background:#c8ccd2;color:#fff;cursor:not-allowed;
  box-shadow:none;transform:none;opacity:1;
}

.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 26px;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,#FF9033 0%,#F23C57 100%);
  border:none;border-radius:12px;cursor:pointer;
  transition:all .25s ease;user-select:none;white-space:nowrap;
  box-shadow:0 2px 8px rgba(242,60,87,.2);
}
.btn-danger:hover{
  opacity:.94;box-shadow:0 4px 16px rgba(242,60,87,.32);
  transform:translateY(-1px);
}
.btn-danger:active{transform:scale(.97)}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 26px;font-size:14px;font-weight:500;color:#444;
  background:#fff;border:1px solid #d0d5dd;border-radius:12px;
  cursor:pointer;transition:all .25s ease;user-select:none;white-space:nowrap;
}
.btn-outline:hover{background:#f5f7fa;border-color:#0078E8;color:#0078E8}
.btn-outline:active{transform:scale(.97)}

.btn-sm{padding:6px 16px;font-size:12px;border-radius:8px}
.btn-xs{padding:4px 12px;font-size:11px;border-radius:6px}

/* 图标按钮 */
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;border:1px solid #e0e3e8;
  background:#fff;cursor:pointer;transition:all .2s ease;color:#666;
}
.btn-icon:hover{background:#f0f2f5;border-color:#c0c5cc;color:#333}
.btn-icon.danger{border-color:#E53E3E;color:#E53E3E}
.btn-icon.danger:hover{background:#fff0f0;border-color:#E53E3E;color:#E53E3E}
.btn-icon svg{width:15px;height:15px}

/* ==================== 状态标签 ==================== */
.tag-success{
  display:inline-block;padding:4px 16px;font-size:12px;font-weight:600;
  color:#fff;background:#28B862;border-radius:12px;letter-spacing:.5px;
  box-shadow:0 1px 4px rgba(40,184,98,.2);
}
.tag-danger{
  display:inline-block;padding:4px 16px;font-size:12px;font-weight:600;
  color:#fff;background:#E53E3E;border-radius:12px;letter-spacing:.5px;
  box-shadow:0 1px 4px rgba(229,62,62,.2);
}
.tag-info{
  display:inline-block;padding:3px 12px;font-size:12px;font-weight:500;
  color:#0078E8;background:#e8f4ff;border-radius:10px;
}
.tag-warning{
  display:inline-block;padding:3px 12px;font-size:12px;font-weight:500;
  color:#d97706;background:#fffbeb;border-radius:10px;
}
.tag-default{
  display:inline-block;padding:3px 12px;font-size:12px;font-weight:500;
  color:#666;background:#f0f1f3;border-radius:10px;
}

/* 占用标签 */
.tag-occupied{
  display:inline-block;padding:2px 8px;font-size:11px;font-weight:500;
  color:#fff;background:#F23C57;border-radius:4px;cursor:pointer;
  transition:all .2s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tag-occupied:hover{background:#d6304a;transform:scale(1.03)}

/* 已选标签 */
.tag-selected{
  display:inline-block;padding:2px 8px;font-size:11px;font-weight:600;
  color:#fff;background:#28B862;border-radius:4px;
}

/* ==================== 弹窗/遮罩 ==================== */
.mask-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.48);z-index:1000;backdrop-filter:blur(2px);
}
.modal-dialog{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:460px;max-width:92vw;max-height:90vh;overflow-y:auto;background:#fff;border-radius:12px;
  box-shadow:0 16px 56px rgba(0,0,0,.22);padding:32px 28px;z-index:1001;text-align:center;
}
.modal-dialog .modal-body{display:flex;flex-direction:column;align-items:center;gap:12px}

/* 大弹窗（场地选择） */
.modal-large{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;max-width:96vw;max-height:92vh;background:#fff;border-radius:12px;
  box-shadow:0 16px 56px rgba(0,0,0,.22);z-index:1001;overflow:hidden;
  flex-direction:column;}
.modal-large .modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid #eef0f3;flex-shrink:0;}
.modal-large .modal-header h3{font-size:17px;font-weight:700;color:#111}
.modal-large .modal-header .close-btn{
  width:34px;height:34px;border-radius:50%;border:none;background:#f0f1f3;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#666;transition:all .2s;}
.modal-large .modal-header .close-btn:hover{background:#e0e2e5;color:#333}
.modal-large .modal-body-scroll{flex:1;overflow:hidden;display:flex;flex-direction:column;padding:16px 28px}
.modal-large .modal-footer{
  padding:14px 28px;border-top:1px solid #eef0f3;display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-shrink:0;}

/* ==================== Toast ==================== */
.custom-toast{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border-radius:12px;box-shadow:0 16px 56px rgba(0,0,0,.22);
  padding:28px 36px;z-index:2000;text-align:center;min-width:300px;max-width:440px}
.custom-toast .toast-icon{margin-bottom:12px}
.custom-toast .toast-msg{font-size:15px;color:#333;margin-bottom:20px;line-height:1.7}

/* Optim#4 首页HTML内容弹窗（无标题+后端HTML+确定按钮） */
.html-popup{
  position:fixed;background:#fff;border-radius:12px;
  box-shadow:0 20px 60px rgba(15,50,90,.24);
  border:1px solid #E6EBF2;
}
.html-popup .html-popup-body img{max-width:100%;}
.html-popup .html-popup-body table{border-collapse:collapse;}
.html-popup .html-popup-body a{color:#0F5298;}

/* ==================== 时间段选择tooltip ==================== */
.time-range-popup{
  position:fixed;z-index:2100;background:#fff;border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.22);padding:22px 26px;min-width:280px;font-size:13px;
}
.time-range-popup .trp-title{font-size:15px;font-weight:700;color:#111;margin-bottom:16px;text-align:center}
.time-range-popup .trp-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.time-range-popup .trp-row label{font-weight:600;color:#555;min-width:52px;font-size:12px}
.time-range-popup .trp-row select{
  flex:1;height:38px;padding:0 10px;font-size:13px;border:1px solid #d0d5dd;border-radius:8px;
  background:#f8f9fb;cursor:pointer;}
.time-range-popup .trp-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.time-range-popup .trp-btns button{min-width:72px;border-radius:8px}

/* ==================== 详情标题条 ==================== */
.detail-title-bar{
  width:calc(100% + 56px);margin:-28px -28px 24px;
  padding:16px 28px;background:linear-gradient(90deg,#00C2B8 0%,#0078E8 100%);
  border-radius:12px 12px 0 0;text-align:center;
}
.detail-title-bar .title-text{font-size:18px;font-weight:700;color:#fff;letter-spacing:1px}
.detail-title-bar.bar-danger{background:linear-gradient(90deg,#FF9033 0%,#F23C57 100%)}

/* ==================== 详情表格 ==================== */
.detail-table{width:100%;border-collapse:separate;border-spacing:0}
.detail-table tr{
  border-bottom:1px solid #f0f1f3;
}
.detail-table tr:last-child{border-bottom:none}
.detail-table td{padding:15px 14px;vertical-align:middle}
.detail-table .label-col{width:130px;font-size:14px;color:#666;font-weight:500;text-align:right;white-space:nowrap;background:#fafbfc}
.detail-table .value-col{font-size:14px;color:#111;font-weight:500;padding-left:16px}
.fail-reason-row td{background:#FFF5F5}
.fail-reason-row .label-col{color:#E53E3E !important;background:#FFECEC !important}
.fail-reason-row .value-col{color:#E53E3E !important;font-weight:600 !important}

/* ==================== 表单 ==================== */
.form-group{margin-bottom:20px}
.form-group:last-child{margin-bottom:0}
.form-label{display:block;font-size:13px;font-weight:600;color:#444;margin-bottom:6px}
.form-label .required{color:#E53E3E;margin-left:2px}
.form-input{
  width:100%;height:44px;padding:0 14px;font-size:14px;color:#333;
  background:#f8f9fb;border:1px solid #e0e3e8;border-radius:10px;
  transition:all .25s ease;
}
.form-input::placeholder{color:#bbb}
.form-input:focus{background:#fff;border-color:#0078E8;box-shadow:0 0 0 3px rgba(0,120,232,.08)}
.form-input.error{border-color:#E53E3E;background:#FFF8F8}
textarea.form-input{height:84px;padding:10px 14px;resize:vertical;min-height:84px;border-radius:10px}
select.form-input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer;
}

.form-row{display:flex;gap:20px}
.form-row .form-group{flex:1}

/* ==================== 分区卡片 ==================== */
.section-card{
  background:#fff;border-radius:12px;
  box-shadow:0 1px 8px rgba(15,82,153,.04),0 0 0 1px rgba(0,0,0,.025);
  padding:26px;margin-bottom:20px;
}
.section-card .section-header{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;padding-bottom:16px;
  border-bottom:1px solid #f0f1f3;
}
.section-card .section-header .section-num{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#0078E8,#00C2B8);
  color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,120,232,.25);
}
.section-card .section-header h3{font-size:16px;font-weight:700;color:#111}
.section-card .section-header .section-actions{margin-left:auto;display:flex;gap:8px}

/* ==================== 标段表格 ==================== */
.section-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.section-table thead th{
  background:#f5f7fa;padding:12px 12px;text-align:left;font-weight:600;color:#555;
  border-bottom:2px solid #e8eaed;white-space:nowrap;font-size:12px;
}
.section-table thead th:last-child{text-align:center;width:80px}
.section-table tbody td{
  padding:10px 12px;border-bottom:1px solid #f0f1f3;vertical-align:middle;
}
.section-table tbody tr{transition:background .2s}
.section-table tbody tr:hover{background:#fafbfc}
.section-table tbody td:last-child{text-align:center}
.section-table .inline-input{
  width:100%;height:36px;padding:0 10px;font-size:13px;border:1px solid #e0e3e8;border-radius:6px;
  background:#fff;transition:border-color .2s;
}
.section-table .inline-input:focus{border-color:#0078E8;box-shadow:0 0 0 2px rgba(0,120,232,.06)}
.section-table .empty-row td{text-align:center;padding:36px;color:#aaa;font-size:13px}

/* ==================== 预约场地卡片 ==================== */
.venue-cards{display:flex;gap:24px}
.venue-cards .venue-col{flex:1}
.venue-card{
  background:#fff;border-radius:12px;border:2px dashed #d0d5dd;
  padding:24px;text-align:center;min-height:130px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:all .25s ease;cursor:pointer;
}
.venue-card:hover{border-color:#0078E8;background:#f8fbff}
.venue-card.filled{border-style:solid;border-color:#e0e3e8;background:#fafbfc;cursor:default;text-align:left;align-items:stretch}
.venue-card.filled:hover{border-color:#d0d5dd;background:#fafbfc}
.venue-card .venue-empty-icon{width:48px;height:48px;border-radius:50%;background:#f0f2f5;display:flex;align-items:center;justify-content:center;color:#999}
.venue-card .venue-empty-icon svg{width:24px;height:24px}
.venue-card .venue-empty-text{font-size:14px;color:#888;font-weight:500;margin-top:4px}
.venue-card .venue-info{display:flex;flex-direction:column;gap:8px}
.venue-card .venue-info .venue-name{font-size:15px;font-weight:700;color:#111}
.venue-card .venue-info .venue-time{font-size:13px;color:#666}
.venue-card .venue-info .venue-time span{color:#0078E8;font-weight:600}
.venue-card .venue-actions{display:flex;gap:8px;margin-top:8px}

/* ==================== 周历表格 ==================== */
.week-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.week-nav .week-label{font-size:15px;font-weight:700;color:#111}
.week-nav .week-btns{display:flex;gap:10px}
.week-nav .week-btns button{
  padding:7px 16px;font-size:12px;border-radius:8px;border:1px solid #d0d5dd;
  background:#fff;cursor:pointer;transition:all .2s ease;color:#555;font-weight:500;
}
.week-nav .week-btns button:hover{background:#f0f2f5;border-color:#a0a8b4}
.week-nav .week-btns button.active{background:#0078E8;color:#fff;border-color:#0078E8}

/* 搜索框 */
.venue-search-box{margin-bottom:16px}
.venue-search-box input{
  width:100%;height:40px;padding:0 14px;font-size:13px;border:1px solid #e0e3e8;border-radius:10px;
  transition:border-color .2s;
}
.venue-search-box input:focus{border-color:#0078E8;box-shadow:0 0 0 2px rgba(0,120,232,.06)}

/* 日历表 */
.calendar-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;table-layout:fixed}
.calendar-table thead th{
  background:#f5f7fa;padding:8px 2px;text-align:center;font-weight:600;color:#555;
  border:1px solid #e8eaed;white-space:nowrap;position:sticky;top:0;z-index:1;
}
.calendar-table thead th.room-col{min-width:110px;width:110px}
.calendar-table thead th.period-col{
  background:#EEF3FA;color:#0F5299;font-weight:700;font-size:12px;letter-spacing:2px;
}
.calendar-table thead th.day-col{width:calc((100% - 110px) / 7)}
.calendar-table thead th .date-num{font-size:13px;font-weight:700;color:#1a1a1a}
.calendar-table thead th .date-week{font-size:10px;color:#999}
.calendar-table thead th .period-label{font-size:10px;color:#888;font-weight:400}
.calendar-table thead th.today-col{background:#e8f4ff !important}
.calendar-table thead th.period-col.today-col{background:#EEF3FA !important}
.calendar-table tbody td{
  padding:4px 2px;border:1px solid #eee;vertical-align:middle;height:48px;text-align:center;position:relative;
}
.calendar-table tbody td.room-name{
  font-weight:600;color:#333;text-align:center;vertical-align:middle;
  background:#fafbfc;font-size:12px;width:110px;
}
.calendar-table tbody td.cell-available{cursor:pointer;transition:all .15s ease}
.calendar-table tbody td.cell-available:hover{background:#d4f5e4;box-shadow:inset 0 0 0 2px #28B862}
.calendar-table tbody td.cell-selected{background:#a8e6c1 !important;box-shadow:inset 0 0 0 2px #28B862 !important}
.calendar-table tbody td.cell-occupied{background:#ffe0e0;cursor:default}
.calendar-table tbody td.cell-disabled{background:#F0F1F3;cursor:not-allowed}
.calendar-table tbody td.cell-disabled .cell-locked{color:#C0C4CC;font-size:16px;font-weight:300;line-height:1;user-select:none;}
.calendar-table tbody td.today-col{background:#f0f6ff}
.calendar-table tbody td.cell-disabled.today-col{background:#EFF1F4}
.calendar-table .cell-content{display:flex;flex-direction:column;gap:2px;min-height:36px;align-items:center;justify-content:center}
.calendar-table .cell-add{color:#ccc;font-size:20px;font-weight:300;line-height:1}
.calendar-table td.cell-available:hover .cell-add{color:#28B862}

/* Q2修复：删除占用详情hover浮层所有样式（用户要求去掉悬停显示已预约项目信息功能） */

/* ==================== 首页功能卡片 ==================== */
.func-cards{display:flex;gap:40px;width:100%;max-width:960px;justify-content:center}
.func-card{
  flex:1;min-width:320px;max-width:440px;height:280px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .35s cubic-bezier(.25,.46,.45,.94);
  user-select:none;text-decoration:none;position:relative;overflow:hidden;
}
.func-card::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.25),transparent 60%);
  opacity:.6;pointer-events:none;
}
.func-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.func-card:active{transform:translateY(-4px)}
.func-card .card-icon{
  width:80px;height:80px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);border-radius:50%;transition:transform .35s ease;
  backdrop-filter:blur(4px);position:relative;z-index:1;
}
.func-card:hover .card-icon{transform:scale(1.15) rotate(-4deg)}
.func-card .card-icon svg{width:42px;height:42px;fill:#fff}
.func-card .card-title{font-size:24px;font-weight:700;color:#fff;letter-spacing:3px;position:relative;z-index:1}
.func-card .card-subtitle{font-size:14px;color:rgba(255,255,255,.95);margin-top:10px;letter-spacing:.5px;position:relative;z-index:1}
.card-reserve{
  background:linear-gradient(135deg,#FF9033 0%,#F23C57 100%);
  box-shadow:0 10px 32px rgba(242,60,87,.28);
}
.card-reserve:hover{box-shadow:0 20px 52px rgba(242,60,87,.42)}
.card-search{
  background:linear-gradient(135deg,#0078E8 0%,#00C2B8 100%);
  box-shadow:0 10px 32px rgba(0,120,232,.28);
}
.card-search:hover{box-shadow:0 20px 52px rgba(0,120,232,.42)}

/* ==================== 首页欢迎文字 ==================== */
.hero-text{text-align:center;margin-bottom:48px}
.hero-text h1{
  font-size:32px;font-weight:700;color:#1a1a1a;letter-spacing:3px;
  display:inline-flex;align-items:center;gap:18px;
  position:relative;
}
.hero-text h1::before,.hero-text h1::after{
  content:'';display:inline-block;width:50px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#0078E8,transparent);
}
.hero-text p{font-size:16px;color:#666;margin-top:12px;letter-spacing:1px}

/* ==================== 查询卡片 ==================== */
.search-card{width:100%;max-width:580px;margin:0 auto;text-align:center}
.search-card .card-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px}
.search-card .card-header svg{width:28px;height:28px;color:#0078E8}
.search-card .card-header h2{font-size:20px;font-weight:700;color:#111;letter-spacing:1px}
.search-card .tips{margin-top:22px;font-size:12px;color:#888;line-height:2;text-align:left;
  background:#f8f9fb;border-radius:10px;padding:16px 18px;border:1px solid #eef0f3}
.search-card .tips b{color:#0078E8;font-weight:600}
.search-card .btn-search{width:100%;height:50px;font-size:16px;font-weight:600;letter-spacing:3px;border-radius:12px}

.input-with-icon{position:relative;display:flex;align-items:center;margin-bottom:20px}
.input-with-icon .input-icon{position:absolute;left:16px;width:20px;height:20px;color:#999;pointer-events:none;z-index:1}
.input-with-icon input{
  width:100%;height:50px;padding:0 18px 0 48px;font-size:15px;color:#333;
  background:#f8f9fb;border:1px solid #e0e3e8;border-radius:12px;
  transition:all .25s ease;
}
.input-with-icon input::placeholder{color:#bbb}
.input-with-icon input:focus{background:#fff;border-color:#0078E8;box-shadow:0 0 0 3px rgba(0,120,232,.08)}

/* ==================== 详情卡片 ==================== */
.detail-card{width:100%;max-width:820px;margin:0 auto;overflow:hidden}
.detail-card .card-body{padding:0 12px 8px}
.detail-card .btn-area{display:flex;gap:16px;justify-content:center;padding:16px 0 4px}
.detail-card .btn-area button{min-width:140px;height:44px;font-size:14px}

/* ==================== 加载 ==================== */
.loading-state{text-align:center;padding:48px;color:#999;font-size:14px}
.loading-state .spinner{display:inline-block;width:30px;height:30px;border:3px solid #e0e3e8;
  border-top-color:#0078E8;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==================== 底部通栏（一行深蓝：网站首页链接+主办+地址+电话；红字不再需要浅灰白双行） ==================== */
.site-footer{
  width:100%;min-height:80px;padding:0;color:#B0B8C4;
  background:#142033;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
  margin-top:auto;
}
.site-footer .footer-inner{max-width:1280px;margin:0 auto;padding:0 32px;}
/* 深蓝版权条（单行居中4项） */
.site-footer .footer-bottom{padding:22px 0;}
.site-footer .copyright{font-size:13px;line-height:2;letter-spacing:.3px;color:#A9B1BF;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;row-gap:4px;}
.site-footer .copyright .footer-item{padding:0 18px;position:relative;display:inline-block;}
.site-footer .copyright .footer-item+.footer-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(176,184,196,.28);}
.site-footer .copyright .footer-label{color:#98A1B3;margin-right:4px;}
.site-footer .copyright a{color:#A9B1BF;transition:color .2s;}
.site-footer .copyright a:hover{color:#fff;}
/* Fix3：网站首页链接按参考截图加轻微高亮（红色偏橙调）+ 可点击指示 */
.site-footer .site-home-link{
  color:#F26A5C;font-weight:600;text-decoration:none;transition:all .2s;
}
.site-footer .site-home-link:hover{color:#FF9033;text-decoration:underline;}

/* ==================== 动画 ==================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* — 弹窗专用（需配合position:fixed + left/top:50%） — */
@keyframes scaleIn{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes scaleInFlex{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* — 弹窗关闭动画（弹出反向） — */
@keyframes scaleOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.94)}}
@keyframes scaleOutFlex{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.94)}}
/* — 普通内容卡片专用（只做原位缩放淡入，不位移） — */
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes zoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.anim-fade-in{animation:fadeIn .5s ease both}
.anim-fade-in-up{animation:fadeInUp .55s ease both}
.anim-fade-in-down{animation:fadeInDown .45s ease both}
/* 内容卡片用zoomIn替代scaleIn，避免被translate(-50%,-50%)扔出屏幕 */
.anim-scale-in{animation:zoomIn .45s ease both}
.anim-zoom-in{animation:zoomIn .45s ease both}
.anim-pulse{animation:pulse 2s ease-in-out infinite}
.anim-delay-1{animation-delay:.08s}.anim-delay-2{animation-delay:.16s}.anim-delay-3{animation-delay:.24s}
.anim-delay-4{animation-delay:.32s}.anim-delay-5{animation-delay:.40s}
.detail-table tr{animation:fadeInUp .38s ease both}
.detail-table tr:nth-child(1){animation-delay:.04s}.detail-table tr:nth-child(2){animation-delay:.08s}
.detail-table tr:nth-child(3){animation-delay:.12s}.detail-table tr:nth-child(4){animation-delay:.16s}
.detail-table tr:nth-child(5){animation-delay:.20s}.detail-table tr:nth-child(6){animation-delay:.24s}
.detail-table tr:nth-child(7){animation-delay:.28s}.detail-table tr:nth-child(8){animation-delay:.32s}
.detail-table tr:nth-child(9){animation-delay:.36s}.detail-table tr:nth-child(10){animation-delay:.40s}
.detail-table tr:nth-child(11){animation-delay:.44s}.detail-table tr:nth-child(12){animation-delay:.48s}
/* —— 弹窗显示动画 —— */
.modal-dialog.show{display:block;animation:scaleIn .32s ease both}
.modal-large.show{display:flex;animation:scaleInFlex .32s ease both}
.mask-overlay.show{display:block;animation:fadeIn .28s ease both}
/* —— 弹窗关闭动画 —— */
.modal-dialog.hiding{display:block;animation:scaleOut .22s ease both !important;pointer-events:none}
.modal-large.hiding{display:flex;animation:scaleOutFlex .22s ease both !important;pointer-events:none}
.mask-overlay.hiding{display:block;animation:fadeIn .28s ease both reverse !important;pointer-events:none}
.custom-toast.hiding{display:block;animation:scaleOut .22s ease both !important;pointer-events:none}
.html-popup.hiding{animation:zoomOut .22s ease both !important;pointer-events:none}

/* ==================== 工具类 ==================== */
.text-center{text-align:center}.text-right{text-align:right}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.ml-auto{margin-left:auto}.w-full{width:100%}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.color-primary{color:#0078E8}.color-danger{color:#E53E3E}.color-muted{color:#8c939d}
.text-sm{font-size:13px}.text-xs{font-size:12px}
.field-hint{font-size:12px;color:#999;margin-top:6px}
.hidden{display:none !important}

@media screen and (max-width:768px){
  .func-cards{flex-direction:column;align-items:center;gap:24px}
  .func-card{max-width:100%;width:100%;height:220px}
  .form-row{flex-direction:column;gap:0}
  .form-row .form-group{flex:auto}
  .venue-cards{flex-direction:column}
  .modal-large{width:98vw;max-height:95vh}
  .calendar-table{font-size:10px}
}

/* ============================================================ */
/* 场地选择V2布局（行=上午/下午子行 列=日期） */
/* ============================================================ */
.calendar-table.v2-layout{table-layout:fixed;}
.calendar-table.v2-layout thead th.v2-room-col{min-width:150px;width:150px;}
.calendar-table.v2-layout thead th{padding:10px 6px;}
.calendar-table.v2-layout tbody td.room-name.v2-room-name{
  width:150px;min-width:150px;
  background:linear-gradient(180deg,#fafbfc 0%,#f3f6fb 100%);
  font-size:12px;font-weight:700;color:#1a1a1a;
  text-align:center;vertical-align:middle;padding:10px 6px;
  border-right:2px solid #e8eaed;
}
.calendar-table.v2-layout tbody td.room-name.v2-room-name .v2-room-title{
  font-size:13px;font-weight:800;color:#0F5299;margin-bottom:6px;
}
.calendar-table.v2-layout tbody td.room-name.v2-room-name .v2-period-label{
  font-size:11px;color:#666;font-weight:500;background:#eef3fa;border-radius:6px;padding:3px 8px;display:inline-block;
}
.calendar-table.v2-layout tbody td.v2-period-only{
  background:#f3f6fb !important;
  border-right:2px solid #e8eaed !important;
  font-weight:600 !important;
}

/* 时间段选择确认弹窗（参考截图1右下角蓝色chip按钮样式） */
.period-confirm-popup{
  position:fixed;z-index:2250;
  background:#fff;border-radius:12px;
  box-shadow:0 8px 36px rgba(0,0,0,.22);
  min-width:300px;max-width:540px;padding:18px;
}
.period-confirm-popup .pcp-title{font-size:15px;font-weight:800;color:#111;margin-bottom:4px;}
.period-confirm-popup .pcp-subtitle{font-size:12px;color:#666;margin-bottom:14px;}
.period-confirm-popup .pcp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.period-confirm-popup .pcp-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:72px;padding:8px 10px;
  background:#EEF3FA;border:1px solid #d0dcee;border-radius:10px;
  color:#0F5299;cursor:pointer;transition:all .2s;font-family:inherit;
}
.period-confirm-popup .pcp-chip:hover:not(.disabled):not(:disabled){
  background:#dce9f9;border-color:#b3cdee;
}
.period-confirm-popup .pcp-chip.selected{
  background:linear-gradient(90deg,#0078E8 0%,#00C2B8 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(0,120,232,.32);
}
.period-confirm-popup .pcp-chip.disabled,
.period-confirm-popup .pcp-chip:disabled{
  background:#f3f4f6 !important;color:#9ea3ab !important;cursor:not-allowed !important;border-color:#e9e9e9 !important;box-shadow:none !important;
}
.period-confirm-popup .pcp-chip .chip-date{font-size:12px;font-weight:700;}
.period-confirm-popup .pcp-chip .chip-time{font-size:10px;font-weight:500;margin-top:3px;opacity:.92;}
.period-confirm-popup .pcp-btns{display:flex;justify-content:flex-end;gap:10px;}

/* ============================================================ */
/* 必填校验红框+抖动动画  +  场地卡片红框错误态 */
/* ============================================================ */
@keyframes shakeX{
  0%,100%{transform:translateX(0);}
  15%{transform:translateX(-7px);}
  30%{transform:translateX(7px);}
  45%{transform:translateX(-6px);}
  60%{transform:translateX(6px);}
  75%{transform:translateX(-4px);}
  90%{transform:translateX(4px);}
}
.form-input.error-shake{
  border-color:#E53E3E !important;
  box-shadow:0 0 0 2px rgba(229,62,62,.12) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
.inline-input.error-shake{
  border-color:#E53E3E !important;
  box-shadow:0 0 0 2px rgba(229,62,62,.10) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
.venue-card.error-shake{
  border-color:#E53E3E !important;
  background:#fff5f5 !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
select.form-input.error-shake{
  border-color:#E53E3E !important;
  box-shadow:0 0 0 2px rgba(229,62,62,.12) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
/* 表格（标段空时红框）+ 新增标段按钮（标段空时红框） */
table.section-table.error-shake{
  border:2px solid #E53E3E !important;
  box-shadow:0 0 0 2px rgba(229,62,62,.1) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
#addSectionBtn.error-shake{
  border-color:#E53E3E !important;
  background:linear-gradient(90deg,#FF9033 0%,#F23C57 100%) !important;
  box-shadow:0 0 0 2px rgba(229,62,62,.15) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
/* 附件上传按钮（附件空时红框）+ 附件列表（附件空时红框） */
.attach-upload-btn.error-shake{
  background:linear-gradient(90deg,#FF9033 0%,#F23C57 100%) !important;
  box-shadow:0 0 0 2px rgba(229,62,62,.15) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
.attach-list.error-shake{
  border:2px solid #E53E3E !important;
  border-radius:6px;
  box-shadow:0 0 0 2px rgba(229,62,62,.1) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
/* 表格内inline-input标段输入框抖动（覆盖上面） */
.inline-input.error-shake{
  border-color:#E53E3E !important;
  background:#fff5f5 !important;
  box-shadow:0 0 0 2px rgba(229,62,62,.10) !important;
  animation:shakeX .55s cubic-bezier(.36,.07,.19,.97) both;
}
/* 输入控件focus时清除错误态 */
.form-input:focus,.inline-input:focus{
  box-shadow:0 0 0 2px rgba(0,120,232,.06) !important;
  border-color:#0078E8 !important;
  background:#fff !important;
  animation:none !important;
}
/* ============================================================
 * 字段级错误提示：红框(抖动) + 控件下方红色小字（与控件左对齐紧贴底部）
 *   - 用法：jQuery调用 U.showFieldError($input, '项目编号已被预约，不能重复');
 *           U.clearFieldError($input);
 * ============================================================ */
.field-error-text{
  display:block;
  margin:6px 2px 0 2px;
  padding:2px 2px 0 2px;
  color:#E53E3E;
  font-size:12px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.2px;
  word-break:break-all;
  min-height:14px;
}
/* 表单组：保证.field-error-text不被挤压 */
.form-group{
  position:relative;
  margin-bottom:2px;
}
/* inline-input在表格内 → 错误提示放input后紧贴 */
td > .inline-input + .field-error-text{
  margin:4px 0 0 0;
  padding:0 2px;
}

/* 提交成功卡片式弹窗（带绿色圆形对勾 + 大蓝色单号） */
.modal-dialog{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);
  background:#fff;border-radius:14px;z-index:2005;padding:38px 44px 30px;
  min-width:380px;max-width:480px;text-align:center;box-shadow:0 16px 60px rgba(0,0,0,.2);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.modal-dialog.show{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;}
.modal-dialog .modal-body{display:flex;flex-direction:column;align-items:center;gap:6px;}
.modal-dialog .mt-8{margin-top:22px;}
.modal-dialog .w-full{width:100%;}
.reserve-no-display{
  word-break:break-all;line-height:1.25;font-family:"Microsoft YaHei","微软雅黑",sans-serif;
}

/* ============================================================ */
/* 场地选择弹窗（完全截图样式） */
/* ============================================================ */
.modal-screenshot{border-radius:4px;border:none !important;box-shadow:0 12px 48px rgba(0,0,0,.25);}
.modal-screenshot .modal-header-screenshot{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid #e5e7eb;background:#fff;
}
.modal-screenshot .modal-header-left{display:flex;align-items:center;gap:14px;}
.screenshot-logo{
  background:linear-gradient(90deg,#0078E8 0%,#17a2b8 100%);
  color:#fff;font-size:13px;font-weight:700;padding:5px 12px;border-radius:3px;
  letter-spacing:1px;
}
.modal-screenshot h3{font-size:14px;margin:0;font-weight:700;color:#111;}
.modal-screenshot .modal-footer-screenshot{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid #eceef1;background:#fafbfc;
}

/* 工具栏 */
.venue-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;flex-shrink:0;}
.venue-toolbar-left{display:flex;gap:8px;}
.venue-toolbar-right{display:flex;align-items:center;gap:10px;}
.venue-search-label{font-size:12px;color:#444;white-space:nowrap;}
.week-btn-screenshot{
  padding:5px 12px;background:#fff;border:1px solid #d9dde3;border-radius:3px;
  color:#333;font-size:12px;cursor:pointer;transition:all .15s;
}
.week-btn-screenshot:hover{background:#f0f4fa;border-color:#b3cdee;color:#0F5299;}
.week-btn-screenshot.back-this{color:#0F5299;border-color:#b3cdee;background:#eef3fa;}
.venue-legend{display:flex;gap:16px;font-size:11px;color:#555;}
.legend-item{display:inline-flex;align-items:center;gap:5px;}
.legend-block{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.08);}
.legend-expired{background:#e6e8eb;border-color:#cfd3d9;}
.legend-mine{background:#0078E8;border-color:#0063c5;}
.legend-booked{background:#FF9033;border-color:#f07917;}

/* 搜索条 */
.venue-search-box-screenshot{
  display:flex;align-items:center;padding:6px 16px 10px;flex-shrink:0;
}
.venue-search-box-screenshot input{
  height:28px;padding:0 10px;border:1px solid #d9dde3;border-radius:3px;font-size:12px;
}
.venue-search-box-screenshot input:focus{outline:none;border-color:#0078E8;box-shadow:0 0 0 2px rgba(0,120,232,.1);}

/* 表格 */
.calendar-table.screenshot-layout{width:100%;border-collapse:collapse;font-size:12px;background:#fff;table-layout:fixed;}
.calendar-table.screenshot-layout thead th{
  background:#f8fafc;border:1px solid #e5e7eb;padding:8px 6px;text-align:center;color:#333;font-weight:600;
  vertical-align:middle;
}
/* Bug#3修复：列宽调大，保证时间段文字完整显示不被截断 */
.calendar-table.screenshot-layout thead th.ss-col-room{width:130px;min-width:130px;max-width:130px;}
.calendar-table.screenshot-layout thead th.ss-col-time{width:100px;min-width:100px;max-width:100px;}
.calendar-table.screenshot-layout thead th.ss-col-date{min-width:160px;width:160px;}
.ss-date-main{font-size:12px;color:#111;font-weight:700;margin-bottom:2px;}
.ss-date-week{font-size:11px;color:#666;font-weight:400;}
.calendar-table.screenshot-layout thead th.expired-col{opacity:.55;}

/* tbody 单元格 */
.calendar-table.screenshot-layout tbody td{
  border:1px solid #eceef1;vertical-align:top;padding:0;
  position:relative;
}
.ss-room-cell{
  background:linear-gradient(180deg,#fafbfc 0%,#f3f6fb 100%);
  text-align:center;vertical-align:middle;border-right:2px solid #e5e7eb;
  padding:6px 6px !important;
}
.ss-room-name{
  font-size:12px;font-weight:700;color:#1a1a1a;line-height:1.4;word-break:break-all;
}
.ss-time-cell{
  background:#f9fafb;text-align:center;vertical-align:middle;
  border-right:1px solid #e5e7eb;padding:6px 6px !important;
}
.ss-period-name{font-size:11px;color:#0F5299;font-weight:700;margin-bottom:3px;white-space:nowrap;}
.ss-period-range{font-size:10px;color:#666;white-space:nowrap;}

/* Q1修复：表格与单元格高度自适应（删除72px硬限，≥5条不裁剪，rowspan跨多行也不挤压） */
.calendar-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;}
.calendar-table tr{height:auto;}
.calendar-table td{vertical-align:top !important;height:auto;}
.ss-cell{background:#fff;cursor:default;min-height:64px;height:auto;}
/* Q1修复#B：flex列内容区自适应，min-height64为最小视觉一致，内容自然撑开不裁剪 */
.ss-cell-inner{position:relative;width:100%;min-height:64px;height:auto;flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:5px 6px;box-sizing:border-box;gap:4px;overflow:visible;}

/* ============================================================ */
/* 本次优化#1：双Table方案冻结前两列（可选场地+时间），横向滚动条仅出现在日期列下方 */
/* 方案：外层flex容器 = 左冻结列wrapper(250px固定宽，无横向滚动) + 右日期列wrapper(flex1，overflow-x:auto横向滚动) */
/*      两个独立table行高严格一致 + 纵向scrollTop双向同步，彻底解决sticky缝隙+滚动条横跨整行问题 */
/* ============================================================ */

/* ============================================================ */
/* 双Table方案：左冻结两列+右日期列，纵滚在wrapper，横滚条独立 */
/* ============================================================ */

/* ① 外层wrapper：纵滚容器，scrollbar-gutter预留滚动条槽位 */
.table-wrapper-screenshot{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  position:relative;border:1px solid #e5e7eb;border-bottom:none;
  /* scrollbar-gutter去掉，让纵滚条在不需滚动时自动隐藏 */
}

/* ② flex行：左冻结列+右日期列 */
.ss-calendar-dual-wrap{
  position:relative;display:flex;flex-wrap:nowrap;align-items:flex-start;
  width:100%;background:#fff;box-sizing:border-box;
}

/* ③ 左冻结列：250px固定，overflow:visible让sticky穿透 */
.ss-frozen-pane{
  flex-shrink:0;width:250px;max-width:250px;min-width:250px;
  overflow:visible;background:#fff;
  border-right:2px solid #e5e7eb;
}
.ss-frozen-pane .calendar-table.ss-frozen-table{
  margin:0;width:250px !important;table-layout:fixed;
}

/* ④ 右日期列：flex填充，overflow:hidden裁剪横滚溢出+阻断sticky */
.ss-scroll-pane{
  flex:1 1 auto;min-width:0;overflow:hidden;
  background:#fff;position:relative;box-sizing:border-box;
}
.ss-scroll-pane .calendar-table.ss-scroll-table{
  margin:0;width:auto;min-width:100%;table-layout:auto;
}

/* ⑤ 冻结表头/表体列宽 */
.calendar-table.ss-frozen-table thead th.ss-col-room,
.calendar-table.ss-frozen-table tbody td.ss-room-cell{
  width:140px;min-width:140px;max-width:140px;
}
.calendar-table.ss-frozen-table thead th.ss-col-time,
.calendar-table.ss-frozen-table tbody td.ss-time-cell{
  width:110px;min-width:110px;max-width:110px;
}

/* ⑥ 冻结列表头单元格（CSS sticky，冻结pane为overflow:visible可穿透） */
.ss-frozen-pane .calendar-table.ss-frozen-table thead th{
  position:sticky;top:0;z-index:10;
  padding:8px 6px;text-align:center;color:#333;font-weight:600;
  vertical-align:middle;font-size:12px;
  border-bottom:1px solid #e5e7eb;
}
.ss-frozen-pane .calendar-table.ss-frozen-table thead th.ss-col-room{
  background:#f3f6fb;border-right:1px solid #e5e7eb;
}
.ss-frozen-pane .calendar-table.ss-frozen-table thead th.ss-col-time{
  background:#f7f9fc;border-right:0;
}

/* ⑦ 冻结列表体单元格 */
.ss-frozen-pane .calendar-table.ss-frozen-table tbody td{
  text-align:center;vertical-align:middle;padding:6px 6px !important;
  border-bottom:1px solid #eceef1;
}
.ss-frozen-pane .calendar-table.ss-frozen-table tbody td.ss-room-cell{
  background:linear-gradient(180deg,#fafbfc 0%,#f3f6fb 100%);
  border-right:1px solid #e5e7eb;
  vertical-align:middle !important;
  height:100%;
}
.ss-frozen-pane .calendar-table.ss-frozen-table tbody td.ss-time-cell{
  background:#f9fafb;border-right:0;
  vertical-align:middle !important;
  height:100%;
}

/* ⑧ 日期列表头单元格（overflow:hidden阻断CSS sticky，由JS translateY冻结） */
.ss-scroll-pane .calendar-table.ss-scroll-table thead th.ss-col-date{
  background:#f8fafc;
  border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  padding:8px 6px;text-align:center;color:#333;font-weight:600;
  vertical-align:middle;font-size:12px;
  min-width:160px;width:160px;
}

/* ⑨ 日期列表体单元格 */
.ss-scroll-pane .calendar-table.ss-scroll-table tbody td{
  border-left:1px solid #eceef1;border-right:1px solid #eceef1;
  border-bottom:1px solid #eceef1;
  vertical-align:top;padding:0;position:relative;
}

/* ⑩ 行高同步 */
.ss-calendar-dual-wrap .calendar-table tr{height:auto;}
.ss-calendar-dual-wrap .calendar-table td{vertical-align:top;height:auto;}

/* ⑪ 右表thead供JS translateY使用 */
.ss-scroll-table thead{position:relative;z-index:10;will-change:transform;}

/* 横滚条：flex布局=左filler(250px固定)+右scroll(可滚)，拼成完整矩形 */
.ss-hscroll-bar{
  display:flex;
  flex-shrink:0;
  height:14px;
  border-left:1px solid #e5e7eb;
  border-right:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}
.ss-hscroll-filler{
  width:250px;
  flex-shrink:0;
  background:#f8f9fa;
  border-right:2px solid #b0b8c4;
}
.ss-hscroll-scroll{
  flex:1;
  overflow-x:auto;
  overflow-y:hidden;
  min-width:0;
}
.ss-hscroll-spacer{height:1px;}

/* 过期cell */
.ss-cell-expired{background:#f8f9fa;opacity:.5;cursor:not-allowed;}
.ss-cell.past-col{background:#f8f9fa;opacity:.5;}

/* 可选cell（空）——即使有占用条，整格也允许点击（剩余时间段可约） */
.ss-cell-available{cursor:pointer;}
.ss-cell-available:hover{background:#eef5ff;}
.ss-cell.today-col{background:#fffdf4;}
.ss-cell.past-col.ss-cell-available{cursor:not-allowed;background:#f8f9fa;}

/* Bug#2修复#D：多条占用容器 + 单条占用紧凑样式 */
.ss-occ-list{display:flex;flex-direction:column;gap:4px;width:100%;}
.ss-occ-bar{
  display:block;width:100%;box-sizing:border-box;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#fff2e8;border-left:3px solid #FF9033;
  color:#a34a00;font-size:10px;font-weight:600;padding:2px 6px;
  border-radius:2px;line-height:1.5;cursor:default;
}
.ss-occ-bar:hover{filter:brightness(.97);}

/* 选中cell：蓝绿渐变条（只在没有选中时才显示占用条，有选中则显示选中条 — JS逻辑保证） */
.ss-cell-selected{background:#eef5ff !important;}
.ss-selected-bar{
  display:flex;align-items:center;width:100%;justify-content:center;
  background:linear-gradient(90deg,#0078E8 0%,#00C2B8 100%);
  color:#fff;padding:5px 6px;border-radius:3px;
  box-shadow:0 2px 6px rgba(0,120,232,.22);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ss-sel-info{font-size:11px;color:#fff;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 时间段确认chip弹窗（截图样式） */
.period-confirm-popup.screenshot-pcp{
  position:fixed;z-index:2250;background:#fff;border-radius:4px;
  box-shadow:0 6px 28px rgba(0,0,0,.18);
  padding:14px 14px 12px;min-width:350px;
  border:1px solid #eceef1;
}
.screenshot-pcp .pcp-chips{display:flex;gap:8px;margin-bottom:12px;flex-wrap:nowrap;}
.pcp-chip-screenshot{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border:1px solid #c9d8ef;border-radius:3px;padding:6px 4px;
  cursor:pointer;color:#1a1a1a;font-family:inherit;transition:all .15s;
}
.pcp-chip-screenshot:hover:not(.disabled):not(:disabled){
  background:#f3f7fc;border-color:#9fb9e3;
}
.pcp-chip-screenshot.selected{
  background:linear-gradient(90deg,#0078E8 0%,#00C2B8 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 2px 10px rgba(0,120,232,.3);
}
.pcp-chip-screenshot.disabled,.pcp-chip-screenshot:disabled{
  background:#f6f7f8;color:#a5a9b0 !important;border-color:#e7e9ec;cursor:not-allowed;
}
.pcp-chip-screenshot .pcp-chip-top{font-size:12px;font-weight:700;}
.pcp-chip-screenshot .pcp-chip-btm{font-size:10px;opacity:.9;font-weight:500;}
.pcp-chip-screenshot .pcp-chip-time{font-size:10px;font-weight:600;margin-top:1px;}
.pcp-chip-screenshot.selected .pcp-chip-btm{opacity:1;}

.pcp-btns-screenshot{display:flex;justify-content:flex-end;gap:8px;}
.btn-ghost-sm{
  padding:4px 14px;background:#fff;border:1px solid #d9dde3;border-radius:3px;
  cursor:pointer;font-size:12px;color:#333;
}
.btn-ghost-sm:hover{background:#f5f7fa;}
.btn-primary-sm{
  padding:4px 14px;background:linear-gradient(90deg,#0078E8 0%,#00C2B8 100%);
  color:#fff;border:0;border-radius:3px;cursor:pointer;font-size:12px;font-weight:600;
}
.btn-primary-sm:hover{filter:brightness(1.05);}

/* ============================================================ */
/* 30分钟分段时间段选择网格（首尾点选连续范围） */
/* ============================================================ */
.period-confirm-popup.pcp-with-slots{min-width:520px;max-width:620px;}
.pcp-empty{
  padding:20px 16px;background:#fafbfc;border:1px dashed #d9dde3;border-radius:4px;
  text-align:center;color:#888;font-size:12px;margin-bottom:6px;
}
.pcp-slot-area{margin-bottom:2px;}
.pcp-slot-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px 8px;
  padding:10px 4px 6px;
}
@media(min-width:680px){
  .pcp-slot-grid{grid-template-columns:repeat(5, 1fr);}
}
.pcp-slot{
  background:#fff;border:1px solid #c7d3e8;color:#0F5299;font-weight:600;
  padding:7px 6px;border-radius:3px;font-size:12px;cursor:pointer;text-align:center;
  transition:all .12s;font-family:inherit;
}
.pcp-slot:hover:not(:disabled):not(.pcp-slot-disabled):not(.pcp-slot-selected){
  background:#eef5ff;border-color:#0078E8;
}
.pcp-slot-selected{
  background:linear-gradient(90deg,#0078E8 0%,#00C2B8 100%) !important;
  color:#fff !important;border-color:transparent !important;
  box-shadow:0 2px 8px rgba(0,120,232,.28);
}
.pcp-slot-disabled,.pcp-slot:disabled{
  background:#eef0f3 !important;color:#a4a9b0 !important;border-color:#dfe3e8 !important;cursor:not-allowed !important;
  box-shadow:none !important;text-decoration:line-through;opacity:.85;
}
.pcp-slot-past{background:#f4f5f7 !important;color:#888 !important;border-color:#d9dde3 !important;}

/* 场地列、时段列内部flex垂直居中 */
.ss-cell-vcenter{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-height:64px;
  box-sizing:border-box;padding:8px 6px;
}
.ss-frozen-pane .calendar-table.ss-frozen-table tbody td.ss-room-cell .ss-cell-vcenter,
.ss-frozen-pane .calendar-table.ss-frozen-table tbody td.ss-time-cell .ss-cell-vcenter{
  min-height:100%;
  height:100%;
}
.ss-room-cell, .ss-time-cell{
  vertical-align:middle !important;
  text-align:center !important;
}

/* （ss-selected-bar等样式已统一在表格区域定义，此处省略避免重复覆盖） */