/* ============================================================
   视频素材记录收集管理系统 - 科技风样式
   色调：深空蓝 + 青色光感；武汉元素：黄鹤楼轮廓 / 江浪纹
   全站按钮：纯方形（无圆角）
   ============================================================ */

:root{
    --bg:#0a0e1a;
    --bg-soft:#111827;
    --panel:#141b2d;
    --panel-2:#1a2336;
    --line:#243049;
    --txt:#e6edf6;
    --txt-dim:#8a94a6;
    --blue:#2f6bff;
    --cyan:#00d4ff;
    --glow:rgba(47,107,255,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:"Microsoft YaHei","PingFang SC",-apple-system,Segoe UI,sans-serif;
    background:var(--bg);
    color:var(--txt);
    font-size:14px;
    line-height:1.6;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow-x:hidden;
}
a{color:var(--cyan);text-decoration:none}

/* 科技感背景：网格 + 光晕 + 武汉江浪装饰 */
body::before{
    content:"";position:fixed;inset:0;z-index:-2;
    background:
        radial-gradient(900px 500px at 85% -5%, rgba(47,107,255,.18), transparent 60%),
        radial-gradient(700px 400px at 5% 100%, rgba(0,212,255,.12), transparent 60%),
        linear-gradient(180deg,#0a0e1a,#0c1322);
}
body::after{
    content:"";position:fixed;inset:0;z-index:-1;opacity:.05;pointer-events:none;
    background-image:
        linear-gradient(rgba(47,107,255,.6) 1px,transparent 1px),
        linear-gradient(90deg,rgba(47,107,255,.6) 1px,transparent 1px);
    background-size:42px 42px;
}

/* ============ 登录页 ============ */
.login-page{justify-content:center;align-items:center;display:flex}
.login-bg{position:fixed;inset:0;z-index:-1;
    background:radial-gradient(600px 400px at 50% 30%,rgba(47,107,255,.25),transparent 70%)}
.login-wrap{width:100%;max-width:420px;padding:20px;position:relative;z-index:1}
.login-card{
    background:rgba(20,27,45,.92);border:1px solid var(--line);
    padding:38px 34px 26px;text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(47,107,255,.08) inset;
}
.login-brand .brand-mark{
    width:64px;height:64px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:24px;color:#fff;letter-spacing:1px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    border:1px solid rgba(0,212,255,.5);
}
.login-brand h1{font-size:19px;font-weight:700;letter-spacing:.5px}
.login-brand p{color:var(--txt-dim);font-size:12px;margin-top:6px;letter-spacing:2px}
.login-form{margin-top:26px;text-align:left}
.login-form label{display:block;font-size:12px;color:var(--txt-dim);margin:14px 0 6px}
.login-form input{
    width:100%;padding:11px 12px;background:var(--bg-soft);border:1px solid var(--line);
    color:var(--txt);font-size:14px;outline:none;
}
.login-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px var(--glow)}
.login-error{background:rgba(220,40,40,.15);border:1px solid rgba(220,40,40,.5);color:#ff8a8a;
    padding:10px;font-size:13px;margin-bottom:6px}
.login-foot{margin-top:22px;color:var(--txt-dim);font-size:11px;letter-spacing:1px}

/* ============ 布局 ============ */
.layout{display:flex;flex:1;min-height:0}
.sidebar{
    width:230px;flex-shrink:0;background:linear-gradient(180deg,#0d1424,#0a0f1c);
    border-right:1px solid var(--line);padding:20px 0;display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
}
.side-brand{padding:0 22px 22px;border-bottom:1px solid var(--line);margin-bottom:14px}
.side-brand .logo{display:flex;align-items:center;gap:10px}
.side-brand .logo .mk{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));
    border:1px solid rgba(0,212,255,.5);font-size:15px}
.side-brand .t1{font-size:15px;font-weight:700;line-height:1.2}
.side-brand .t2{font-size:11px;color:var(--txt-dim);letter-spacing:1px}

.nav{list-style:none;flex:1;padding:0 12px}
.nav li{margin-bottom:4px}
.nav a{
    display:flex;align-items:center;gap:11px;padding:11px 14px;color:var(--txt-dim);
    font-size:13.5px;border-left:3px solid transparent;transition:.18s;
}
.nav a:hover{color:var(--txt);background:rgba(47,107,255,.08)}
.nav a.active{color:#fff;background:rgba(47,107,255,.16);border-left-color:var(--cyan)}
.nav a .ic{width:18px;text-align:center;font-size:15px}
.side-foot{padding:14px 22px 0;border-top:1px solid var(--line);color:var(--txt-dim);font-size:11px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
    height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
    padding:0 26px;background:rgba(13,20,36,.85);border-bottom:1px solid var(--line);
    backdrop-filter:blur(6px);position:sticky;top:0;z-index:20;
}
.topbar h2{font-size:17px;font-weight:700;letter-spacing:.5px}
.topbar .crumb{color:var(--txt-dim);font-size:12px;margin-top:2px}
.topbar .user{display:flex;align-items:center;gap:14px}
.topbar .user .uname{color:var(--txt-dim);font-size:13px}
.topbar .user .uname b{color:var(--cyan)}

.content{flex:1;padding:24px 26px 40px;overflow:auto}

/* ============ 卡片 / 面板 ============ */
.panel{background:var(--panel);border:1px solid var(--line);margin-bottom:20px}
.panel-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;
    justify-content:space-between;font-size:14px;font-weight:600}
.panel-h .ph-sub{font-size:12px;color:var(--txt-dim);font-weight:400}
.panel-b{padding:18px}

/* ============ 方形按钮（全站统一） ============ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 16px;border:1px solid var(--line);background:var(--panel-2);color:var(--txt);
    font-size:13px;cursor:pointer;border-radius:0;transition:.15s;line-height:1.4;
    font-family:inherit;
}
.btn:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 12px var(--glow)}
.btn-primary{background:linear-gradient(135deg,var(--blue),#3b82f6);border-color:transparent;color:#fff}
.btn-primary:hover{box-shadow:0 0 16px var(--glow);filter:brightness(1.08)}
.btn-cyan{background:linear-gradient(135deg,var(--cyan),#0891b2);border-color:transparent;color:#04121a;font-weight:600}
.btn-cyan:hover{color:#04121a;box-shadow:0 0 16px rgba(0,212,255,.4)}
.btn-green{background:#16a34a;border-color:transparent;color:#fff}
.btn-green:hover{box-shadow:0 0 14px rgba(22,163,74,.5)}
.btn-warn{background:#d97706;border-color:transparent;color:#fff}
.btn-warn:hover{box-shadow:0 0 14px rgba(217,119,6,.5)}
.btn-danger{background:#dc2626;border-color:transparent;color:#fff}
.btn-danger:hover{box-shadow:0 0 14px rgba(220,38,38,.5)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-block{width:100%;padding:11px;margin-top:18px;font-size:15px;letter-spacing:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ============ 状态标签（带科技感动效） ============ */
.st-badge{
    display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:12px;
    color:var(--c);border:1px solid var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
    letter-spacing:1px;font-weight:600;position:relative;overflow:hidden;
    animation: st-breathe 2.2s ease-in-out infinite;
}
.st-badge::before{
    content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
    animation: st-sweep 2.6s linear infinite;
}
.st-badge i{font-style:normal;font-size:12px;display:inline-block;min-width:1em;text-align:center}

/* 每个状态专属动画（七大状态） */
.st-1 .st-badge i{animation: st-pulse 2s ease-in-out infinite}      /* 已创建：脉冲待激活 */
.st-2 .st-badge{animation-duration:2.8s}                            /* 待收集：缓慢呼吸 */
.st-3 .st-badge i{animation: st-spin 1.3s linear infinite}          /* 收集中：旋转 */
.st-4 .st-badge i{animation: st-pop 1.6s ease-in-out infinite}      /* 收集完成：弹出 */
.st-5 .st-badge i{animation: st-scan .8s ease-in-out infinite alternate} /* 系统审核：扫描 */
.st-6 .st-badge i{animation: st-glow 1.5s ease-in-out infinite alternate} /* 审核通过：发光 */
.st-7 .st-badge i{animation: st-twinkle 1.4s ease-in-out infinite}  /* 已完成：星光闪烁 */

/* 动画关键帧 */
@keyframes st-breathe{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent)}
    50%{box-shadow:0 0 8px 1px color-mix(in srgb,var(--c) 45%,transparent)}
}
@keyframes st-sweep{
    0%{left:-100%} 100%{left:100%}
}
@keyframes st-pulse{
    0%,100%{opacity:.7;transform:scale(.92)}
    50%{opacity:1;transform:scale(1.05)}
}
@keyframes st-spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
@keyframes st-pop{
    0%,100%{transform:scale(.95);opacity:.8}
    50%{transform:scale(1.12);opacity:1}
}
@keyframes st-scan{
    0%{transform:translateY(-1px);opacity:.6}
    100%{transform:translateY(1px);opacity:1}
}
@keyframes st-glow{
    0%{filter:drop-shadow(0 0 0 var(--c))}
    100%{filter:drop-shadow(0 0 4px var(--c))}
}
@keyframes st-twinkle{
    0%,100%{opacity:.7;transform:scale(.95)}
    50%{opacity:1;transform:scale(1.08) rotate(15deg)}
}

/* ============ 表格 ============ */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
.table th{color:var(--txt-dim);font-weight:600;font-size:12.5px;background:var(--bg-soft);
    position:sticky;top:0;white-space:nowrap}
.table tbody tr:hover{background:rgba(47,107,255,.05)}
.table .op{white-space:nowrap}
.table .op .btn{margin-right:5px}
.empty{padding:40px;text-align:center;color:var(--txt-dim)}

/* ============ 筛选条 ============ */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar .field{display:flex;align-items:center;gap:6px}
.toolbar label{color:var(--txt-dim);font-size:12.5px}
.toolbar select,.toolbar input[type=text],.toolbar input[type=date]{
    padding:7px 10px;background:var(--bg-soft);border:1px solid var(--line);color:var(--txt);
    font-size:13px;outline:none;border-radius:0;font-family:inherit;
}
.toolbar select:focus,.toolbar input:focus{border-color:var(--cyan)}
.toolbar .grow{flex:1}

/* ============ 表单 ============ */
.form-row{margin-bottom:18px}
.form-row label{display:block;font-size:13px;color:var(--txt-dim);margin-bottom:7px}
.form-row label .req{color:#ff7a7a}
.form-row input[type=text],.form-row input[type=date],.form-row select,
.form-row textarea{
    width:100%;padding:10px 12px;background:var(--bg-soft);border:1px solid var(--line);
    color:var(--txt);font-size:14px;outline:none;border-radius:0;font-family:inherit;
}
.form-row textarea{min-height:90px;resize:vertical}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
    border-color:var(--cyan);box-shadow:0 0 0 2px var(--glow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-actions{display:flex;gap:10px;margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}

/* ============ 材料列表 ============ */
.material-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.material-item .idx{width:24px;height:24px;flex-shrink:0;background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:12px}
.material-item .mtxt{flex:1;background:var(--bg-soft);border:1px solid var(--line);padding:8px 10px;font-size:13px}
.material-item .mdel{cursor:pointer;color:#ff7a7a;font-size:12px;padding-top:6px}

/* ============ 提示 ============ */
.alert{padding:11px 14px;font-size:13px;margin-bottom:16px;border:1px solid}
.alert-ok{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.5);color:#86efac}
.alert-err{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.5);color:#fca5a5}
.alert-info{background:rgba(47,107,255,.12);border-color:rgba(47,107,255,.5);color:#93c5fd}

/* ============ 详情 ============ */
.detail-grid{display:grid;grid-template-columns:140px 1fr;gap:1px;background:var(--line);
    border:1px solid var(--line)}
.detail-grid dt{background:var(--bg-soft);padding:11px 14px;color:var(--txt-dim);font-size:13px}
.detail-grid dd{background:var(--panel);padding:11px 14px;font-size:13.5px}

/* ============ 进度条 ============ */
.progress{height:8px;background:var(--bg-soft);border:1px solid var(--line);position:relative;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan))}

/* 统计卡 */
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px}
.stat{background:var(--panel);border:1px solid var(--line);padding:16px 14px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-10px;top:-10px;width:50px;height:50px;
    border:1px solid var(--line);transform:rotate(45deg);opacity:.4}
.stat .num{font-size:26px;font-weight:800;color:#fff;line-height:1}
.stat .lab{font-size:12px;color:var(--txt-dim);margin-top:8px;letter-spacing:1px}
.stat .dot{width:8px;height:8px;display:inline-block;margin-right:6px}

/* ============ 底部版权（固定常驻） ============ */
.site-footer{
    flex-shrink:0;border-top:1px solid var(--line);
    background:linear-gradient(180deg,#0b1120,#0a0e1a);
    padding:16px 26px;text-align:center;
    font-size:12px;color:var(--txt-dim);letter-spacing:.5px;
}
.site-footer .copy{color:#9fb0c8}
.site-footer .sep{color:var(--blue);margin:0 6px}

/* 武汉元素装饰（黄鹤楼剪影 + 江浪线） */
.wh-deco{position:fixed;bottom:0;right:0;width:300px;height:160px;z-index:-1;opacity:.10;pointer-events:none}
.wh-deco svg{width:100%;height:100%}

@media (max-width:1100px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
    .sidebar{display:none}.form-grid{grid-template-columns:1fr}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
}