:root {
  --bg: #f5f6f8; --surface: #ffffff; --soft: #edf0f5; --text: #283142; --muted: #768093;
  --line: #e6e9ef; --accent: #5a72e8; --accent-soft: #e8edff; --shadow: 0 14px 35px rgba(40, 49, 66, .07);
}
[data-theme="dark"] { --bg: #171b23; --surface: #202631; --soft: #29313f; --text: #eef2fb; --muted: #a8b0c0; --line: #323b4b; --accent: #a9b9ff; --accent-soft: #303b61; --shadow: 0 14px 35px rgba(0, 0, 0, .2); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.72 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; transition: background .22s, color .22s; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.app-shell { min-height: 100vh; max-width: 1420px; margin: 0 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 42px 30px 25px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.profile-card { display: flex; align-items: center; gap: 13px; }.avatar { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 18px 18px 18px 5px; background: linear-gradient(135deg,#a6b5fb,#647ce8); color: white; font-size: 1.15rem; font-weight: 700; box-shadow: 4px 7px 0 #dfe4ff; }.profile-name { margin: 0; font-weight: 800; }.profile-role { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.intro { margin: 24px 0 30px; color: var(--muted); font-size: .86rem; }.sidebar-nav { display: grid; gap: 4px; }.sidebar-nav a { display: flex; align-items: center; gap: 13px; padding: 10px 11px; color: var(--muted); border-radius: 10px; font-size: .91rem; }.sidebar-nav a:hover, .sidebar-nav .active { color: var(--accent); background: var(--accent-soft); }.sidebar-nav span { width: 18px; text-align: center; font-size: 1.15rem; }.sidebar-bottom { margin-top: auto; color: var(--muted); font-size: .72rem; }.sidebar-bottom a { display: block; margin-bottom: 12px; }.sidebar-bottom a:hover { color: var(--accent); }.sidebar-bottom p { margin: 0; letter-spacing: .08em; }
.main-content { width: min(100%, 1080px); padding: 0 58px 78px; margin: 0 auto; }.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; }.breadcrumb { margin: 0; color: var(--muted); font-size: .82rem; }.breadcrumb span { color: var(--text); }.top-actions { display: flex; align-items:center; gap: 8px; }.member-entry{padding:6px 10px;border-radius:8px;color:var(--accent);background:var(--accent-soft);font-size:.75rem;font-weight:800}.member-entry:hover{filter:brightness(.96)}.icon-button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 1.16rem; }.icon-button:hover { color: var(--accent); border-color: var(--accent); }.moon { display: none; } [data-theme="dark"] .sun { display: none; } [data-theme="dark"] .moon { display: inline; }
.hero-banner { position: relative; min-height: 345px; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border-radius: 20px; background: linear-gradient(115deg,#eef1ff,#e9f7f5); box-shadow: var(--shadow); }.hero-copy { position: relative; z-index: 5; padding: 52px; }.overline { margin: 0 0 10px; color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }.hero-copy h1, h2, h3 { font-family: Georgia, "Noto Serif SC", serif; }.hero-copy h1 { margin: 0 0 17px; font-size: clamp(2.1rem, 4vw, 3.55rem); line-height: 1.18; letter-spacing: -.05em; font-weight: 500; }.hero-copy h1 em { color: #687ddd; font-weight: 400; }.hero-copy > p:not(.overline) { max-width: 390px; margin-bottom: 22px; color: #6c7590; }.hero-link, .post-content a, .all-link { color: var(--accent); font-size: .84rem; font-weight: 800; }.hero-link span, .post-content a span, .all-link span { display: inline-block; margin-left: 7px; transition: transform .2s; }.hero-link:hover span, .post-content a:hover span, .all-link:hover span { transform: translateX(4px); }
.hero-landscape { position: relative; overflow: hidden; }.sun-orb { position: absolute; top: 55px; right: 21%; width: 78px; height: 78px; border-radius: 50%; background: #fff6ce; }.cloud { position: absolute; z-index: 2; display: block; width: 68px; height: 14px; border-radius: 50px; background: #fff; opacity: .8; }.cloud:after, .cloud:before { position: absolute; bottom: 0; content:""; border-radius: 50%; background: inherit; }.cloud:before { width: 25px; height: 25px; left: 11px; }.cloud:after { width: 19px; height: 19px; left: 33px; }.cloud-a { top: 77px; left: 12%; }.cloud-b { top: 139px; right: 10%; transform: scale(.65); }.mount { position: absolute; bottom: -45px; display: block; width: 130%; height: 210px; border-radius: 54% 46% 0 0; }.mountain-far { left: -44%; background: #b1d6ca; transform: rotate(-10deg); }.mountain-near { right: -48%; z-index: 2; background: #7db19f; transform: rotate(10deg); }.house { position: absolute; z-index: 4; right: 28%; bottom: 52px; width: 105px; height: 85px; background: #faf7eb; border: 7px solid #e9d6b2; border-bottom: 0; }.house:before { position: absolute; content:""; width: 73px; height: 73px; top: -43px; left: 9px; background: #6e92a0; transform: rotate(45deg); }.house b { position: absolute; z-index: 3; bottom: 0; width: 18px; height: 37px; background: #e3b567; }.house b:nth-child(1){left:15px}.house b:nth-child(2){left:43px}.house b:nth-child(3){left:71px}
.posts { padding-top: 82px; }.section-title-row { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }.section-title-row h2, .category-section h2, .about-section h2 { margin: 0; font-size: 1.84rem; font-weight: 500; letter-spacing: -.04em; }.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }.post-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); transition: transform .2s, box-shadow .2s; }.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.post-cover { position: relative; height: 142px; overflow: hidden; }.post-cover span { position: absolute; z-index: 3; top: 16px; left: 17px; color: rgba(255,255,255,.8); font: 700 1.45rem Georgia,serif; }.post-cover i,.post-cover b { position: absolute; display:block; border-radius:50%; }.cover-migrate { background:#b3c1f4; }.cover-migrate i { right:-25px; bottom:-40px; width:200px; height:150px; background:#5870bb; }.cover-migrate b { right:48px; bottom:36px; width:57px; height:57px; background:#fff0b6; }.cover-django { background:#b5dfd3; }.cover-django i { left:-12px; bottom:-60px; width:250px; height:180px; background:#579a8b; }.cover-django b { right:28px; top:28px; width:46px; height:46px; background:#fff1bc; }.cover-life { background:#f3c591; }.cover-life i { left:15%; bottom:-53px; width:230px; height:162px; background:#c48772; }.cover-life b { right:32px; top:25px; width:55px; height:55px; background:#f9e8b5; }.post-content { padding: 21px 21px 23px; }.post-meta { margin: 0 0 8px; color: var(--accent); font-size: .7rem; font-weight: 700; }.post-content h3 { min-height: 58px; margin: 0 0 8px; font-size: 1.13rem; line-height: 1.42; font-weight: 500; }.post-content > p:not(.post-meta) { min-height: 66px; margin: 0 0 15px; color: var(--muted); font-size: .82rem; }
.category-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; padding: 100px 0; }.category-list { display: grid; gap: 10px; }.category-list a { display: grid; grid-template-columns: 46px 1fr auto; gap: 15px; align-items: center; padding: 14px; border: 1px solid transparent; border-radius: 14px; }.category-list a:hover { border-color: var(--line); background: var(--surface); }.category-icon { width: 42px; height: 42px; display: grid; place-items:center; border-radius: 12px; font-weight: 800; }.code { color:#566ed9; background:#e8edff; }.build { color:#388b77; background:#def3ed; }.note { color:#c7814f; background:#fff0df; }.category-list b,.category-list small { display:block; }.category-list b { font-size:.94rem; }.category-list small { color:var(--muted); font-size:.76rem; }.category-list em { color:var(--muted); font-size:.75rem; font-style:normal; }
.about-section { display:grid; grid-template-columns: 170px 1fr; gap:38px; padding:48px; border-radius:20px; background:var(--accent-soft); }.about-badge { width:140px; height:140px; display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(135deg,#6d83ec,#9baafa); box-shadow: inset -12px -12px 30px rgba(43,56,125,.18); font: 500 2.4rem/.78 Georgia,serif; text-align:center; }.about-section h2 { margin-bottom:13px; }.about-section div:last-child > p:not(.overline) { max-width:610px; margin:0 0 19px; color:var(--muted); }.contact-button { display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--accent); border-radius:9px; color:var(--accent); font-size:.82rem; font-weight:800; }.contact-button:hover { color:white; background:var(--accent); }
.search-dialog { width:min(520px, calc(100% - 32px)); padding:0; border:0; border-radius:18px; color:var(--text); background:var(--surface); box-shadow:0 25px 80px rgba(0,0,0,.25); }.search-dialog::backdrop { background:rgba(14,18,28,.42); backdrop-filter:blur(3px); }.search-panel { padding:24px; }.search-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-weight:800; }.search-head button { border:0; color:var(--muted); background:transparent; font-size:1.5rem; cursor:pointer; }.search-panel input { width:100%; padding:13px 14px; outline:0; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--bg); }.search-panel input:focus { border-color:var(--accent); }.search-tip,.search-panel [data-search-results] p { color:var(--muted); font-size:.8rem; }.search-panel [data-search-results] { display:grid; gap:7px; margin-top:14px; }.search-panel [data-search-results] a { padding:10px; border-radius:8px; background:var(--soft); font-size:.86rem; }.search-panel [data-search-results] a:hover { color:var(--accent); }
@media (max-width: 1000px) { .app-shell { grid-template-columns: 225px minmax(0,1fr); }.sidebar { padding:35px 22px 22px; }.main-content { padding:0 34px 58px; }.hero-copy { padding:40px; }.post-grid { grid-template-columns:1fr 1fr; }.post-card:last-child { grid-column:span 2; }.post-card:last-child .post-cover { height:175px; } }
@media (max-width: 720px) { .app-shell { display:block; }.sidebar { position:relative; height:auto; padding:22px 20px 15px; border-right:0; border-bottom:1px solid var(--line); }.profile-card,.intro,.sidebar-bottom { display:none; }.sidebar-nav { display:flex; gap:5px; margin-top:17px; overflow-x:auto; }.sidebar-nav a { padding:6px 9px; white-space:nowrap; font-size:.78rem; }.sidebar-nav span { display:none; }.main-content { padding:0 17px 45px; }.topbar { height:65px; }.hero-banner { grid-template-columns:1fr; min-height:500px; }.hero-copy { padding:35px 29px 12px; }.hero-copy h1 { font-size:2.45rem; }.hero-landscape { min-height:225px; }.posts { padding-top:58px; }.post-grid { grid-template-columns:1fr; }.post-card:last-child { grid-column:auto; }.post-card:last-child .post-cover { height:142px; }.category-section { grid-template-columns:1fr; gap:26px; padding:65px 0; }.about-section { grid-template-columns:1fr; gap:22px; padding:30px; }.about-badge { width:70px; height:70px; font-size:1.35rem; }.section-title-row h2,.category-section h2,.about-section h2 { font-size:1.58rem; } }
.member-tools{display:flex;align-items:center;gap:8px}.member-welcome{color:var(--muted);font-size:.75rem}.member-entry{white-space:nowrap}@media (max-width:720px){.member-welcome{display:none}.member-tools{gap:5px}.member-entry{padding:5px 7px;font-size:.7rem}}
.member-menu{position:relative}.member-menu summary{list-style:none;cursor:pointer}.member-menu summary::-webkit-details-marker{display:none}.member-profile{display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:10px}.member-profile:hover,.member-menu[open] .member-profile{background:var(--accent-soft)}.member-profile img,.member-profile>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;object-fit:cover;background:var(--accent);color:#fff;font-size:.76rem;font-weight:800}.member-profile b{font-size:.78rem;white-space:nowrap}.member-menu-panel{position:absolute;z-index:30;right:0;top:42px;min-width:176px;padding:7px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}.member-menu-panel a,.member-menu-panel button{display:block;width:100%;padding:9px 10px;border:0;border-radius:8px;color:var(--text);background:transparent;text-align:left;font:inherit;font-size:.82rem;cursor:pointer}.member-menu-panel a:hover,.member-menu-panel button:hover{color:var(--accent);background:var(--soft)}
.top-actions{position:relative;padding-right:43px}.member-tools{display:contents}.member-menu{position:absolute;right:0;top:0}.member-profile{width:35px;height:35px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);box-shadow:0 4px 12px rgba(40,49,66,.08);transition:transform .18s,box-shadow .18s}.member-profile:hover,.member-menu[open] .member-profile{background:var(--surface);box-shadow:0 7px 18px rgba(74,93,178,.2);transform:translateY(-1px)}.member-profile img,.member-profile>span{width:29px;height:29px;border:2px solid var(--accent-soft);font-size:.72rem}.member-profile b{display:none}.member-menu-panel{top:44px;min-width:206px;padding:8px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 18px 42px rgba(40,49,66,.16);backdrop-filter:blur(12px)}.member-menu-panel:before{content:"账户";display:block;padding:7px 10px 6px;color:var(--muted);font-size:.67rem;font-weight:800;letter-spacing:.12em}.member-menu-panel a,.member-menu-panel button{padding:10px;border-radius:10px;font-size:.82rem}.member-menu-panel form{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--line)}.member-menu-panel form button{color:#b75460}.member-menu-panel form button:hover{color:#b75460;background:#fff0f2}@media (max-width:720px){.top-actions{padding-right:40px}.member-profile{width:32px;height:32px}.member-profile img,.member-profile>span{width:27px;height:27px}}