/* 黑洞酒店管理系统 - 应用样式 */
[v-cloak] { display: none !important; }
#app-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6, #8b5cf6); z-index: 9999; color: #fff; font-size: 18px; }
#app-loading.hidden { display: none; }
#app-loading .spinner { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: app-loading-spin 0.8s linear infinite; margin-right: 12px; flex-shrink: 0; }
@keyframes app-loading-spin { to { transform: rotate(360deg); } }
.modal-overlay { background: rgba(0,0,0,0.5); }
.sidebar-item:hover { background: rgba(255,255,255,0.1); }
.sidebar-item.active { background: rgba(255,255,255,0.2); border-left: 3px solid #fff; }
.sidebar-group-item { padding-left: 2.5rem; }
.sidebar-group-title { cursor: pointer; }
.sidebar-group-title .chevron { transition: transform 0.2s; }
.sidebar-group-title.expanded .chevron { transform: rotate(90deg); }
.permission-check:checked { background-color: #3b82f6; border-color: #3b82f6; }
.btn-poster-ai { background-color: #14b8a6; color: white !important; }
.btn-poster-ai:hover { background-color: #0d9488; color: white !important; }
.poster-preview-img { max-width: 210px; max-height: 280px; width: auto; height: auto; object-fit: contain; }
/* 登录页 - 星际穿越风格黑洞背景 */
.login-page { position: relative; min-height: 100vh; overflow: hidden; background: #020208; }
.login-page .login-bg-layer { position: absolute; inset: 0; }
.login-bg-stars {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23fff' fill-opacity='0.6'%3E%3Ccircle cx='23' cy='47' r='0.8'/%3E%3Ccircle cx='156' cy='89' r='1'/%3E%3Ccircle cx='289' cy='12' r='0.6'/%3E%3Ccircle cx='67' cy='234' r='0.8'/%3E%3Ccircle cx='312' cy='178' r='1.2'/%3E%3Ccircle cx='178' cy='312' r='0.5'/%3E%3Ccircle cx='45' cy='156' r='0.7'/%3E%3Ccircle cx='234' cy='45' r='0.9'/%3E%3Ccircle cx='123' cy='267' r='0.6'/%3E%3Ccircle cx='267' cy='289' r='1'/%3E%3Ccircle cx='89' cy='23' r='0.8'/%3E%3Ccircle cx='334' cy='134' r='0.5'/%3E%3Ccircle cx='12' cy='198' r='1.1'/%3E%3Ccircle cx='198' cy='123' r='0.7'/%3E%3Ccircle cx='56' cy='345' r='0.6'/%3E%3Ccircle cx='378' cy='67' r='0.9'/%3E%3Ccircle cx='145' cy='34' r='0.5'/%3E%3Ccircle cx='276' cy='223' r='0.8'/%3E%3Ccircle cx='34' cy='278' r='1'/%3E%3Ccircle cx='367' cy='356' r='0.6'/%3E%3Ccircle cx='201' cy='189' r='0.7'/%3E%3Ccircle cx='98' cy='112' r='0.9'/%3E%3Ccircle cx='312' cy='45' r='0.5'/%3E%3Ccircle cx='67' cy='378' r='0.8'/%3E%3Ccircle cx='256' cy='156' r='0.6'/%3E%3Ccircle cx='134' cy='245' r='1'/%3E%3Ccircle cx='45' cy='89' r='0.7'/%3E%3Ccircle cx='289' cy='312' r='0.9'/%3E%3Ccircle cx='178' cy='67' r='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 400px 400px;
    opacity: 0.95;
    animation: starsTwinkle 6s ease-in-out infinite;
}
@keyframes starsTwinkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}
.login-bg-blackhole {
    background: url("../images/blackhole.png") center/cover no-repeat;
}
.login-bg-accretion-flow {
    background: conic-gradient(from 0deg at 50% 50%,
        transparent 0deg, transparent 160deg,
        rgba(255,200,130,0.2) 180deg,
        rgba(255,220,150,0.4) 200deg,
        rgba(255,190,110,0.55) 220deg,
        rgba(255,210,140,0.4) 240deg,
        transparent 260deg, transparent 360deg);
    mix-blend-mode: screen;
    mask: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 70%);
    -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 70%);
    animation: accretionFlow 15s linear infinite;
}
.login-bg-accretion-flow::after {
    content: ''; position: absolute; inset: 0;
    background: conic-gradient(from 180deg at 50% 50%,
        transparent 0deg, transparent 140deg,
        rgba(180,140,255,0.15) 160deg,
        rgba(200,160,255,0.3) 180deg,
        rgba(160,120,220,0.25) 200deg,
        transparent 220deg, transparent 360deg);
    mix-blend-mode: screen;
    mask: radial-gradient(ellipse 75% 65% at 50% 50%, black 25%, transparent 65%);
    -webkit-mask: radial-gradient(ellipse 75% 65% at 50% 50%, black 25%, transparent 65%);
    animation: accretionFlow 22s linear infinite reverse;
}
@keyframes accretionFlow {
    to { transform: rotate(360deg); }
}
.login-quote {
    margin-bottom: 1.5rem; text-align: center; z-index: 1;
    color: rgba(255,255,255,0.7); font-size: 1rem; letter-spacing: 0.2em;
    text-shadow: 0 0 20px rgba(255,200,150,0.3);
    animation: quoteGlow 4s ease-in-out infinite alternate;
}
@keyframes quoteGlow { to { color: rgba(255,255,255,0.9); text-shadow: 0 0 30px rgba(255,220,180,0.5); } }
.login-card { position: relative; z-index: 2; backdrop-filter: blur(12px); background: rgba(255,255,255,0.95); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); }