/* === 无人机驾照考证助手 — 主样式表 === */
:root {
  --pri: #2563eb; --pri-d: #1d4ed8; --pri-l: #dbeafe;
  --acc: #f97316; --acc-d: #ea580c; --acc-l: #fff7ed;
  --grn: #059669; --grn-l: #ecfdf5;
  --bg: #f8fafc; --card: #fff; --text: #0f172a; --t2: #475569; --t3: #94a3b8;
  --text2: var(--t2); --text3: var(--t3); --ok: var(--grn);
  --border: #e2e8f0; --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.06); --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
  --radius: 14px; --radius-sm: 10px;
}

/* === Reset & Base === */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pri); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--pri-d); }

/* === Header & Nav === */
.header {
  background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; height:62px;
}
.logo { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; color:var(--text); }
.logo-icon { font-size:26px; }
.nav { display:flex; gap:24px; align-items:center; }
.nav a { color:var(--t2); font-size:14px; font-weight:500; padding:6px 0; position:relative; }
.nav a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--pri); border-radius:1px; transition:width 0.2s;
}
.nav a:hover::after { width:100%; }
.nav a:hover { color:var(--pri); }
.nav .btn-pri {
  background:var(--pri); color:#fff; padding:8px 20px;
  border-radius:20px; font-weight:600; transition:all 0.2s;
}
.nav .btn-pri::after { display:none; }
.nav .btn-pri:hover {
  background:var(--pri-d); transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,0.3); color:#fff;
}
.menu-btn { display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--text); padding:4px; }

/* Dropdown */
.nav-drop { position:relative; }
.nav-drop-toggle { cursor:pointer; }
.nav-drop-menu {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:8px 0; min-width:160px; z-index:200;
}
.nav-drop:hover .nav-drop-menu { display:block; }
.nav-drop-menu a {
  display:block; padding:10px 20px; font-size:13px; color:var(--t2); white-space:nowrap;
}
.nav-drop-menu a:hover { background:var(--pri-l); color:var(--pri); }
.nav-drop-menu a::after { display:none; }

/* === Footer === */
.footer {
  background:linear-gradient(180deg,#1e293b,#0f172a); color:#94a3b8;
  padding:48px 20px 24px; margin-top:52px;
}
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:36px;
}
.footer h4 { color:#f1f5f9; font-size:15px; margin-bottom:14px; font-weight:600; }
.footer p { font-size:13px; line-height:1.8; }
.footer a { color:#94a3b8; font-size:13px; display:block; margin-bottom:8px; transition:color 0.2s; }
.footer a:hover { color:var(--pri); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.06); padding-top:20px;
  text-align:center; font-size:12px; color:#64748b;
}

@media (max-width:768px) {
  .footer { padding:36px 20px 20px; margin-top:36px; }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:24px 32px;
    margin-bottom:24px;
  }
  .footer-grid > div:first-child {
    grid-column:1 / -1;
    text-align:center;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .footer h4 { font-size:14px; margin-bottom:10px; }
  .footer p { font-size:12px; }
  .footer a { font-size:12px; margin-bottom:6px; }
  .footer-bottom { font-size:11px; padding-top:16px; }
}

/* === Layout === */
.page { min-height:60vh; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section { padding:52px 0; }

/* === Hero === */
.hero-section {
  background:linear-gradient(160deg,#1e40af,#2563eb,#1d4ed8);
  color:#fff; text-align:center; padding:56px 20px;
  position:relative; overflow:hidden;
}
.hero-section::before {
  content:''; position:absolute; top:-50%; right:-20%;
  width:400px; height:400px; background:rgba(255,255,255,0.03); border-radius:50%;
}
.hero-section::after {
  content:''; position:absolute; bottom:-30%; left:-10%;
  width:300px; height:300px; background:rgba(255,255,255,0.03); border-radius:50%;
}
.hero-section>* { position:relative; z-index:1; }
.hero-section h1 { font-size:36px; font-weight:800; margin-bottom:12px; letter-spacing:-0.5px; }
.hero-section p { font-size:16px; opacity:0.9; max-width:600px; margin:0 auto; line-height:1.7; }

/* === Card === */
.card {
  background:var(--card); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  transition:box-shadow 0.25s,transform 0.25s;
}
.card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
a.card { display:block; color:inherit; }
a.card:hover { color:inherit; }

/* === Buttons === */
.btn {
  display:inline-block; padding:12px 28px; border-radius:26px;
  font-size:15px; font-weight:600; cursor:pointer; border:none;
  text-align:center; transition:all 0.2s; text-decoration:none; letter-spacing:0.2px;
}
.btn-primary { background:var(--pri); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,0.2); }
.btn-primary:hover { background:var(--pri-d); transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,0.3); color:#fff; }
.btn-accent { background:var(--acc); color:#fff; box-shadow:0 2px 8px rgba(249,115,22,0.2); }
.btn-accent:hover { background:var(--acc-d); transform:translateY(-2px); box-shadow:0 6px 20px rgba(249,115,22,0.3); color:#fff; }
.btn-outline { border:2px solid var(--pri); color:var(--pri); background:transparent; }
.btn-outline:hover { background:var(--pri); color:#fff; transform:translateY(-1px); }
.btn-lg { padding:16px 44px; font-size:17px; border-radius:30px; }
.btn-sm { padding:8px 18px; font-size:13px; border-radius:20px; }

/* === Grid === */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* === Badge === */
.badge { display:inline-block; padding:5px 12px; border-radius:12px; font-size:12px; font-weight:600; letter-spacing:0.3px; }
.badge-blue { background:var(--pri-l); color:var(--pri); }
.badge-green { background:var(--grn-l); color:var(--grn); }
.badge-orange { background:var(--acc-l); color:var(--acc); }

/* === Table === */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }
.table-scroll table { min-width:600px; width:100%; border-collapse:collapse; }
.table-scroll th {
  background:#f8fafc; text-align:left; padding:12px 16px;
  font-size:13px; font-weight:600; color:var(--t2); border-bottom:2px solid var(--border);
}
.table-scroll td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; }

/* === Breadcrumb === */
.breadcrumb {
  max-width:1200px; margin:0 auto; padding:8px 20px; font-size:12px;
  color:var(--t3); background:rgba(248,250,252,0.6); border-bottom:1px solid var(--border);
}
.breadcrumb a { color:var(--t3); }
.breadcrumb a:hover { color:var(--pri); }

/* === Utilities === */
.text-center { text-align:center; }
.mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mt-3 { margin-top:24px; }
.mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; } .mb-3 { margin-bottom:24px; }

/* === Option Card (assessment) === */
.option-card { cursor:pointer; transition:all 0.2s; }
.option-card:hover { border-color: var(--pri) !important; }

/* === Responsive === */
@media (max-width:1024px) {
  .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .section { padding:36px 0; }
  .hero-section { padding:44px 16px; }
  .hero-section h1 { font-size:24px; }
  .hero-section p { font-size:14px; }

  .nav {
    display:none; position:absolute; top:62px; left:0; right:0;
    background:#fff; flex-direction:column; padding:20px; gap:0;
    border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg);
  }
  .nav.open { display:flex; }
  .nav a { padding:12px 0; border-bottom:1px solid var(--border); }
  .nav a:last-child { border-bottom:none; }
  .nav-drop-menu { position:static; transform:none; box-shadow:none; border:none; padding:0 0 0 16px; }
  .nav-drop:hover .nav-drop-menu { display:none; }
  .nav-drop.open .nav-drop-menu { display:block; }
  .menu-btn { display:block; }
}
@media (max-width:640px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
}