/**
 * compliance-style.css — 算法备案统一合规页面共享样式
 * 适用于 privacy / complaint / opt-out / feedback / algorithm-disclosure / about
 * 配套调用：<link rel="stylesheet" href="/compliance-style.css">
 *
 * 配套 JS：<script src="/compliance_footer.js">
 */

:root{
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
  --border:#e2e8f0; --border-strong:#cbd5e1;
  --text:#0f172a; --text-muted:#475569; --text-light:#94a3b8;
  --primary:#0c4a6e; --primary-2:#0369a1; --primary-bg:#f0f9ff;
  --accent:#0ea5e9; --accent-2:#10b981; --accent-3:#f59e0b;
  --danger:#dc2626; --warn:#ea580c; --success:#16a34a;
  --shadow-sm:0 1px 3px rgba(15,23,42,0.04),0 2px 8px rgba(15,23,42,0.02);
  --shadow-md:0 4px 16px rgba(15,23,42,0.06),0 2px 6px rgba(15,23,42,0.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,0.10),0 4px 12px rgba(15,23,42,0.06);
  --radius:14px; --radius-sm:10px; --radius-lg:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.75;
  min-height:100vh; padding-bottom:24px;
}
a{color:var(--primary-2); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--primary); text-decoration:underline; text-underline-offset:3px}

.disclaimer-bar{background:#FFF3E0; color:#E65100; padding:8px 16px; text-align:center; font-size:13px; border-bottom:1px solid #FFE0B2; line-height:1.5;}
.disclaimer-bar b{color:#BF360C}

.topnav{background:rgba(255,255,255,0.85); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;}
.topnav-inner{max-width:1200px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--primary); font-size:16px}
.brand-logo{width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 50%,var(--accent) 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:700; box-shadow:0 4px 12px rgba(12,74,118,0.25);}
.brand-text small{display:block; font-size:11px; font-weight:400; color:var(--text-muted); margin-top:1px}
.nav-links{display:flex; gap:6px; flex-wrap:wrap}
.nav-links a{padding:6px 14px; border-radius:8px; font-size:14px; color:var(--text-muted); font-weight:500; transition:all .18s ease;}
.nav-links a:hover{background:var(--primary-bg); color:var(--primary-2); text-decoration:none}
.nav-links a.active{background:var(--primary); color:#fff}
.nav-links a.active:hover{background:var(--primary-2)}

.hero{max-width:960px; margin:32px auto 24px; padding:0 24px;}
.hero-card{background:linear-gradient(135deg,#0c4a6e 0%,#0369a1 55%,#0ea5e9 100%); color:#fff; border-radius:var(--radius-lg); padding:48px 40px; box-shadow:var(--shadow-lg),0 8px 28px rgba(12,74,118,0.30); position:relative; overflow:hidden;}
.hero-card::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size:36px 36px; pointer-events:none;}
.hero-card::after{content:""; position:absolute; top:-40%; right:-15%; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,233,0.35) 0%, transparent 70%); pointer-events:none;}
.hero-icon{width:64px; height:64px; border-radius:18px; margin-bottom:18px; background:rgba(255,255,255,0.16); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:32px; position:relative; z-index:1; border:1px solid rgba(255,255,255,0.22);}
.hero h1{font-size:30px; line-height:1.25; margin-bottom:10px; font-weight:700; position:relative; z-index:1; letter-spacing:-0.5px;}
.hero p{font-size:15px; color:rgba(255,255,255,0.86); max-width:680px; position:relative; z-index:1}
.hero-actions{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1}
.hero-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; font-size:14px; font-weight:600; background:rgba(255,255,255,0.95); color:var(--primary); transition:all .2s ease; box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.hero-btn:hover{background:#fff; transform:translateY(-1px); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.hero-btn.ghost{background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.28);}
.hero-btn.ghost:hover{background:rgba(255,255,255,0.22)}

.container{max-width:960px; margin:0 auto; padding:0 24px}
.toc{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin-bottom:24px; box-shadow:var(--shadow-sm); display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;}
.toc-label{font-size:13px; font-weight:600; color:var(--text-muted); margin-right:4px}
.toc a{font-size:13px; color:var(--primary-2); padding:4px 12px; border-radius:6px; background:var(--primary-bg); transition:all .18s ease;}
.toc a:hover{background:var(--primary); color:#fff; text-decoration:none}

.section-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px 34px; margin-bottom:20px; box-shadow:var(--shadow-sm); transition:box-shadow .25s ease;}
.section-card:hover{box-shadow:var(--shadow-md)}
.section-num{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; margin-right:12px; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%); color:#fff; font-size:15px; font-weight:700; vertical-align:middle; box-shadow:0 4px 10px rgba(12,74,118,0.20);}
.section-title{font-size:21px; font-weight:700; color:var(--primary); padding-bottom:14px; margin-bottom:18px; display:flex; align-items:center; border-bottom:1px solid var(--border);}
.section-title-text{vertical-align:middle}
.section-card h3{font-size:16px; font-weight:600; color:var(--text); margin:18px 0 10px; padding-left:10px; border-left:3px solid var(--accent);}
.section-card p{font-size:15px; color:var(--text); margin-bottom:12px}
.section-card p strong{color:var(--primary)}
.section-card ul, .section-card ol{margin:8px 0 14px 22px; font-size:15px}
.section-card li{margin-bottom:6px; color:var(--text)}

.callout{border-radius:var(--radius-sm); padding:14px 18px; margin:14px 0; font-size:14px; display:flex; gap:10px; align-items:flex-start; border-left:4px solid;}
.callout-info{background:var(--primary-bg); border-color:var(--accent); color:#0c4a6e}
.callout-warn{background:#fef3c7; border-color:var(--accent-3); color:#92400e}
.callout-danger{background:#fee2e2; border-color:var(--danger); color:#991b1b}
.callout-success{background:#dcfce7; border-color:var(--success); color:#166534}
.callout-icon{font-size:18px; line-height:1.4; flex-shrink:0}
.callout-body{flex:1; line-height:1.7}

.kw{background:linear-gradient(180deg, transparent 60%, rgba(14,165,233,0.20) 60%); padding:0 2px; font-weight:600; color:var(--primary);}

table{width:100%; border-collapse:collapse; margin:14px 0; background:var(--surface); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm);}
th, td{padding:11px 14px; text-align:left; font-size:14px; border-bottom:1px solid var(--border)}
th{background:var(--surface-2); font-weight:600; color:var(--primary); font-size:13px; letter-spacing:0.3px; text-transform:uppercase;}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr:hover{background:var(--primary-bg); transition:background .15s ease}
tbody tr:last-child td{border-bottom:none}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:14px}
.contact-card{background:linear-gradient(135deg, var(--primary-bg) 0%, #ffffff 100%); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; display:flex; align-items:center; gap:12px; transition:all .2s ease;}
.contact-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.contact-icon{width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; flex-shrink:0;}
.contact-card a{font-weight:600; font-size:15px}

.site-footer{text-align:center; padding:24px 16px; font-size:13px; color:var(--text-light); border-top:1px solid var(--border); margin-top:48px; background:var(--surface);}
.site-footer a{color:var(--text-muted); margin:0 6px}
.site-footer a:hover{color:var(--primary-2)}
.footer-divider{color:var(--border-strong); margin:0 4px}

@media (max-width:768px){
  .hero-card{padding:36px 24px}
  .hero h1{font-size:24px}
  .hero-card::after{width:240px; height:240px}
  .section-card{padding:22px 20px}
  .section-title{font-size:18px}
  .topnav-inner{padding:10px 16px; flex-wrap:wrap}
  .nav-links{font-size:13px}
  .container{padding:0 16px}
  .hero{padding:0 16px; margin:20px auto 16px}
  .toc{padding:14px 16px}
}
@media (max-width:480px){
  .hero-card{padding:28px 20px; border-radius:12px}
  .hero h1{font-size:20px}
  .hero p{font-size:14px}
  .hero-btn{padding:8px 16px; font-size:13px}
  .section-num{width:30px; height:30px; font-size:13px; margin-right:8px}
  .section-title{font-size:16px}
  table{font-size:13px}
  th, td{padding:8px 10px}
}