html, body { margin: 0; min-height: 100%; background: #f6f3fb; color: #1a1228;
  font-family: "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif; }
.g-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 20px; background:#5B21B6; color:#fff; position:sticky; top:0; z-index:20; }
.g-top a { color:#fff; text-decoration:none; font-weight:700; }
.g-top .langs { display:flex; gap:6px; }
.g-top .langs button { border:0; border-radius:999px; padding:6px 12px; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; }
.g-top .langs button.on { background:#fff; color:#5B21B6; font-weight:700; }
.g-shell { display:grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 56px); }
.g-nav { background:#1c142c; color:#f4f0ff; padding:16px 10px 40px; position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto; }
.g-nav a { display:block; padding:10px 12px; border-radius:10px; color:#e9d5ff; text-decoration:none; margin-bottom:4px; }
.g-nav a.on, .g-nav a:hover { background:#5B21B6; color:#fff; }
.g-main { padding:28px 32px 80px; max-width:920px; min-width:0; }
.g-main h1 { margin:0 0 8px; font-size:32px; color:#4c1d95; }
.g-main h2 { margin:28px 0 10px; font-size:22px; color:#5B21B6; }
.g-main h3 { margin:18px 0 8px; font-size:17px; }
.g-main p, .g-main li { line-height:1.65; }
.g-main .lead { font-size:17px; color:#4c1d95; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:18px 0; }
.tile { display:block; background:#fff; border-radius:14px; padding:16px; text-decoration:none; color:inherit; box-shadow:0 4px 16px rgba(91,33,182,.08); }
.tile b { display:block; margin-bottom:6px; color:#5B21B6; }
.tile span { font-size:13px; color:#7c7390; }
.box { background:#fff; border-radius:14px; padding:16px 18px; margin:12px 0; box-shadow:0 2px 10px rgba(91,33,182,.06); overflow-x:auto; max-width:100%; }
.steps { counter-reset: s; padding-left:0; list-style:none; }
.steps li { counter-increment: s; position:relative; padding:10px 10px 10px 44px; border-bottom:1px solid #ece7f5; }
.steps li:before { content: counter(s); position:absolute; left:8px; top:10px; width:24px; height:24px; border-radius:50%;
  background:#5B21B6; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }
.tip { background:#ecfdf5; color:#065f46; border-radius:12px; padding:12px 14px; margin:12px 0; }
.warn { background:#fff7ed; color:#9a3412; border-radius:12px; padding:12px 14px; margin:12px 0; }
.acct { width:100%; min-width: 520px; border-collapse:collapse; font-size:14px; }
.acct th, .acct td { border:1px solid #ece7f5; padding:8px 10px; text-align:left; }
.acct th { background:#f3e8ff; }
.video-wrap { background:#111; border-radius:16px; overflow:hidden; margin:16px 0; }
.video-wrap video { width:100%; display:block; background:#000; max-height:70vh; }
.slide-demo { background:#111; color:#fff; border-radius:16px; overflow:hidden; margin:16px 0; }
.slide-demo img { width:100%; display:block; max-height:62vh; object-fit:contain; background:#1c142c; }
.slide-cap { padding:12px 16px; font-size:15px; line-height:1.5; }
.slide-bar { display:flex; gap:8px; padding:0 16px 14px; flex-wrap:wrap; }
.slide-bar button { border:0; border-radius:10px; padding:8px 14px; background:#5B21B6; color:#fff; cursor:pointer; }
.searchbox { width:100%; border:0; border-radius:12px; padding:12px; background:#fff; margin:8px 0 16px; font-size:16px; }
.kbd { font-family: Outfit, Consolas, monospace; background:#ede9fe; padding:1px 6px; border-radius:6px; }
@media (max-width: 860px) {
  .g-shell { grid-template-columns: 1fr; }
  .g-nav { position:relative; top:0; height:auto; display:flex; gap:6px; overflow:auto; padding:10px; }
  .g-nav a { white-space:nowrap; margin:0; }
  .g-main { padding:18px 16px 64px; min-width:0; }
}
@media print {
  .g-top, .g-nav, .slide-bar, .searchbox { display:none !important; }
  .g-shell { display:block; }
  .g-main { max-width:none; }
}