/* 基础重置和变量 */
:root {
    --primary-blue: #0A1A3A;
    --accent-gold: #D4AF37;
    --success-green: #2E8B57;
    --danger-red: #DC3545;
}

/* 页面切换 */
.page {
    display: none;
    padding: 20px;
    animation: fadeIn 0.5s;
}
.page.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 上传区域 */
.upload-zone {
    border: 3px dashed #ccc;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}
.upload-zone.drag-over {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
}

/* 顶栏 */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--primary-blue);color:#fff}
.navbar .logo{font-weight:700}
.nav-links a{color:#cfe3ff;margin-left:12px;text-decoration:none}
.nav-links a.active{color:var(--accent-gold)}

/* 按钮 */
.btn{padding:8px 12px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.btn-primary{background:var(--accent-gold);border:none;color:#07102a;padding:10px 14px;border-radius:6px;cursor:pointer}
.btn-secondary{background:transparent;border:1px solid #fff;color:#fff;padding:8px 12px;border-radius:6px}

/* 焦点样式（可访问） */
:focus{outline:3px solid rgba(212,175,55,0.25);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;padding:8px;background:#fff;border-radius:4px}

/* hero */
.hero{padding:40px 0;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(10,26,58,0.95),rgba(10,26,58,0.9));margin-bottom:20px}
.hero .highlight{color:var(--accent-gold)}
.cta-buttons{margin-top:16px}

/* 数据卡 */
.dashboard{display:flex;gap:12px;flex-wrap:wrap}
.stat-card{background:#fff;padding:18px;border-radius:10px;min-width:140px;text-align:center}
.stat-number{font-size:20px;font-weight:700}
.stat-label{font-size:12px;color:#666}

/* 上传布局 */
.upload-layout{display:flex;gap:20px}
.meta-form{flex:1;display:flex;flex-direction:column;gap:10px}
.meta-form label{display:flex;justify-content:space-between;align-items:center;gap:8px}
.options{display:flex;gap:12px}
.form-actions{display:flex;justify-content:space-between;margin-top:12px}

/* 高级面板 */
.advanced-panel{display:none;padding:10px;border-radius:6px;background:#fafafa;border:1px solid #eee;margin-top:8px}
.advanced-panel.open{display:block}

/* 警报横幅 */
.alert-banner{background:var(--danger-red);color:#fff;padding:10px;border-radius:6px;margin-bottom:12px}

/* 骨架屏 */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%);background-size:400% 100%;animation:skeleton-loading 1.2s linear infinite;border-radius:6px}
@keyframes skeleton-loading{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* 证书哈希可展开 */
#cert-hash{cursor:pointer;color:#333;background:#fff;padding:4px;border-radius:4px;border:1px dashed #ddd;display:inline-block}

/* 证书 */
.certificate{border:2px solid var(--accent-gold);padding:20px;border-radius:8px;background:#fff}
.certificate-body{display:flex;gap:20px;align-items:center}
.thumb{width:160px;height:100px;background:#f0f0f0;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center}

/* 过渡与偏好减动画 */
*{transition:background-color 220ms ease, color 220ms ease, transform 220ms ease}
@media (prefers-reduced-motion: reduce){*{transition:none;animation:none}}

/* 模态平滑 */
.modal-overlay{transition:opacity 200ms ease}
.modal{transform-origin:center;transition:transform 220ms cubic-bezier(.2,.9,.3,1),opacity 200ms}
.modal-overlay .modal{transform:translateY(-6px);opacity:0}
.modal-overlay .modal.show{transform:translateY(0);opacity:1}

/* 区块链动画 */
.blockchain-visual{display:flex;justify-content:center;margin:20px 0}
.block{border:2px solid #3498db;padding:10px;margin:0 8px;border-radius:6px}
.block.active{border-color:var(--success-green);box-shadow:0 0 12px rgba(46,204,113,0.2)}

/* 模态 */
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);z-index:999}
.modal{background:#fff;padding:18px;border-radius:8px;min-width:320px}
.modal .modal-content{margin:12px 0}
.btn-close{background:#eee;border:none;padding:6px 10px;border-radius:6px}

/* 比对视图 */
.compare-view{display:flex;gap:20px}
.compare-col{flex:1;background:#fff;padding:12px;border-radius:8px}

/* 侵权列表 */
.infringement-list{margin-top:12px}
.infringement-row{display:flex;gap:12px;padding:8px;border-bottom:1px solid #eee;align-items:center}

/* 监测页面布局 */
.monitor-controls{display:flex;gap:8px;align-items:center;margin:12px 0}
.monitor-controls input{flex:1;padding:8px;border-radius:6px;border:1px solid #ddd}
.monitor-controls select{padding:8px;border-radius:6px;border:1px solid #ddd}
.monitor-grid{display:grid;grid-template-columns:1fr 420px;gap:16px}
.monitor-left{display:flex;flex-direction:column;gap:12px}
.monitor-right{display:flex;flex-direction:column;gap:12px}
.map-legend{font-size:13px;color:#333;margin-top:6px}
.map-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 8px}
.map-legend .danger{background:var(--danger-red)}
.map-legend .medium{background:#ff9800}
.map-legend .low{background:#2E8B57}

/* 表格 */
.table-wrap{background:#fff;border-radius:8px;padding:8px;border:1px solid #eee}
.infringement-table{width:100%;border-collapse:collapse}
.infringement-table th,.infringement-table td{padding:8px;text-align:left;border-bottom:1px solid #f3f3f3}
.infringement-table tbody tr:hover{background:#fafafa}
.pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:8px}

/* responsive */
@media(max-width:900px){
    .monitor-grid{grid-template-columns:1fr}
}


/* 证书样式 */
.certificate {
    border: 2px solid var(--accent-gold);
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 区块链动画 */
.blockchain-visual {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.block {
    border: 2px solid #3498db;
    padding: 15px;
    margin: 0 10px;
    border-radius: 5px;
    position: relative;
}
.block::after {
    content: "→";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}
.block:last-child::after {
    display: none;
}
.block.active {
    border-color: var(--success-green);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

/* 侵权地图 */
.infringement-map {
    width: 100%;
    height: 300px;
    background: #f0f0f0;
    position: relative;
}
.infringement-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--danger-red);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}