/* =====================================================================
   后台统一深色科技风样式表 (admin_style.css)
   基于 daping.php 设计令牌，统一所有后台管理页面视觉风格
   各页面仅需 <link rel="stylesheet" href="admin_style.css"> 引入
   页面特有样式可内联补充
   ===================================================================== */

/* ===================== 设计令牌 ===================== */
:root{
    --bg-0:#070f1f;
    --bg-1:#0a1628;
    --bg-2:#0f1f3c;
    --accent:#3b82f6;
    --accent-2:#06b6d4;
    --accent-glow:rgba(59,130,246,0.45);
    --text:#e8eef7;
    --text-dim:#8da2c0;
    --text-bright:#ffffff;
    --danger:#ef4444;
    --danger-glow:rgba(239,68,68,0.4);
    --success:#22c55e;
    --card:rgba(15,31,60,0.72);
    --card-hover:rgba(20,40,75,0.80);
    --card-solid:rgba(15,31,60,0.92);
    --border:rgba(59,130,246,0.22);
    --border-bright:rgba(59,130,246,0.45);
    --radius:clamp(14px,1vw,24px);
    --radius-sm:10px;
    --shadow-1:0 4px 24px rgba(0,0,0,0.35);
    --shadow-2:0 8px 48px rgba(0,0,0,0.45);
    --font-main:"Microsoft YaHei","PingFang SC","HarmonyOS Sans SC","Noto Sans SC",system-ui,sans-serif;
    --font-mono:"JetBrains Mono","Fira Code","Cascadia Code",monospace;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:var(--font-main);
}

html,body{
    width:100%;
    min-height:100vh;
    background:var(--bg-0);
    color:var(--text);
}

/* 深色科技背景：多层径向光晕 + 网格纹理 */
body{
    background:
        radial-gradient(ellipse 70% 50% at 20% 0%, rgba(59,130,246,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 15%, rgba(6,182,212,0.14) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(99,102,241,0.12) 0%, transparent 55%),
        linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 70%, var(--bg-0) 100%);
    background-attachment:fixed;
    padding:30px 16px;
}
/* 网格纹理 */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
    background-size:48px 48px;
    pointer-events:none;
    z-index:0;
}

/* ===================== 主容器 ===================== */
.container{
    position:relative;
    z-index:1;
    max-width:1240px;
    margin:0 auto;
    background:var(--card);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:36px;
    box-shadow:var(--shadow-2);
}
.container::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent), transparent);
    border-radius:var(--radius) var(--radius) 0 0;
    box-shadow:0 0 16px var(--accent-glow);
}

/* 登录页容器更宽 */
.container.login-container{ max-width:720px; }

/* ===================== 头部 ===================== */
.header-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:40px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;
    gap:20px;
}
.logo-wrap{ text-align:left; }
.logo-big{
    height:80px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
    filter:brightness(1.05);
}
.logo-img{
    height:80px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
    margin-bottom:12px;
}
.logo-title{ display:flex; align-items:center; gap:16px; }
.main-title{
    font-size:28px;
    color:var(--text-bright);
    font-weight:700;
    letter-spacing:1.5px;
    margin-top:8px;
    background:linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.page-main-title{
    font-size:24px;
    color:var(--text-bright);
    font-weight:700;
    letter-spacing:1px;
    background:linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.user-logout-line{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}
.top-right-wrap{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}
.user-tip{
    font-size:18px;
    color:var(--text-dim);
    font-weight:500;
}

/* ===================== 按钮 ===================== */
.btn{
    padding:9px 20px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:16px;
    cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s, background 0.2s;
    font-weight:500;
    background:rgba(15,31,60,0.6);
    color:var(--text);
}
.btn-blue{
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    border:none;
    box-shadow:0 4px 16px var(--accent-glow);
}
.btn-blue:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 24px var(--accent-glow);
}
.btn-gray{
    background:rgba(100,116,139,0.5);
    color:var(--text);
    border:1px solid rgba(148,163,184,0.3);
}
.btn-gray:hover{
    background:rgba(71,85,105,0.6);
    transform:translateY(-1px);
}
.btn-danger{
    background:linear-gradient(135deg, var(--danger), #b91c1c);
    color:#fff;
    border:none;
    box-shadow:0 4px 16px var(--danger-glow);
}
.btn-danger:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 24px var(--danger-glow);
}
.btn-sm{
    padding:6px 14px;
    font-size:14px;
    margin:0 4px;
}
.btn:active{ transform:translateY(0); }

/* ===================== 导航卡片 ===================== */
.card-row{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px;
    margin-top:20px;
    margin-bottom:30px;
}
.func-card{
    background:rgba(15,31,60,0.6);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:24px;
    text-align:center;
    cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
    text-decoration:none;
    color:var(--text);
    display:block;
    position:relative;
    overflow:hidden;
}
.func-card::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
    opacity:0;
    transition:opacity 0.2s;
}
.func-card:hover{
    background:var(--card-hover);
    transform:translateY(-4px);
    box-shadow:0 8px 24px var(--accent-glow);
    border-color:var(--border-bright);
}
.func-card:hover::before{ opacity:1; }
.card-title{
    font-size:18px;
    color:var(--text-bright);
    margin-bottom:8px;
    font-weight:600;
}
.card-desc{
    font-size:14px;
    color:var(--text-dim);
    line-height:1.5;
}

/* ===================== 提示框 ===================== */
.tip-box{
    text-align:center;
    padding:12px 20px;
    border-radius:var(--radius-sm);
    margin-bottom:24px;
    font-size:17px;
    font-weight:500;
}
.tip-success{
    background:rgba(34,197,94,0.15);
    border:1px solid rgba(34,197,94,0.35);
    color:#86efac;
}
.tip-error{
    background:rgba(239,68,68,0.15);
    border:1px solid rgba(239,68,68,0.35);
    color:#fca5a5;
}

/* ===================== 表单 ===================== */
.form-wrap{
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:30px;
    margin-bottom:40px;
    max-width:700px;
    background:rgba(15,31,60,0.4);
}
.form-title{
    font-size:22px;
    color:var(--text-bright);
    margin-bottom:24px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
    font-weight:600;
}
.form-block{ margin-bottom:22px; }
.label-text{
    display:block;
    font-size:16px;
    color:var(--text-dim);
    margin-bottom:8px;
    font-weight:500;
}
.input-normal,select,textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:16px;
    background:rgba(7,15,31,0.6);
    color:var(--text);
    outline:none;
    transition:border-color 0.2s, box-shadow 0.2s;
}
.input-normal::placeholder,textarea::placeholder{
    color:rgba(141,162,192,0.5);
}
.input-normal:read-only{
    background:rgba(15,31,60,0.3);
    color:var(--text-dim);
    cursor:not-allowed;
}
.input-normal:focus,select:focus,textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-glow);
}
textarea{
    min-height:200px;
    resize:vertical;
    line-height:1.6;
    font-family:var(--font-main);
}
select option{
    background:var(--bg-1);
    color:var(--text);
}

/* 文件上传输入框 */
input[type="file"]{
    padding:10px;
    background:rgba(7,15,31,0.6);
    border:1px dashed var(--border-bright);
    border-radius:var(--radius-sm);
    color:var(--text-dim);
    cursor:pointer;
    width:100%;
}
input[type="file"]::-webkit-file-upload-button{
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    border:none;
    border-radius:6px;
    padding:6px 14px;
    font-size:14px;
    cursor:pointer;
    margin-right:10px;
}

/* ===================== 表格 ===================== */
.table-wrap{
    width:100%;
    border-collapse:collapse;
    margin-top:16px;
    background:rgba(15,31,60,0.4);
    border-radius:var(--radius-sm);
    overflow:hidden;
}
.table-wrap th,.table-wrap td{
    border:1px solid var(--border);
    padding:12px 14px;
    font-size:15px;
    text-align:left;
}
.table-wrap th{
    background:rgba(59,130,246,0.15);
    color:var(--text-bright);
    font-weight:600;
}
.table-wrap tr:hover td{
    background:rgba(59,130,246,0.08);
}
.table-title{
    font-size:20px;
    color:var(--text-bright);
    margin-bottom:16px;
    font-weight:600;
}

/* ===================== 弹窗 ===================== */
.modal-mask{
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(7,15,31,0.85);
    backdrop-filter:blur(6px);
    z-index:99;
    align-items:center;
    justify-content:center;
}
.modal-mask.show{ display:flex; }
.modal-box{
    width:90%;
    max-width:700px;
    background:var(--card-solid);
    border:1px solid var(--border-bright);
    border-radius:var(--radius);
    padding:32px;
    box-shadow:var(--shadow-2);
    position:relative;
}
.modal-box::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent), transparent);
    border-radius:var(--radius) var(--radius) 0 0;
}
.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}
.modal-title{
    font-size:22px;
    color:var(--text-bright);
    font-weight:600;
}
.close-modal{
    cursor:pointer;
    font-size:28px;
    color:var(--text-dim);
    text-decoration:none;
    line-height:1;
    transition:color 0.2s;
}
.close-modal:hover{ color:var(--danger); }

/* ===================== 登录页特有 ===================== */
.login-wrap{ width:100%; max-width:720px; margin:40px auto; }
.logo-wrap-center{ text-align:center; margin-bottom:36px; }
.logo-img-center{ height:56px; margin-bottom:16px; }
.login-title{
    font-size:22px;
    color:var(--text-bright);
    font-weight:600;
    letter-spacing:2px;
    background:linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.login-btn{ width:100%; padding:14px; }
.bottom-desc{
    text-align:center;
    margin-top:24px;
    color:var(--text-dim);
    font-size:14px;
}

/* ===================== 视频上传区特有 ===================== */
.upload-hint{
    font-size:14px;
    color:var(--text-dim);
    margin-top:8px;
    line-height:1.6;
}
.video-preview{
    margin-top:16px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    overflow:hidden;
    background:#000;
}
.video-preview video{ width:100%; display:block; }
.current-video-info{
    margin-top:12px;
    padding:14px 18px;
    background:rgba(59,130,246,0.08);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:15px;
    color:var(--text-dim);
    line-height:1.8;
}
.current-video-info strong{ color:var(--text-bright); }

/* ===================== 日志页特有 ===================== */
.log-list{
    max-height:70vh;
    overflow-y:auto;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:rgba(7,15,31,0.5);
}
.log-item{
    padding:14px 20px;
    border-bottom:1px solid var(--border);
    font-size:15px;
    line-height:1.8;
    color:var(--text-dim);
    font-family:var(--font-mono);
}
.log-item:last-child{ border-bottom:none; }
.log-item:hover{ background:rgba(59,130,246,0.06); }
.log-time{ color:var(--accent-2); font-weight:600; }
.log-user{ color:var(--text-bright); font-weight:600; }
.log-action{ color:#fcd34d; }
.log-detail{ color:var(--text-dim); }

/* ===================== 状态点 ===================== */
.status-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 8px rgba(34,197,94,0.6);
    animation:pulse 2s ease-in-out infinite;
    margin-right:6px;
    vertical-align:middle;
}
@keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.4; }
}

/* ===================== 响应式 ===================== */
@media(max-width:768px){
    body{ padding:16px 8px; }
    .container{ padding:20px; }
    .header-top{ flex-direction:column; gap:20px; align-items:flex-start; }
    .user-logout-line{ justify-content:flex-end; width:100%; flex-wrap:wrap; }
    .card-row{ grid-template-columns:1fr; }
    .form-wrap{ padding:20px; }
}

/* 无障碍：减少动画 */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}