*{margin:0;padding:0;box-sizing:border-box}:root{--primary:#4361ee;--success:#06d6a0;--warning:#ff9f1c;--danger:#ef476f;--gray:#909399;--dark-bg:#1b1f3b;--card-shadow:0 2px 12px rgba(0,0,0,0.06);--card-radius:12px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
html,body,#app{height:100%;width:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;background:#f0f2f8;color:#2c3e50}
.login-container{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1b1f3b 0%,#2d3361 50%,#4361ee 100%);position:relative;overflow:hidden}
.login-container::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(255,255,255,0.05)0%,transparent 70%);top:-200px;right:-200px;border-radius:50%}
.login-container::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(67,97,238,0.2)0%,transparent 70%);bottom:-100px;left:-100px;border-radius:50%}
.login-card{width:420px;padding:40px;background:rgba(255,255,255,0.97);border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,0.3);position:relative;z-index:1;backdrop-filter:blur(10px)}
.login-card h2{text-align:center;font-size:26px;background:linear-gradient(135deg,#4361ee,#7209b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.login-card .subtitle{text-align:center;color:#909399;margin-bottom:32px;font-size:14px}
.app-container{height:100vh;display:flex;flex-direction:column}
.app-header{height:60px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #ebeef5;box-shadow:0 1px 4px rgba(0,0,0,0.03);z-index:200;flex-shrink:0}
.app-header .logo{font-size:20px;font-weight:800;color:#1b1f3b;letter-spacing:-0.5px}
.app-header .logo span{color:var(--primary)}
.app-header .user-info{display:flex;align-items:center;gap:14px;font-size:14px;color:#606266}
.main-layout{display:flex;flex:1;overflow:hidden}
.sidebar{width:210px;background:var(--dark-bg);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-title{padding:22px 18px 14px;color:rgba(255,255,255,0.35);font-size:11px;letter-spacing:2px;font-weight:600}
.building-btn{display:flex;align-items:center;gap:12px;padding:13px 16px;margin:2px 10px;border-radius:10px;cursor:pointer;transition:var(--transition);color:rgba(255,255,255,0.6);user-select:none;border:none;background:transparent;width:calc(100% - 20px);text-align:left;font-size:14px}
.building-btn:hover{background:rgba(255,255,255,0.06);color:#fff}
.building-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px 15px rgba(67,97,238,0.3)}
.building-btn .icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.building-btn .info{flex:1;min-width:0}
.building-btn .name{font-weight:600;font-size:14px}
.building-btn .desc{font-size:11px;opacity:0.6;margin-top:2px}
.icon-E{background:rgba(67,97,238,0.2)}.icon-F{background:rgba(239,71,111,0.2)}.icon-A{background:rgba(6,214,160,0.2)}.icon-B{background:rgba(255,159,28,0.2)}
.building-btn.active .icon-E,.building-btn.active .icon-F,.building-btn.active .icon-A,.building-btn.active .icon-B{background:rgba(255,255,255,0.2)}
.content{flex:1;padding:24px 28px;overflow-y:auto;background:#f0f2f8}
.checkin-bar{background:linear-gradient(135deg,#4361ee 0%,#3a0ca3 100%);border-radius:16px;padding:24px;margin-bottom:30px;box-shadow:0 8px 32px rgba(67,97,238,0.25);color:#fff}
.checkin-bar .title{font-size:16px;font-weight:700;margin-bottom:18px}
.checkin-bar .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.checkin-bar .preview{margin-top:14px;padding:10px 14px;background:rgba(255,255,255,0.1);border-radius:8px;font-size:13px;color:rgba(255,255,255,0.85);min-height:20px}
.checkin-bar .preview strong{color:#fff}
.checkin-btn{background:linear-gradient(135deg,#ff9f1c,#e76f51);border:none;color:#fff;padding:8px 24px;border-radius:6px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.2s}
.checkin-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,159,28,0.4)}
.preview-tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;margin:2px 4px 2px 0;background:rgba(255,255,255,0.15)}
.section-label{font-size:16px;font-weight:700;color:#1b1f3b;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#e0e0e0,transparent);margin-left:8px}
.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:24px}
.stat-card{border-radius:var(--card-radius);padding:20px;box-shadow:var(--card-shadow);transition:var(--transition);cursor:pointer}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.stat-card .label{font-size:13px;font-weight:500;margin-bottom:8px;opacity:0.85}
.stat-card .value{font-size:28px;font-weight:800;letter-spacing:-1px}
.stat-card.gradient-blue{background:linear-gradient(135deg,#4361ee,#3a0ca3);color:#fff}.stat-card.gradient-green{background:linear-gradient(135deg,#06d6a0,#028090);color:#fff}.stat-card.gradient-orange{background:linear-gradient(135deg,#ff9f1c,#e76f51);color:#fff}.stat-card.gradient-pink{background:linear-gradient(135deg,#ef476f,#d90429);color:#fff}.stat-card.gradient-purple{background:linear-gradient(135deg,#7209b7,#4361ee);color:#fff}.stat-card.gradient-teal{background:linear-gradient(135deg,#06d6a0,#4361ee);color:#fff}
.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.building-overview-card{background:#fff;border-radius:var(--card-radius);padding:22px;box-shadow:var(--card-shadow);cursor:pointer;transition:var(--transition);border:2px solid transparent}
.building-overview-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.1);border-color:var(--primary)}
.building-overview-card .top-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.building-overview-card .b-name{font-size:17px;font-weight:700;color:#1b1f3b}
.building-overview-card .b-floor-info{font-size:12px;color:#909399;margin-top:3px}
.building-overview-card .stats{display:flex;gap:12px;margin-top:4px}
.building-overview-card .stat-item{flex:1;text-align:center;background:#f8f9fc;border-radius:8px;padding:10px 6px}
.building-overview-card .stat-item .num{font-size:20px;font-weight:700}
.building-overview-card .stat-item .lbl{font-size:11px;color:#909399;margin-top:2px}
.building-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.building-header h2{font-size:22px;font-weight:800;color:#1b1f3b;letter-spacing:-0.5px}
.building-actions{margin-left:auto;display:flex;gap:8px}
.floor-overview-card{background:#fff;border-radius:var(--card-radius);padding:20px;box-shadow:var(--card-shadow);margin-bottom:18px}
.floor-overview-card .title{font-size:14px;font-weight:600;color:#606266;margin-bottom:14px}
.floor-bar{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.floor-bar .f-label{font-size:12px;color:#909399;width:30px;flex-shrink:0;font-weight:600}
.floor-bar .f-track{flex:1;height:8px;background:#e8eaed;border-radius:4px;overflow:hidden}
.floor-bar .f-fill{height:100%;border-radius:4px;transition:width 0.5s ease}
.floor-bar .f-fill.low{background:linear-gradient(90deg,#06d6a0,#028090)}.floor-bar .f-fill.mid{background:linear-gradient(90deg,#ff9f1c,#e76f51)}.floor-bar .f-fill.high{background:linear-gradient(90deg,#ef476f,#d90429)}
.floor-bar .f-pct{font-size:11px;color:#909399;width:38px;text-align:right}
.search-bar{margin-bottom:16px;display:flex;gap:12px;align-items:center}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:10px}
.room-card{background:#fff;border-radius:10px;padding:14px 10px;text-align:center;cursor:pointer;transition:var(--transition);border:2px solid transparent;box-shadow:0 1px 4px rgba(0,0,0,0.04);position:relative;overflow:hidden}
.room-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.room-card .room-number{font-size:15px;font-weight:700;margin-bottom:4px}
.room-card .room-occupancy{font-size:12px;color:#606266;margin-bottom:4px}
.room-card .room-company{font-size:11px;padding:2px 10px;border-radius:12px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:600}
.room-card .room-tag{position:absolute;top:4px;right:4px;font-size:10px;padding:1px 6px;border-radius:4px;color:#fff;font-weight:600}
.room-card .room-period{font-size:10px;color:#c0c4cc;margin-top:2px}
.room-card.status-vacant{border-color:#06d6a0;background:#e8faf4}.room-card.status-partial{border-color:#ff9f1c;background:#fff8ed}.room-card.status-occupied{border-color:#ef476f;background:#fde8ed}.room-card.status-maintenance{border-color:#c03639;background:#fde8e8}.room-card.status-unavailable{border-color:#909399;background:#f4f4f6;cursor:not-allowed}
.company-中兴{background:#4361ee}.company-浪潮{background:#06d6a0}.company-华为{background:#ff9f1c}.company-腾讯{background:#909399}.company-阿里{background:#ef476f}.company-字节跳动{background:#7209b7}.company-other{background:#7209b7}
.total-bar-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:30px}
.total-bar-row .total-item{background:#fff;border-radius:var(--card-radius);padding:18px;text-align:center;box-shadow:var(--card-shadow);transition:var(--transition)}
.total-bar-row .total-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.total-bar-row .total-item .num{font-size:26px;font-weight:800;letter-spacing:-1px}
.total-bar-row .total-item .num.blue{color:var(--primary)}.total-bar-row .total-item .num.green{color:var(--success)}.total-bar-row .total-item .num.orange{color:var(--warning)}.total-bar-row .total-item .num.red{color:var(--danger)}
.total-bar-row .total-item .lbl{font-size:13px;color:#909399;margin-top:4px}
.empty-state{text-align:center;padding:60px 20px;color:#909399}
.checkout-warning{display:flex;align-items:center;gap:12px;padding:16px;background:#fff8ed;border-radius:10px;margin:12px 0;border-left:4px solid var(--warning)}
.checkout-warning .text{font-size:13px;color:#606266}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.status-dot.green{background:var(--success)}.status-dot.orange{background:var(--warning)}.status-dot.red{background:var(--danger)}.status-dot.dark-red{background:#c03639}.status-dot.gray{background:var(--gray)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#c0c4cc;border-radius:3px}::-webkit-scrollbar-track{background:transparent}
@media(max-width:1200px){.stats-row{grid-template-columns:repeat(3,1fr)}.overview-grid{grid-template-columns:repeat(2,1fr)}.total-bar-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.sidebar{width:60px}.sidebar .building-btn .info{display:none}.sidebar-title{display:none}.stats-row{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}}