:root {
  --primary:#003566; --accent:#ffd60a; --header:#001d3d; --footer:#000814; --bg:#f6f9fc; --text:#0f172a;
}
body.theme-elegant {
  --primary:#1e3a8a; --accent:#eab308; --header:#0f172a; --footer:#1e293b; --bg:#ffffff; --text:#1e293b;
}
body.theme-ivory {
  --primary:#5b341e; --accent:#d4a373; --header:#3b2f2f; --footer:#1f1d1a; --bg:#fdfbf7; --text:#1f1d1a;
}
body { background: var(--bg); color: var(--text); }

header #topnav a {
  display:inline-block; padding:.6rem 1.2rem; border-radius:1.25rem;
  border:1px solid color-mix(in srgb, var(--primary) 60%, #fff 40%);
  color:#fff !important; transition:.2s; font-weight:500;
}
header #topnav a:hover { background:rgba(255,255,255,.12); }
header #topnav ul { display:flex; gap:.5rem; align-items:center; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
header #topnav li { list-style:none; position:relative; }

.main-content {padding:16px;}

/* --- Hero, Card, Buttons --- */
.hero-wrap { margin-top:70px; }
.hero-title { color: var(--primary); font-weight:700; letter-spacing:.2px; }
.hero-img { border-radius:24px; border:4px solid rgba(0,0,0,0); box-shadow:0 10px 32px rgba(0,0,0,.2); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.hero-badge { position:absolute; bottom:-14px; right:18px; background:var(--accent); color:#000; font-weight:600; padding:.45rem .8rem; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.25); }

.card-ac { background: var(--bg); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-left:4px solid var(--accent); border-radius:16px; padding:24px; transition: box-shadow .2s, transform .2s; }
.card-ac:hover { box-shadow:0 10px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.card-ac h4 { color: var(--primary); font-weight:600; margin-top:0; }

.btn-main,
.btn-ghost,
.lang-btn {
  border-style: solid;
  border-width: 1px;
}
.btn-main { background: var(--primary); color:#fff; border-radius:1.25rem; border:1px solid var(--primary); padding:.6rem 1.4rem; font-size:1rem; }
.btn-main:hover { background: var(--accent); color:#000; border-color:var(--accent); }
.btn-ghost { border-color: var(--primary); color: var(--primary); border-radius:1.25rem; padding:.6rem 1.4rem; font-size:1rem; }
.btn-ghost:hover { background: rgba(255,214,10,.18); color: var(--primary); }

.lang-btn{ background:var(--primary); color:#fff; border:1px solid var(--primary); border-radius:1.25rem; padding:.45rem 1rem; font-size:1rem; line-height:1.4; }
.lang-btn:hover{ background:var(--accent); color:#000; border-color:var(--accent); }
.lang-dropdown{ position:relative; }
.lang-menu{ position:absolute; right:0; top:110%; min-width:14rem; background:#fff; color:#111; border:1px solid rgba(0,0,0,.08); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:.35rem; z-index:50; }
.lang-menu li{ list-style:none; padding:.55rem .75rem; border-radius:.75rem; cursor:pointer; font-size:.95rem; }
.lang-menu li:hover{ background:#f3f4f6; }
.hidden{ display:none; }

/* 移动端菜单 */
@media (max-width: 767px){
  header .mobile-menu{ position:absolute; left:0; right:0; top:100%; background:var(--header); padding:.5rem .75rem 1rem; border-bottom-left-radius:12px; border-bottom-right-radius:12px; box-shadow:0 14px 32px rgba(0,0,0,.25); display:none; }
  header .mobile-menu.open{ display:block; }
  header #topnav ul{ flex-direction:column; align-items:stretch; gap:.25rem; }
  header #topnav a{ width:100%; text-align:left; }
}

/* --- 二级菜单展开控制 --- */
header #topnav li.dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: .35rem 0;
  z-index: 60;
}
header #topnav li.dropdown.open > .dropdown-menu { display: block; }
header #topnav li.dropdown:focus-within > .dropdown-menu { display: block; }

@media (max-width: 767px){
  header #topnav li.dropdown > .dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 10px;
    margin: .25rem 0 0;
    background: var(--header);
    color: #fff;
  }
}
/* ====== 二级下拉菜单可读性 & 去边框（覆盖全局）====== */

/* 二级菜单里的链接：显示成列表项，不要边框 */
header #topnav .dropdown-menu a {
  display: block;
  padding: .5rem .9rem;
  border: 0 !important;                /* 去掉全局给的按钮边框 */
  color: #111 !important;              /* 桌面默认白底，强制深色字 */
  background: transparent;
  border-radius: .5rem;
  line-height: 1.4;
}

/* 悬停/聚焦的反馈 */
header #topnav .dropdown-menu a:hover,
header #topnav .dropdown-menu a:focus {
  background: #f3f4f6;                 /* 浅灰底 */
  text-decoration: none;
}

/* 去掉你给“层级指示”的左侧虚线（只在下拉内部禁用） */
header #topnav .dropdown-menu li > ul {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

/* 有的主题把 <li> 本身也加了边框，统一清理 */
header #topnav .dropdown-menu li {
  border: 0;
}

/* —— 移动端（你的下拉变成深色背景时）—— */
@media (max-width: 767px) {
  /* 你前面把 .dropdown-menu 背景设成 var(--header)，这里让字色继承父色（白） */
  header #topnav .dropdown-menu { color: #fff; }
  header #topnav .dropdown-menu a {
    color: inherit !important;          /* 继承白字 */
  }
  header #topnav .dropdown-menu a:hover,
  header #topnav .dropdown-menu a:focus {
    background: rgba(255,255,255,.10);  /* 暗色里用半透明白作悬停 */
  }
}
.nav-footer {
  display: table;
  margin: 0 auto;
}
.nav-footer > ul {
  display: inline-block;
  width: 120px;
  margin-left: 50px;
  vertical-align: top;
}
.nav-footer > ul > li {
  padding: 10px 0;
}