* {margin:0;padding:0;box-sizing:border-box;}
/* 监控网站样式 - 与主网站类似，支持明暗主题 */

/* CSS变量定义 */
:root {
--primary-color: #2196F3;
--primary-hover: #1976D2;
--secondary-color: #21CBF3;
--success-color: #4CAF50;
--error-color: #f44336;
--warning-color: #ff9800;
--info-color: #1565c0;

/* 浅色模式 - 天蓝色背景 */
--bg-gradient-start: #87ceeb;
--bg-gradient-end: #4682b4;
--bg-radial-1: rgba(135, 206, 235, 0.3);
--bg-radial-2: rgba(70, 130, 180, 0.3);
--bg-radial-3: rgba(176, 224, 230, 0.3);

--bg-color: #e6f3ff;
--text-color: #1a365d;
--text-secondary: #2d5a87;
--border-color: #bee3f8;
--shadow: rgba(0, 0, 0, 0.15);

--glass-bg: rgba(255, 255, 255, 0.4);
--glass-border: rgba(255, 255, 255, 0.3);

--card-bg: rgba(255, 255, 255, 0.85);
--input-bg: rgba(255, 255, 255, 0.95);
--panel-bg: #f9fafb;
--header-bg: linear-gradient(55deg, #2196F3, #21CBF3);
--header-text: #fff;
--video-bg: #000;
--status-bg: rgba(0,0,0,.75);
--btn-bg: linear-gradient(145deg, #2196F3, #1976D2);
--ptz-btn-bg: linear-gradient(145deg, #4CAF50, #45a049);
--log-body-bg: #fff;
--log-border: #d9e1e6;

/* 折叠按钮渐变（浅色） */
--collapse-btn-start: #eceff1;
--collapse-btn-end: #dde2e6;
}

/* 暗色主题 - 紫色渐变 */
[data-theme="dark"] {
--bg-gradient-start: #667eea;
--bg-gradient-end: #764ba2;
--bg-radial-1: rgba(120, 119, 198, 0.3);
--bg-radial-2: rgba(255, 119, 198, 0.3);
--bg-radial-3: rgba(120, 219, 255, 0.3);

--bg-color: #1a202c;
--text-color: #f7fafc;
--text-secondary: #a0aec0;
--border-color: #4a5568;
--shadow: rgba(0, 0, 0, 0.3);

--glass-bg: rgba(26, 32, 44, 0.8);
--glass-border: rgba(255, 255, 255, 0.1);

--card-bg: rgba(45, 55, 72, 0.9);
--input-bg: rgba(45, 55, 72, 0.95);
--panel-bg: #2d3748;
--header-bg: linear-gradient(55deg, #5a6fd8, #5c3b8e);
--header-text: #f7fafc;
--video-bg: #111;
--status-bg: rgba(255,255,255,.15);
--btn-bg: linear-gradient(145deg, #5a6fd8, #4a5568);
--ptz-btn-bg: linear-gradient(145deg, #2f855a, #276749);
--log-body-bg: #1a202c;
--log-border: #4a5568;

/* 折叠按钮渐变（深色） */
--collapse-btn-start: #4a5568;
--collapse-btn-end: #2d3748;
}

/* 全局 */
body{
font-family:'Microsoft YaHei',Arial,sans-serif;
background:linear-gradient(135deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);
min-height:100vh;
padding:20px;
color:var(--text-color);
transition: all 0.3s ease;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: 
  radial-gradient(circle at 20% 80%, var(--bg-radial-1) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%, var(--bg-radial-2) 0%, transparent 50%),
  radial-gradient(circle at 40% 40%, var(--bg-radial-3) 0%, transparent 50%);
z-index: -1;
animation: backgroundShift 20s ease-in-out infinite;
}
@keyframes backgroundShift {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.container{
max-width:1400px;
margin:0 auto;
background:var(--glass-bg);
border-radius:18px;
box-shadow:0 20px 40px -12px var(--shadow);
overflow:hidden;
display:flex;
flex-direction:column;
backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
}
.header{
background:var(--header-bg);
color:var(--header-text);
padding:18px 24px 14px;
display:flex;
flex-direction:column;
gap:10px;
}
.header-top{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:16px;
}
.header h1{
font-size:1.9em;
font-weight:600;
display:flex;
gap:8px;
align-items:center;
letter-spacing:1px;
}
.meta-info{font-size:12px;opacity:.9;white-space:nowrap;}

.main-content{
display:grid;
grid-template-columns: minmax(460px,2fr) minmax(320px,1fr);
gap:22px;
padding:22px 26px 26px;
}
@media (max-width:1180px){.main-content{grid-template-columns:1fr;}}

/* 视频区与状态提示 */
.video-stack{display:flex;flex-direction:column;gap:18px;}
.video-container{
background:var(--video-bg);
border-radius:14px;
overflow:hidden;
position:relative;
box-shadow:0 10px 28px -6px var(--shadow);
min-height:430px;
touch-action:none;
user-select:none;
}
.video-inner-wrapper{width:100%;height:100%;position:relative;overflow:hidden;}
#videoElement{
width:100%;
min-height:430px;
display:block;
object-fit:contain;
background:#000;
cursor:pointer;
transform-origin:center center;
will-change:transform;
transition:transform .06s linear;
}
.dz-no-anim{transition:none !important;}
.status{
position:absolute;top:10px;right:10px;
background:var(--status-bg);
color:var(--header-text);
padding:6px 14px;
border-radius:22px;
font-size:12px;
font-weight:600;
z-index:30;
display:flex;
gap:6px;
align-items:center;
}
.fullscreen-btn{
position:absolute;top:45px;right:10px;
background:var(--status-bg);
color:var(--header-text);
border:none;
padding:8px 14px;
border-radius:22px;
font-size:12px;
cursor:pointer;
z-index:30;
transition:.25s;
}
.fullscreen-btn:hover{transform:scale(1.05);}
.reconnect-badge{
position:absolute;
left:10px;bottom:10px;
background:linear-gradient(135deg,var(--warning-color),#ef6c00);
color:var(--header-text);
padding:5px 12px;
font-size:11px;
border-radius:18px;
font-weight:600;
display:none;
box-shadow:0 4px 12px var(--shadow);
z-index:30;
}
.reconnect-badge.active{display:inline-flex;align-items:center;gap:4px;}
.compat-warning{
position:absolute;
left:10px;right:10px;bottom:60px;
background:linear-gradient(125deg,var(--warning-color),#fb8c00);
color:var(--header-text);
padding:10px 16px;
border-radius:14px;
font-size:12px;
line-height:1.5;
display:none;
z-index:35;
box-shadow:0 6px 18px -4px var(--shadow);
}
.compat-warning.visible{display:block;}
.gesture-hint{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
z-index:25;
pointer-events:none;
font-size:13px;
color:#eee;
background:var(--status-bg);
padding:8px 16px;
border-radius:26px;
opacity:0;
transition:.35s;
backdrop-filter:blur(4px);
font-weight:500;
letter-spacing:.5px;
}
.gesture-hint.active{opacity:1;}
.zoom-indicator{
position:absolute;
top:10px;
right:10px;
background:var(--status-bg);
backdrop-filter:blur(4px);
color:var(--header-text);
padding:6px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
z-index:40;
}
.zoom-indicator button{
background:rgba(255,255,255,.15);
color:var(--header-text);
border:1px solid rgba(255,255,255,.25);
padding:2px 8px;
border-radius:14px;
font-size:11px;
cursor:pointer;
transition:.2s;
}
.zoom-indicator button:hover{background:rgba(255,255,255,.28);}
.zoom-help{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
background:var(--status-bg);
padding:6px 14px;
color:#eee;
font-size:11px;
line-height:1.4;
border-radius:18px;
z-index:35;
pointer-events:none;
opacity:0;
transition:.35s;
}
.zoom-help.visible{opacity:1;}

/* 侧栏与面板 */
.side-column{
display:flex;
flex-direction:column;
gap:18px;
}
.panel{
background:var(--panel-bg);
border-radius:14px;
padding:14px 16px 16px;
box-shadow:0 6px 18px -6px var(--shadow);
position:relative;
display:flex;
flex-direction:column;
transition:.3s;
min-width:0;
}
.panel-title{
font-size:1.05em;
font-weight:600;
color:var(--text-color);
padding:2px 0 10px;
margin:0 0 8px;
border-bottom:2px solid var(--border-color);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.panel-title .title-left{display:flex;align-items:center;gap:8px;}
.collapse-btn{
background: linear-gradient(140deg, var(--collapse-btn-start), var(--collapse-btn-end));
border:1px solid var(--border-color);
width:30px;height:30px;
border-radius:8px;
cursor:pointer;
font-size:16px;
line-height:1;
display:flex;align-items:center;justify-content:center;
color:var(--text-color);
transition:.25s;
}
.collapse-btn:hover{background:#fff;}
.panel-body{display:flex;flex-direction:column;gap:14px;animation:fadeIn .25s;}
.panel.collapsed .panel-body{display:none;}
.panel.collapsed{padding-bottom:10px;}
.panel.collapsed .panel-title{margin-bottom:0;border-bottom:1px dashed var(--border-color);}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* 按钮与布局 */
.btn{
background:var(--btn-bg);
border:none;color:var(--header-text);
padding:10px 14px;
border-radius:10px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.25s;
display:inline-flex;
gap:6px;
align-items:center;
}
.btn:hover:enabled{box-shadow:0 4px 13px rgba(33,150,243,.45);transform:translateY(-1px);}
.btn:disabled{background:#bfc4c9;cursor:not-allowed;opacity:.85;}
.btn.danger{background:linear-gradient(145deg, var(--error-color), #d32f2f);}
.flex-row{display:flex;flex-wrap:wrap;gap:10px;}

/* PTZ 区 */
.ptz-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.ptz-btn{
background:var(--ptz-btn-bg);
border:none;color:var(--header-text);
padding:18px;
border-radius:12px;
cursor:pointer;
font-size:14px;
font-weight:600;
transition:.25s;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:72px;
user-select:none;
}
.ptz-btn:hover:enabled{transform:translateY(-2px);box-shadow:0 5px 14px rgba(76,175,80,.45);}
.ptz-btn:active:enabled{transform:translateY(0);box-shadow:0 2px 6px rgba(76,175,80,.4);}
.ptz-btn:disabled{background:#c8c8c8;cursor:not-allowed;box-shadow:none;}
.ptz-btn.active{outline:3px solid #ffe082;outline-offset:0;}

.hint-small{font-size:11.3px;color:var(--text-secondary);line-height:1.5;}

/* 日志面板 */
.log-body{
flex:1;
overflow:auto;
background:var(--log-body-bg);
border:1px solid var(--log-border);
border-radius:10px;
padding:8px;
font-size:12px;
line-height:1.4;
scrollbar-width:thin;
max-height:260px;
}
.log-filters-row{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}
.log-filters-row select,
.log-filters-row input{
background:var(--input-bg);
color:var(--text-color);
border:1px solid var(--border-color);
padding:6px 10px;
border-radius:8px;
font-size:12px;
outline:none;
}
.log-filters-row select:focus,
.log-filters-row input:focus{
border-color:var(--primary-color);
box-shadow:0 0 0 2px rgba(33,150,243,.15);
}
.log-tools .mini-btn{
background:var(--input-bg);
border:1px solid var(--border-color);
color:var(--text-color);
padding:6px 12px;
font-size:12px;
border-radius:8px;
cursor:pointer;
transition:.2s;
}
.log-tools .mini-btn:hover{background:var(--input-bg);}
.log-line{
padding:4px 6px 4px 10px;
border-left:4px solid transparent;
white-space:pre-wrap;
word-break:break-word;
border-radius:6px;
font-family:Consolas,Monaco,'Courier New',monospace;
}
.log-line:hover{background:var(--input-bg);}
.lvl-DEBUG{border-color:#64b5f6;background:#e3f2fd;}
.lvl-INFO{border-color:#81c784;background:#e8f5e9;}
.lvl-WARN{border-color:#ffb74d;background:#fff8e1;}
.lvl-ERROR{border-color:#e57373;background:#ffebee;}
.empty-placeholder{opacity:.6;padding:8px 4px;font-style:italic;}
.footer-hint{font-size:11px;opacity:.55;margin-top:-4px;line-height:1.35;}

/* 全屏 */
.video-container:fullscreen,
.video-container:-webkit-full-screen{
background:#000;display:flex;align-items:center;justify-content:center;
}
.video-container:fullscreen #videoElement,
.video-container:-webkit-full-screen #videoElement{
width:100vw;height:100vh;object-fit:contain;
}

/* 响应式 */
@media (max-width:560px){
body{padding:14px;}
.main-content{padding:18px;gap:18px;}
#videoElement{min-height:300px;}
.video-container{min-height:300px;}
.panel-title{font-size:1em;}
.btn{font-size:13px;padding:8px 12px;}
.side-column{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.ptz-grid{gap:10px;}
.ptz-btn{
  padding:14px;
  min-height:60px;
  font-size:12px;
}
.ptz-btn[data-direction="right"]{padding:12px;}
.log-body{max-height:230px;}
.header h1{font-size:1.55em;}
}

/* 主题切换按钮 */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: var(--glass-bg);
backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.3s ease;
z-index: 1000;
}
.theme-toggle:hover {transform: scale(1.1) rotate(15deg);box-shadow: 0 4px 15px var(--shadow);}

/* 底部版权声明 */
.footer {
text-align: center;
padding: 24px 0;
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
background: var(--glass-bg);
backdrop-filter: blur(15px);
border-top: 1px solid var(--border-color);
max-width: 1400px;
margin: 20px auto 0;
position: relative;
z-index: 1;
border-radius: 8px;
}

/* 深色模式下日志文字可读性 */
[data-theme="dark"] .log-line { color: #000; }

/* 音量控件 */
.volume-controls {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 8px;
background: var(--status-bg);
padding: 6px 10px;
border-radius: 20px;
z-index: 40;
backdrop-filter: blur(4px);
}
.volume-controls button {
background: rgba(255,255,255,.15);
color: var(--header-text);
border: 1px solid rgba(255,255,255,.25);
padding: 4px 8px;
border-radius: 14px;
font-size: 14px;
cursor: pointer;
transition: .2s;
}
.volume-controls button:hover { background: rgba(255,255,255,.28); }
.volume-controls .volume-slider {
width: 80px;
height: 4px;
background: rgba(255,255,255,.3);
border-radius: 2px;
outline: none;
cursor: pointer;
appearance: none;
}
.volume-controls .volume-slider::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
background: var(--header-text);
border-radius: 50%;
cursor: pointer;
}
.volume-controls .volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
background: var(--header-text);
border-radius: 50%;
cursor: pointer;
}
/* Safari下隐藏音量滑动条（JS 侧也做了隐藏） */
.safari .volume-controls .volume-slider { display: none !important; }

/* 自定义播放按钮 */
.play-btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 24px;
cursor: pointer;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
}
.play-btn:hover { background: rgba(255, 255, 255, 1); }
[data-theme="dark"] .play-btn { background: rgba(0, 0, 0, 0.8); }
[data-theme="dark"] .play-btn:hover { background: rgba(0, 0, 0, 1); }

@media (max-width: 560px) {
.volume-controls {
  bottom: 8px;
  right: 8px;
  padding: 4px 8px;
}
.volume-controls .volume-slider {
  width: 60px;
}
}