:root { --ink:#10211f; --muted:#667572; --canvas:#f3f6f2; --surface:#fff; --line:#dbe4de; --forest:#103c35; --pine:#176b50; --lime:#d9f36a; --night:#081514; --radius:10px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
button,input { font:inherit; }
button { border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
.site-header { position:sticky; z-index:20; top:0; height:72px; padding:0 max(24px, calc((100vw - 1180px)/2)); display:flex; align-items:center; gap:40px; border-bottom:1px solid rgba(222,232,224,.13); background:rgba(8,21,20,.94); color:#f6fbf7; backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; white-space:nowrap; }
.brand img { width:34px; height:34px; border-radius:9px; }
nav { display:flex; align-items:center; gap:28px; font-size:14px; color:rgba(245,251,247,.7); }
nav a:hover { color:#fff; }
.admin-link { margin-left:auto; padding:10px 15px; border:1px solid rgba(217,243,106,.55); border-radius:7px; color:var(--lime); font-size:13px; font-weight:700; }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:8px; }
.header-action,.login-link,.register-link { height:38px; padding:0 13px; border-radius:7px; background:transparent; color:rgba(245,251,247,.78); font-size:13px; font-weight:700; }
.header-action:hover,.login-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.auth-area { display:flex; align-items:center; gap:6px; margin-left:5px; padding-left:12px; border-left:1px solid rgba(255,255,255,.14); }
.register-link { background:var(--lime); color:#12221f; }
.user-chip { display:flex; align-items:center; gap:9px; color:#fff; font-size:13px; }.user-chip strong { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.logout-link { padding:7px 0; background:transparent; color:rgba(255,255,255,.58); font-size:12px; }
.hero { position:relative; min-height:606px; display:flex; align-items:flex-end; overflow:hidden; background:#123e36; color:#fff; }
.hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-image { object-position:center 52%; }
.hero-shade { background:linear-gradient(90deg,rgba(4,15,14,.9) 0%,rgba(5,18,16,.64) 45%,rgba(5,18,16,.15) 100%); }
.hero-content { position:relative; z-index:1; padding:92px 0 68px; }
.eyebrow { margin:0; color:var(--pine); font-size:11px; font-weight:800; letter-spacing:1.4px; }
.hero .eyebrow { color:var(--lime); }
h1,h2,p { margin-top:0; }
h1 { max-width:670px; margin:13px 0 17px; font-size:64px; line-height:1.09; letter-spacing:0; }
.hero-copy { max-width:520px; margin-bottom:28px; color:rgba(255,255,255,.78); font-size:17px; line-height:1.75; }
.search-panel { width:min(650px,100%); padding:7px; display:flex; gap:8px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.95); color:var(--ink); }
.search-panel label { flex:1; min-width:0; padding:7px 15px; }
.search-panel label span { display:block; color:var(--muted); font-size:11px; font-weight:700; }
.search-panel input { width:100%; margin-top:3px; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:15px; }
.search-panel button { min-width:122px; border-radius:7px; background:var(--pine); color:#fff; font-size:14px; font-weight:800; }
.hero-metrics { margin-top:27px; display:flex; gap:26px; color:rgba(255,255,255,.68); font-size:13px; }
.hero-metrics strong { margin-right:4px; color:#fff; font-size:17px; }
.popular-section,.trail-section { padding:82px 0; }
.section-heading { margin-bottom:25px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.section-heading h2 { margin:7px 0 0; font-size:32px; line-height:1.2; }
.section-heading>p { margin:0; color:var(--muted); font-size:14px; }
.popular-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.popular-card { position:relative; min-height:258px; overflow:hidden; border-radius:var(--radius); background:#254d44; color:#fff; cursor:pointer; isolation:isolate; }
.popular-card:first-child { grid-column:span 2; min-height:360px; }
.popular-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.popular-card:hover img,.trail-card:hover img,.gear-card:hover img { transform:scale(1.045); }
.popular-card::after { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(0deg,rgba(5,17,16,.86),rgba(4,14,13,.05) 76%); }
.popular-card img { z-index:-2; }
.popular-content { position:absolute; right:20px; bottom:19px; left:20px; }
.popular-content p { margin:0 0 6px; color:rgba(255,255,255,.7); font-size:12px; }
.popular-content h3 { margin:0; font-size:25px; }
.popular-card:not(:first-child) .popular-content h3 { font-size:20px; }
.popular-rank { position:absolute; top:15px; left:16px; padding:7px 10px; border-radius:5px; background:rgba(6,20,18,.62); color:var(--lime); font-size:12px; font-weight:800; }
.region-band { padding:75px 0; background:#e3eae5; }
.region-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.region-card { min-height:134px; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid #cedbd3; border-radius:8px; background:#f6f9f6; color:var(--ink); text-align:left; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.region-card:hover,.region-card.active { border-color:var(--pine); background:var(--forest); color:#fff; transform:translateY(-3px); }
.region-card strong { font-size:20px; }.region-card span { margin-top:6px; font-size:11px; opacity:.68; }
.companion-section { padding:80px 0; }
.outline-button { height:40px; padding:0 16px; border:1px solid var(--pine); border-radius:7px; background:transparent; color:var(--pine); font-size:13px; font-weight:800; }
.companion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.companion-card { padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.companion-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.companion-author { display:flex; align-items:center; gap:10px; }.companion-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#dbeee4; color:var(--pine); font-weight:800; }.companion-author strong,.companion-author span { display:block; }.companion-author span { margin-top:3px; color:var(--muted); font-size:11px; }.companion-date { color:var(--pine); font-size:12px; font-weight:800; }
.companion-card h3 { margin:21px 0 13px; font-size:22px; }.companion-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; color:#52635e; font-size:12px; }.companion-note { min-height:44px; margin:16px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }.companion-contact { margin-top:14px; padding:10px; border-radius:6px; background:#e8f1eb; color:var(--pine); font-size:12px; line-height:1.7; }
.trail-tools { margin:-10px 0 22px; display:flex; align-items:center; gap:14px; }.active-filter { padding:7px 11px; border-radius:5px; background:#dbeee4; color:var(--forest); font-size:13px; font-weight:800; }.text-button { padding:6px 0; background:transparent; color:var(--pine); font-size:13px; font-weight:700; }
.trail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.trail-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }.trail-card:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(20,51,42,.12); }
.trail-photo { position:relative; height:200px; overflow:hidden; background:#dce5df; }.trail-photo img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }.difficulty { position:absolute; top:13px; left:13px; padding:6px 9px; border-radius:5px; background:rgba(8,22,20,.72); color:#fff; font-size:11px; font-weight:800; }
.trail-content { padding:17px; }.trail-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }.trail-content h3 { margin:0; overflow:hidden; font-size:20px; text-overflow:ellipsis; white-space:nowrap; }.trail-location { margin:8px 0 16px; overflow:hidden; color:var(--muted); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.trail-meta { display:flex; gap:13px; color:#51635e; font-size:12px; }.trail-clicks { margin-top:15px; color:var(--pine); font-size:12px; font-weight:700; }
.empty-state { padding:56px 20px; border:1px dashed #b6c8bd; border-radius:var(--radius); color:var(--muted); text-align:center; }
.gear-section { padding:78px 0 86px; background:var(--night); color:#f4f8f4; }.section-heading.light .eyebrow { color:var(--lime); }.section-heading.light>p { color:rgba(244,248,244,.6); }
.gear-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.gear-card { overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:var(--radius); background:#10201e; }.gear-photo { height:205px; overflow:hidden; background:#263c38; }.gear-photo img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }.gear-content { padding:17px; }.gear-content p { margin:0; color:rgba(244,248,244,.58); font-size:12px; }.gear-content h3 { margin:8px 0 17px; min-height:43px; font-size:17px; line-height:1.35; }.gear-bottom { display:flex; align-items:center; justify-content:space-between; color:var(--lime); font-weight:800; }.gear-bottom span { color:rgba(244,248,244,.52); font-size:12px; font-weight:400; }
footer { padding:30px 0; background:#06100f; color:rgba(255,255,255,.58); }.footer-inner { display:flex; align-items:center; gap:25px; }.footer-inner .brand { color:#fff; }.footer-inner p { margin:0; font-size:13px; }.footer-inner a { margin-left:auto; color:var(--lime); font-size:13px; }
.route-dialog { width:min(930px, calc(100% - 32px)); max-height:calc(100vh - 60px); padding:0; overflow:auto; border:0; border-radius:12px; background:#f7faf7; color:var(--ink); box-shadow:0 24px 80px rgba(0,0,0,.35); }.route-dialog::backdrop { background:rgba(4,13,12,.72); backdrop-filter:blur(4px); }.dialog-close { position:sticky; z-index:3; top:13px; left:calc(100% - 58px); width:36px; height:36px; margin-bottom:-36px; border-radius:50%; background:rgba(7,21,19,.78); color:#fff; font-size:26px; line-height:1; }
.form-dialog { position:relative; width:min(460px,calc(100% - 32px)); max-height:calc(100vh - 44px); padding:0; overflow:auto; border:0; border-radius:12px; background:#f7faf7; color:var(--ink); box-shadow:0 24px 80px rgba(0,0,0,.35); }.form-dialog::backdrop { background:rgba(4,13,12,.72); backdrop-filter:blur(4px); }.wide-dialog { width:min(760px,calc(100% - 32px)); }.form-dialog .dialog-close { position:absolute; top:16px; right:16px; left:auto; margin:0; }.form-dialog-body { padding:34px; }.form-dialog-body h2 { margin:8px 0 23px; font-size:29px; }.auth-tabs { margin-bottom:20px; padding:4px; display:grid; grid-template-columns:repeat(2,1fr); border-radius:8px; background:#e7ece8; }.auth-tabs button { height:37px; border-radius:6px; background:transparent; color:var(--muted); font-weight:700; }.auth-tabs button.active { background:#fff; color:var(--pine); box-shadow:0 3px 10px rgba(25,55,45,.09); }
.form-dialog form { display:grid; gap:14px; }.form-dialog label { display:grid; gap:7px; color:#52635e; font-size:12px; font-weight:700; }.form-dialog input,.form-dialog textarea { width:100%; border:1px solid var(--line); border-radius:7px; outline:0; background:#fff; color:var(--ink); }.form-dialog input { height:44px; padding:0 12px; }.form-dialog textarea { min-height:92px; padding:12px; resize:vertical; }.form-dialog input:focus,.form-dialog textarea:focus { border-color:var(--pine); box-shadow:0 0 0 3px rgba(23,107,80,.09); }.form-submit { min-height:44px; border-radius:7px; background:var(--pine); color:#fff; font-weight:800; }.form-message { min-height:20px; margin:0; color:#b64c4c; font-size:12px; line-height:1.5; }.checkout-required-note { margin:-8px 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }.two-column-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.span-2 { grid-column:span 2; }
.weather-form { grid-template-columns:1fr 116px; }.weather-result { margin-top:22px; }.weather-result>p { color:var(--muted); font-size:13px; }.weather-place { margin-bottom:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:15px; }.weather-place h3 { margin:0; font-size:24px; }.weather-place span { color:var(--muted); font-size:12px; }.weather-days { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.weather-day { padding:14px; border-radius:7px; background:#e8f0ea; }.weather-day span,.weather-day strong { display:block; }.weather-day span { color:var(--muted); font-size:11px; }.weather-day strong { margin:7px 0; font-size:16px; }.weather-warning { margin-top:12px; padding:11px; border-left:4px solid #db783f; background:#fff0e5; color:#844526; font-size:12px; line-height:1.6; }
.detail-hero { position:relative; height:360px; background:#1e4b41; color:#fff; }.detail-hero img { width:100%; height:100%; object-fit:cover; }.detail-hero::after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(5,17,15,.76),transparent 72%); }.detail-title { position:absolute; z-index:1; right:32px; bottom:28px; left:32px; }.detail-title p { margin:0 0 6px; color:rgba(255,255,255,.76); }.detail-title h2 { margin:0; font-size:36px; }.detail-body { padding:30px 32px 35px; }.detail-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.detail-stat { padding:13px; border-radius:7px; background:#e9f0eb; }.detail-stat span,.detail-stat strong { display:block; }.detail-stat span { color:var(--muted); font-size:11px; }.detail-stat strong { margin-top:6px; font-size:17px; }.detail-copy { margin:27px 0; color:#41534d; line-height:1.8; }.detail-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.detail-gallery img { width:100%; aspect-ratio:1.42; border-radius:7px; object-fit:cover; }
@media (max-width:820px) { .site-header { gap:12px; padding:0 14px; }.site-header nav,.header-action { display:none; }.header-tools { margin-left:auto; }.auth-area { padding-left:0; border-left:0; }.shell { width:min(100% - 32px,1180px); }.hero { min-height:590px; }.hero-content { padding:80px 0 48px; } h1 { font-size:45px; }.popular-grid,.trail-grid,.companion-grid { grid-template-columns:1fr; }.popular-card:first-child { grid-column:auto; min-height:290px; }.popular-card { min-height:225px; }.region-grid { grid-template-columns:repeat(3,1fr); }.gear-grid { grid-template-columns:repeat(2,1fr); }.section-heading { align-items:flex-start; flex-direction:column; }.hero-metrics { flex-wrap:wrap; gap:12px 20px; }.detail-stats { grid-template-columns:repeat(2,1fr); }.detail-body { padding:24px 18px 28px; }.detail-title { right:20px; bottom:20px; left:20px; }.detail-title h2 { font-size:29px; }.two-column-form { grid-template-columns:1fr; }.span-2 { grid-column:auto; }.form-dialog-body { padding:29px 20px; }.weather-days { grid-template-columns:1fr; } }

/* Dark mountain workspace */
:root { --ink:#edf5f0; --muted:#8ca39a; --canvas:#071210; --surface:#0e1d1a; --line:rgba(173,216,195,.16); --forest:#0f352f; --pine:#5ed3a4; --lime:#d9f36a; --night:#040a09; }
body { background:var(--canvas); color:var(--ink); }
.site-header { border-bottom-color:rgba(173,216,195,.13); background:rgba(5,15,14,.95); }
.popular-section,.trail-section,.companion-section { background:var(--canvas); }
.section-heading h2 { color:#f1f7f3; }.section-heading>p { color:var(--muted); }
.popular-card { background:#173b34; }.popular-card::after { background:linear-gradient(0deg,rgba(3,11,10,.94),rgba(3,11,10,.08) 78%); }
.region-band { background:#0b1b18; border-top:1px solid rgba(173,216,195,.1); border-bottom:1px solid rgba(173,216,195,.1); }
.region-card { border-color:rgba(173,216,195,.15); background:#10231f; color:#e7f1eb; }.region-card:hover,.region-card.active { background:#1a493e; border-color:var(--pine); }
.companion-card,.trail-card { border-color:rgba(173,216,195,.15); background:var(--surface); box-shadow:0 14px 35px rgba(0,0,0,.17); }.companion-avatar { background:#193a32; color:var(--pine); }.companion-author span,.companion-meta,.trail-meta { color:var(--muted); }.companion-note,.trail-location { color:#8ca39a; }.companion-contact { background:#17382f; color:#8be0b9; }
.outline-button { border-color:var(--pine); color:var(--pine); }.active-filter { background:#153a31; color:#9ce7bf; }.text-button { color:var(--pine); }
.gear-sidebar { position:sticky; top:94px; align-self:start; padding:21px; border:1px solid rgba(173,216,195,.16); border-radius:var(--radius); background:#0d201c; }.sidebar-heading h3 { margin:7px 0 5px; font-size:23px; }.sidebar-heading span { color:var(--muted); font-size:12px; }.gear-sidebar .gear-grid { margin-top:20px; }.gear-card { border-color:rgba(173,216,195,.13); background:#122821; }.gear-photo { height:82px; }.gear-content { padding:11px; }.gear-content p { font-size:10px; }.gear-content h3 { min-height:0; margin:5px 0 9px; font-size:13px; }.gear-bottom strong { font-size:15px; }.gear-bottom span { font-size:10px; }.gear-more { display:block; margin-top:18px; padding-top:14px; border-top:1px solid rgba(173,216,195,.14); color:var(--lime); font-size:12px; font-weight:800; }
.trail-layout { display:grid; grid-template-columns:236px minmax(0,1fr); gap:24px; align-items:start; }.trail-results { min-width:0; }.trail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.trail-content h3 { color:#f1f7f3; }.trail-title-row>span { color:#e7c56b; font-size:13px; }.trail-clicks { color:#68d9aa; }
.form-dialog,.route-dialog { background:#0e1d1a; color:var(--ink); }.form-dialog-body h2 { color:#f1f7f3; }.form-dialog label { color:#9bb1a8; }.form-dialog input,.form-dialog textarea { border-color:rgba(173,216,195,.18); background:#091613; color:#edf5f0; }.auth-tabs { background:#102822; }.auth-tabs button.active { background:#173a31; color:#9ce7bf; }.weather-day { background:#16372e; }.weather-day span { color:#9bb1a8; }.weather-warning { background:#3a291d; color:#f3c58e; }
.empty-state { border-color:rgba(173,216,195,.2); color:var(--muted); }
.footer-inner span { color:rgba(255,255,255,.48); font-size:13px; }
@media (min-width:821px) { .popular-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:160px; }.popular-card { min-height:0; }.popular-card:first-child { grid-column:span 2; grid-row:span 2; min-height:0; }.popular-card:not(:first-child) { min-height:0; }.popular-card:not(:first-child) .popular-content h3 { font-size:17px; }.popular-card:not(:first-child) .popular-content { right:14px; bottom:14px; left:14px; }.popular-card:not(:first-child) .popular-rank { top:11px; left:11px; padding:5px 8px; font-size:10px; }.gear-grid { display:flex; flex-direction:column; gap:10px; }.gear-card { display:grid; grid-template-columns:82px minmax(0,1fr); }.trail-section { padding-top:72px; } }
@media (max-width:820px) { .trail-layout { grid-template-columns:1fr; }.gear-sidebar { position:static; }.gear-sidebar .gear-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.trail-grid { grid-template-columns:1fr; }.popular-grid { grid-template-columns:1fr; }.popular-card:first-child { grid-column:auto; }.footer-inner { flex-wrap:wrap; gap:12px 18px; }.footer-inner span { width:100%; }.gear-more { display:none; } }

.oauth-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:-5px 0 16px; }
.oauth-button { min-height:52px; display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid rgba(173,216,195,.18); border-radius:8px; background:#122821; color:#edf5f0; text-align:left; }
.oauth-button span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font-size:10px; font-weight:900; }
.oauth-button strong { font-size:12px; }.oauth-button.wechat span { background:#31c47c; color:#071210; }.oauth-button.qq span { background:#5aa9ff; color:#071210; }
.oauth-button:hover { border-color:var(--pine); transform:translateY(-1px); }.oauth-button:disabled { opacity:.5; transform:none; }
.auth-divider { position:relative; margin:17px 0 13px; color:var(--muted); font-size:11px; text-align:center; }.auth-divider::before { position:absolute; inset:50% 0 auto; height:1px; content:""; background:rgba(173,216,195,.14); }.auth-divider span { position:relative; padding:0 10px; background:#0e1d1a; }
.code-field { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:9px; align-items:end; }.code-field label { min-width:0; }.send-code { height:44px; border:1px solid rgba(94,211,164,.5); border-radius:7px; background:transparent; color:#8be0b9; font-size:12px; font-weight:800; }.send-code:disabled { opacity:.5; cursor:not-allowed; }
.auth-security-note { margin:14px 0 0; color:var(--muted); font-size:11px; }
@media (max-width:520px) { .oauth-buttons { grid-template-columns:1fr; }.code-field { grid-template-columns:1fr; }.send-code { width:100%; } }

/* High-contrast fixes for the dark portal. */
.search-panel input { color:#162622; caret-color:#176b50; }
.search-panel input::placeholder { color:#6c7b76; opacity:1; }
.detail-stat { background:#17342d; border:1px solid rgba(173,216,195,.2); }
.detail-stat span { color:#9bb1a8; }
.detail-stat strong { color:#f2fbf5; }
.detail-copy { color:#9bb1a8; }
a.popular-card, a.trail-card, a.gear-card { color: inherit; text-decoration: none; }

/* Preserve the complete product photo in the compact left-hand recommendation cards. */
.gear-sidebar .gear-photo { display:flex; align-items:center; justify-content:center; background:#263c38; }
.gear-sidebar .gear-photo img { display:block; object-fit:contain; }