body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); line-height:1.55; -webkit-font-smoothing: antialiased; }

a { color: var(--accent-hi); }

/* ── Nav (shared with index.html) ─────────────────────── */
  .nav { position: sticky; top: 0; z-index: 20; background: rgba(11,11,15,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }

.nav-cta { background: var(--accent); color:#0b0b0f; font-weight:600; font-size:0.85rem; padding:9px 18px; border-radius:8px; text-decoration:none; transition:background 0.15s; }

.nav-login { color: var(--fg-2); font-size:0.85rem; font-weight:600; text-decoration:none; padding:9px 4px; transition:color 0.15s; }

@media (max-width: 860px) {
    .nav-links, .nav-actions > .nav-login, .nav-actions > .nav-cta { display:none; }
    .mobile-nav { display:block; }
  }

@media (max-width: 480px) {
    .nav .wrap { padding: 0 16px; }
    .nav-actions { gap:10px; }
  }

.page-hero { padding: 64px 0 40px; text-align:center; }

.hero-icon { margin: 0 auto 20px; width:112px; height:112px; display:flex; align-items:center; justify-content:center; }

.hero-icon img { width:100%; height:100%; object-fit:contain; }

.eyebrow { display:inline-flex; align-items:center; gap:8px; background: var(--accent-soft); border:1px solid var(--accent-ring); color: var(--accent-hi); font-size:0.78rem; font-weight:600; padding:6px 14px; border-radius:99px; margin-bottom:22px; }

h1 { font-size: 2.3rem; line-height:1.15; letter-spacing:-0.03em; margin:0 0 16px; font-weight:800; }

.page-hero p { font-size:1.05rem; color: var(--fg-2); max-width:560px; margin:0 auto; }

.jumpnav { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding: 0 0 56px; }

.jumpnav a { font-size:0.82rem; font-weight:600; color:var(--fg-2); background:var(--surface); border:1px solid var(--border); padding:8px 16px; border-radius:99px; text-decoration:none; transition: all 0.15s; }

.jumpnav a:hover { color:var(--fg); border-color:var(--border-bright); }

.gsection { padding: 56px 0; border-top: 1px solid var(--border); }

.gsection-head { display:flex; align-items:center; gap:14px; margin-bottom:28px; }

.gsection-head .icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }

.icon.i-cyan   { background: rgba(77,212,224,0.12); color: var(--cyan); }

.icon.i-accent { background: var(--accent-soft); color: var(--accent-hi); }

.icon.i-magenta{ background: rgba(232,121,168,0.12); color: var(--magenta); }

.icon.i-warn   { background: rgba(251,191,36,0.12); color: var(--warn); }

.icon.i-success{ background: rgba(52,211,153,0.12); color: var(--success); }

.icon.i-danger { background: rgba(248,113,113,0.12); color: var(--danger); }

.gsection-head h2 { font-size:1.5rem; margin:0 0 4px; font-weight:800; letter-spacing:-0.02em; }

.gsection-head p { margin:0; color: var(--fg-2); font-size:0.92rem; }

.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset: step; }

.step { counter-increment: step; display:grid; grid-template-columns:36px 1fr; gap:14px; background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }

.step-num { width:32px; height:32px; border-radius:9px; background: var(--accent-soft); border:1px solid var(--accent-ring); color: var(--accent-hi); font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:center; }

.step-num::before { content: counter(step); }

.step-body h3 { margin:0 0 6px; font-size:0.98rem; font-weight:700; }

.step-body p { margin:0; color: var(--fg-2); font-size:0.88rem; }

.step-body p + p { margin-top:8px; }

.step-body code { background: var(--surface-2); border:1px solid var(--border-2); border-radius:5px; padding:2px 6px; font-family: var(--font-mono); font-size:0.82rem; color: var(--cyan); }

.step-body a { text-decoration:none; }

.step-body a:hover { text-decoration:underline; }

.shot { display:inline-block; width:64px; margin:10px 8px 0 0; vertical-align:top; border-radius:9px; transition: transform 0.15s ease; cursor: zoom-in; }

.shot:hover { transform: scale(1.06); }

.shot img { display:block; width:100%; aspect-ratio: 390/844; border-radius:9px; border:1px solid var(--border-2); object-fit:cover; background: var(--surface-2); }

body.shot-lightbox-open { overflow:hidden; }

.shot-lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.82); opacity:0; pointer-events:none; transition: opacity 0.15s ease; padding:40px 20px; }

.shot-lightbox.is-open { opacity:1; pointer-events:auto; }

.shot-lightbox img { max-width:min(420px, 90vw); max-height:88vh; border-radius:16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }

.shot-lightbox__close { position:fixed; top:18px; right:20px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }

.shot-lightbox__close:hover { background: rgba(255,255,255,0.18); }

details.region-details { display:block; }

.region-details summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-weight:600; color: var(--fg); font-size:0.86rem; }

.region-details summary::-webkit-details-marker { display:none; }

.region-details summary::after { content:"\203A"; display:inline-flex; align-items:center; justify-content:center; margin-left:auto; font-size:1.5rem; line-height:1; color: var(--fg-2); transform: rotate(90deg); transition: transform 0.15s ease; }

.region-details[open] summary::after { transform: rotate(-90deg); }

.region-details .steps { margin-top:14px; }

.flist { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }

.fitem { background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }

.fitem h3 { margin:0 0 8px; font-size:0.94rem; font-weight:700; display:flex; align-items:center; gap:8px; }

.fitem h3 i { color: var(--success); font-size:0.85rem; }

.fitem p { margin:0; color: var(--fg-2); font-size:0.85rem; }

.callout { display:flex; gap:12px; background: var(--surface); border:1px solid var(--border-2); border-left:3px solid var(--warn); border-radius:10px; padding:14px 18px; margin-top:18px; }

.callout.info { border-left-color: var(--accent); }

.callout.danger { border-left-color: var(--danger); }

.callout i { color: var(--warn); font-size:1.1rem; flex-shrink:0; margin-top:2px; }

.callout.info i { color: var(--accent-hi); }

.callout.danger i { color: var(--danger); }

.callout p { margin:0; font-size:0.86rem; color: var(--fg-2); }

.callout strong { color: var(--fg); }

pre { background: var(--surface-2); border:1px solid var(--border-2); border-radius:10px; padding:14px 16px; overflow-x:auto; font-family: var(--font-mono); font-size:0.8rem; color: var(--fg-2); margin:12px 0 0; }

pre .c1 { color: var(--fg-3); }

pre .k { color: var(--accent-hi); }

pre .v { color: var(--cyan); }

table.rules { width:100%; border-collapse: collapse; margin-top:12px; font-size:0.85rem; }

table.rules th, table.rules td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }

table.rules th { color: var(--fg-3); font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; }

table.rules td { color: var(--fg-2); }

table.rules td:first-child { color: var(--fg); font-family: var(--font-mono); font-size:0.8rem; }

table.rules td.url-cell .url-cell-inner { display:inline-flex; align-items:center; gap:8px; }

.copy-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border-radius:7px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--fg-2); cursor:pointer; transition: all 0.15s; }

.copy-btn:hover { color:var(--fg); border-color:var(--border-bright); }

.copy-btn.copied { color:var(--success); border-color:var(--success); }

.copy-btn i { font-size:0.9rem; pointer-events:none; }

.link-card { display:flex; align-items:center; gap:14px; background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; text-decoration:none; transition: border-color 0.15s; margin-top:14px; }

.link-card:hover { border-color: var(--border-bright); }

.link-card i.li-icon { font-size:1.4rem; color: var(--accent-hi); flex-shrink:0; }

.link-card .li-title { color: var(--fg); font-weight:700; font-size:0.92rem; margin-bottom:2px; }

.link-card .li-url { color: var(--fg-3); font-size:0.78rem; font-family: var(--font-mono); }

.link-card i.li-arrow { margin-left:auto; color: var(--fg-3); }

footer { border-top:1px solid var(--border); padding: 40px 0; }

@media (max-width: 720px) {
    footer .wrap { flex-direction:column; align-items:flex-start; }
    h1 { font-size:1.8rem; }
    .flist { grid-template-columns: 1fr; }
    .step { grid-template-columns:28px 1fr; }
    .step-num { width:26px; height:26px; font-size:0.78rem; }
  }