:root{--bg:#f7fafc;--card:#fff;--border:#e5e7eb;--text:#111827;--muted:#6b7280;--primary:#2563eb;--accent:#f59e0b;}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial; margin:0; background:linear-gradient(180deg,#ffffff 0%,#f7fafc 100%); color:var(--text);}
a{color:inherit; text-decoration:none}

.site-header{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.brand-wrap{display:flex; align-items:center; gap:10px; padding:10px 0}
.site-logo{height:50px}
.site-brand{font-size:18px; font-weight:700; letter-spacing:.6px}
.menu{display:flex; align-items:center; gap:16px}
.menu a{padding:8px 10px; border-radius:8px}
.menu a:hover{background:#f3f4f6}

.container{max-width:1120px; margin:0 auto; padding:5px; text-align:center}

.hero{margin:10px 0 20px; padding:28px 18px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(245,158,11,.08)); box-shadow:0 6px 14px rgba(16,24,40,.06)}
.hero h1{margin:0 0 8px; font-size:28px; font-weight:800}
.hero p{margin:4px 0; color:var(--muted)}
.hero-cta{margin-top:10px; display:flex; gap:10px; justify-content:center}
.btn{padding:10px 16px; border-radius:10px; border:0; cursor:pointer}
.btn-primary{background:var(--primary); color:#fff}
.btn-outline{background:#fff; border:1px solid var(--border); color:var(--text)}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:10px 0 18px}
.feature{padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff}
.feature h3{margin:0 0 6px; font-size:16px; font-weight:700}
.feature p{margin:0; color:var(--muted); font-size:13px}

.toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:12px 0 16px}
.toolbar input{padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; outline:none; min-width:220px}
.toolbar button{padding:10px 16px; border:0; border-radius:10px; background:var(--primary); color:#fff; cursor:pointer}

.radio-group{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px}
.radio-item{display:inline-flex; align-items:center; position:relative}
.radio-item input{position:absolute; opacity:0; width:0; height:0}
.radio-item span{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--text); font-size:14px}
.radio-item input:checked + span{border-color:var(--primary); background:rgba(37,99,235,.08); color:var(--primary)}

.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; justify-items:center}
.card{width:280px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--card); box-shadow:0 6px 14px rgba(16,24,40,.06); transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(16,24,40,.12)}
.card img{width:100%; height:160px; object-fit:cover; display:block}
.card .content{padding:14px}
.card h3{margin:0; font-size:16px; font-weight:600}
.meta{color:var(--muted); font-size:12px; margin-top:6px}
.card-actions{margin-top:10px; display:flex; justify-content:center}
.btn-link{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:#fff}

.steps{margin:18px 0 10px; color:var(--muted); font-size:13px}
.steps b{color:var(--text)}

.pagination{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px}
.pagination a{padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:#fff}
.page-info{color:var(--muted)}

.covers{display:flex; gap:12px; overflow-x:auto; padding-bottom:8px}
.covers img{height:160px; border-radius:8px; object-fit:cover; border:1px solid var(--border)}

.contact{margin:28px 0 8px; padding:18px; border:1px solid var(--border); border-radius:12px; background:#fff}
.contact h2{margin:0 0 8px; font-size:20px}
.contact p{margin:0; color:var(--muted)}

.detail{text-align:left; margin:16px 0}
.back-link{display:inline-block; font-size:13px; color:var(--muted); padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#fff}
.back-link:hover{color:var(--primary); border-color:var(--primary); background:rgba(37,99,235,.06)}
.detail-title{margin:10px 0 6px; font-size:24px; font-weight:800}
.detail-meta{color:var(--muted); margin:6px 0 10px}
.detail-meta span{margin-right:6px}
.detail .price{color:var(--accent); font-weight:700}
.detail article.content{margin-top:10px; padding:18px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 6px 14px rgba(16,24,40,.06)}
.detail article.content p{line-height:1.8; font-size:14px}
.detail article.content a{color:var(--primary)}
.detail article.content a:hover{text-decoration:underline}
.btn-sm{padding:6px 10px; font-size:12px}

.site-footer{background:#fff; border-top:1px solid var(--border); margin-top:20px}
.footer-inner{padding:12px 0}
.beian{margin:12px; font-size:12px; color:var(--muted)}
.beian a{color:var(--muted)}
.beian a:hover{color:var(--primary)}

.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:flex-start}
.footer-section{text-align:left}
.footer-title{font-size:14px; font-weight:700; color:var(--text); margin-bottom:8px}
.link-list,.partner-list,.contact-list{display:flex; flex-wrap:wrap; gap:8px}
.link-list a,.partner-list a{display:inline-block; font-size:13px; color:var(--muted); padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:#fff}
.link-list a:hover,.partner-list a:hover{border-color:var(--primary); color:var(--primary); background:rgba(37,99,235,.06)}
.contact-list span{font-size:13px; color:var(--muted); padding:4px 0}

.table-panel{margin:12px 0; padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 6px 14px rgba(16,24,40,.06); text-align:left}
.table-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.table-title{margin:0; font-size:18px; font-weight:700}
.table-body{width:100%}
.table-responsive{width:100%; overflow-x:auto}
.data-table{width:100%; min-width:720px; border-collapse:separate; border-spacing:0}
.data-table thead th{background:#fff; border-bottom:2px solid var(--border); font-weight:700}
.data-table th,.data-table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
.data-table tbody tr:nth-child(even){background:#f8fafc}
.data-table tbody tr:hover{background:#f3f4f6}
.data-table .cell-id{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas; color:var(--muted)}
.data-table .cell-price{color:var(--accent); font-weight:700}
.data-table .cell-cover img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border)}