/* ============================================================ Apple Human Interface Guidelines — Bold Reshape Aligned to Apple Design Library token system. Light / Dark / Auto via [data-theme] on ============================================================ */ /* ---------- Design tokens: light ---------- */ :root,[data-theme="light"]{ /* Brand scale (Apple System Blue) */ --brand-50:#e8f2ff; --brand-100:#cfe5ff; --brand-200:#9fcbff; --brand-300:#66abff; --brand-400:#2e8dff; --brand-500:#007aff; --brand-600:#0064d6; --brand-700:#004fad; --brand-800:#003b82; --brand-900:#00275a; /* semantic brand aliases */ --brand:var(--brand-500); --brand-hover:var(--brand-700); --brand-soft:var(--brand-50); --brand-tint:rgba(0,122,255,0.08); /* Neutral surfaces */ --bg:#f2f2f7; --bg-soft:#f7f7fa; --panel:#ffffff; --card:#ffffff; --bg2:#e5e5ea; /* Text */ --text:#1d1d1f; --text-2:#48484a; --muted:#86868b; --muted2:#aeaeb2; /* Lines */ --line:#d1d1d6; --line-soft:#e5e5ea; /* States */ --danger:#ff3b30; --danger-soft:#ffecea; --success:#34c759; --success-soft:#e9f9ee; --warn:#ff9500; --warn-soft:#fff4e5; /* Avatar */ --avatar-bg:#e8f2ff; --avatar-text:#007aff; /* Badges */ --badge-pinned-bg:#fff4e5; --badge-pinned-text:#c2410c; /* Shadows — layered, Apple-style */ --shadow-2xs:0 1px 2px -1px rgba(0,0,0,0.04); --shadow-xs:0 1px 2px 0 rgba(0,0,0,0.05); --shadow-sm:0 1px 3px 0 rgba(0,0,0,0.05),0 1px 2px -1px rgba(0,0,0,0.04); --shadow:0 2px 8px -2px rgba(0,0,0,0.07),0 1px 3px -1px rgba(0,0,0,0.05); --shadow-md:0 6px 22px -4px rgba(0,0,0,0.10),0 3px 8px -3px rgba(0,0,0,0.06); --shadow-lg:0 16px 44px -10px rgba(0,0,0,0.12),0 6px 16px -6px rgba(0,0,0,0.08); --shadow-xl:0 24px 64px -12px rgba(0,0,0,0.16); /* Glass nav */ --top-bg:rgba(247,247,250,0.72); --top-border:rgba(209,209,214,0.5); /* Ring / focus */ --ring:rgba(0,122,255,0.22); /* Code */ --code-bg:rgba(0,0,0,0.05); --code-text:#1d1d1f; --pre-bg:#1d1d1f; --pre-text:#f5f5f7; /* Type */ --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Radius — bolder, more iOS */ --radius:16px; --radius-md:14px; --radius-sm:10px; --radius-xs:7px; --transition:220ms cubic-bezier(0.25,0.1,0.25,1); --transition-fast:140ms cubic-bezier(0.25,0.1,0.25,1); } /* ---------- Design tokens: dark ---------- */ [data-theme="dark"]{ --brand:var(--brand-400); --brand-hover:#409cff; --brand-soft:rgba(10,132,255,0.14); --brand-tint:rgba(10,132,255,0.12); --bg:#000000; --bg-soft:#1c1c1e; --panel:#1c1c1e; --card:#1c1c1e; --bg2:#2c2c2e; --text:#f5f5f7; --text-2:#e5e5ea; --muted:#98989f; --muted2:#636366; --line:#38383a; --line-soft:#2c2c2e; --danger:#ff453a; --danger-soft:rgba(255,69,58,0.16); --success:#30d158; --success-soft:rgba(48,209,88,0.16); --warn:#ff9f0a; --warn-soft:rgba(255,159,10,0.18); --avatar-bg:rgba(10,132,255,0.16); --avatar-text:#409cff; --badge-pinned-bg:rgba(255,159,10,0.18); --badge-pinned-text:#ffb340; --shadow-2xs:0 1px 2px -1px rgba(0,0,0,0.3); --shadow-xs:0 1px 2px 0 rgba(0,0,0,0.32); --shadow-sm:0 1px 3px 0 rgba(0,0,0,0.4),0 1px 2px -1px rgba(0,0,0,0.36); --shadow:0 4px 14px -3px rgba(0,0,0,0.5),0 2px 6px -2px rgba(0,0,0,0.4); --shadow-md:0 8px 28px -6px rgba(0,0,0,0.55),0 4px 10px -4px rgba(0,0,0,0.45); --shadow-lg:0 18px 48px -10px rgba(0,0,0,0.6),0 8px 18px -6px rgba(0,0,0,0.5); --shadow-xl:0 24px 64px -12px rgba(0,0,0,0.7); --top-bg:rgba(28,28,30,0.68); --top-border:rgba(56,56,58,0.5); --ring:rgba(10,132,255,0.4); --code-bg:rgba(255,255,255,0.08); --code-text:#f5f5f7; --pre-bg:#0a0a0a; --pre-text:#f5f5f7; } /* ---------- Auto theme ---------- */ @media (prefers-color-scheme: dark){ [data-theme="auto"]{ --brand:var(--brand-400); --brand-hover:#409cff; --brand-soft:rgba(10,132,255,0.14); --brand-tint:rgba(10,132,255,0.12); --bg:#000000; --bg-soft:#1c1c1e; --panel:#1c1c1e; --card:#1c1c1e; --bg2:#2c2c2e; --text:#f5f5f7; --text-2:#e5e5ea; --muted:#98989f; --muted2:#636366; --line:#38383a; --line-soft:#2c2c2e; --danger:#ff453a; --danger-soft:rgba(255,69,58,0.16); --success:#30d158; --success-soft:rgba(48,209,88,0.16); --warn:#ff9f0a; --warn-soft:rgba(255,159,10,0.18); --avatar-bg:rgba(10,132,255,0.16); --avatar-text:#409cff; --badge-pinned-bg:rgba(255,159,10,0.18); --badge-pinned-text:#ffb340; --shadow-2xs:0 1px 2px -1px rgba(0,0,0,0.3); --shadow-xs:0 1px 2px 0 rgba(0,0,0,0.32); --shadow-sm:0 1px 3px 0 rgba(0,0,0,0.4),0 1px 2px -1px rgba(0,0,0,0.36); --shadow:0 4px 14px -3px rgba(0,0,0,0.5),0 2px 6px -2px rgba(0,0,0,0.4); --shadow-md:0 8px 28px -6px rgba(0,0,0,0.55),0 4px 10px -4px rgba(0,0,0,0.45); --shadow-lg:0 18px 48px -10px rgba(0,0,0,0.6),0 8px 18px -6px rgba(0,0,0,0.5); --shadow-xl:0 24px 64px -12px rgba(0,0,0,0.7); --top-bg:rgba(28,28,30,0.68); --top-border:rgba(56,56,58,0.5); --ring:rgba(10,132,255,0.4); --code-bg:rgba(255,255,255,0.08); --code-text:#f5f5f7; --pre-bg:#0a0a0a; --pre-text:#f5f5f7; } } /* ---------- Base ---------- */ *{box-sizing:border-box} html{min-height:100%;background:var(--bg);scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font:14px/1.6 var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; transition:background var(--transition),color var(--transition); } a{color:var(--brand);text-decoration:none;transition:color var(--transition-fast)} a:hover{color:var(--brand-hover)} h2,h3,p{margin:0} h2{margin-bottom:12px;font-size:17px;line-height:1.35;font-weight:650;color:var(--text);letter-spacing:-0.01em} h3{margin-bottom:8px;font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.01em} .muted{color:var(--muted)} ::selection{background:rgba(0,122,255,0.18)} [data-theme="dark"] ::selection{background:rgba(10,132,255,0.32)} @media (prefers-color-scheme: dark){[data-theme="auto"] ::selection{background:rgba(10,132,255,0.32)}} /* ---------- Top navigation (frosted glass) ---------- */ .top,.forum-more-region{ position:sticky; top:0; z-index:30; background:var(--top-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--top-border); } .forum-more-region{z-index:29;background:var(--top-bg)} .forum-more-region[hidden]{display:none} .bar{ max-width:1100px; margin:auto; padding:0 16px; display:flex; align-items:center; gap:12px; height:54px; } .brand{ color:var(--text)!important; font-size:16px; font-weight:700; letter-spacing:-0.02em; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; } .brand:before{ content:""; width:28px; height:28px; display:inline-block; flex:0 0 28px; border-radius:8px; background:url("index.svg") center/contain no-repeat; box-shadow:var(--shadow-xs); } .forum-nav{ position:relative; display:flex; align-items:center; gap:2px; min-width:0; overflow:hidden; } .forum-link{ display:inline-flex; align-items:center; flex:0 1 auto; max-width:104px; height:32px; padding:0 12px; border-radius:var(--radius-sm); overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:13.5px; line-height:1; white-space:nowrap; transition:color var(--transition-fast),background var(--transition-fast); } .forum-link.active{color:var(--text);font-weight:600} .forum-link:hover,.forum-more-toggle:hover{background:var(--brand-soft);color:var(--brand)} .forum-more-toggle{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted); font:inherit; font-size:13.5px; line-height:1; cursor:pointer; user-select:none; transition:color var(--transition-fast),background var(--transition-fast); } .forum-more-toggle:after{ content:""; width:5px; height:5px; margin-top:-2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.72; } .forum-more-toggle[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand);font-weight:600} .forum-more-toggle[aria-expanded="true"]:after{margin-top:2px;transform:rotate(225deg)} .forum-more-panel{ max-width:1100px; margin:0 auto; padding:12px 16px 14px; display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; width:100%; } .forum-more-link{ display:inline-flex; align-items:center; max-width:160px; min-height:30px; padding:0 13px; border:1px solid transparent; border-radius:999px; color:var(--muted); font-size:12.5px; font-weight:500; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color var(--transition-fast),background var(--transition-fast); } .forum-more-link:hover{background:var(--brand-soft);color:var(--brand)} .forum-more-link.active{background:var(--brand);color:#fff;font-weight:600} /* ---------- Search ---------- */ .search-form{ flex:1 1 auto; max-width:280px; margin-left:auto; display:flex; align-items:center; height:34px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--muted2); overflow:hidden; transition:border-color var(--transition-fast),box-shadow var(--transition-fast); } .search-field{ flex:0 0 60px; height:100%; padding:0 8px; border:0; border-right:1px solid var(--line-soft); border-radius:0; background:transparent; color:var(--muted); font:inherit; font-size:11.5px; box-shadow:none; outline:0; cursor:pointer; } .search-input{ flex:1; min-width:0; height:100%; border:0!important; box-shadow:none!important; padding:0 10px; background:transparent; color:var(--text); font-size:12.5px; } .search-input::placeholder{color:var(--muted2)} .search-form:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)} .search-field:focus{box-shadow:none} .search-btn{ width:34px; min-height:0; height:100%; padding:0; border-radius:0; background:transparent; color:var(--muted2); } .search-btn:hover{background:var(--brand-soft);color:var(--brand)} /* ---------- Nav right / theme toggle / mobile button ---------- */ .nav-mine{display:none;color:var(--text)!important;font-size:14px;font-weight:600;white-space:nowrap} .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); cursor:pointer; transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast); } .theme-toggle:hover{color:var(--brand);background:var(--brand-soft);border-color:var(--brand)} .theme-toggle:active{transform:scale(0.95)} .theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--text);transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)} .nav-icon:hover{color:var(--brand);background:var(--brand-soft);border-color:var(--brand)} .nav-icon:active{transform:scale(0.95)} .nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .nav-icon .badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 2px 6px rgba(255,59,48,0.35)} .nav-icon-admin{color:var(--brand);border-color:var(--brand)} .nav-icon-admin:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .notify-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; line-height:1; box-shadow:0 2px 6px rgba(255,59,48,0.3); } .tab-post{display:none} .tab-actions{display:none} .admin-tabs{ display:flex; max-width:100%; overflow-x:auto; overflow-y:hidden; gap:0; padding:10px 16px; border-bottom:1px solid var(--line-soft); white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .admin-tabs::-webkit-scrollbar{display:none} .admin-tabs .tab{flex:0 0 auto;white-space:nowrap} /* ---------- Layout ---------- */ .wrap{max-width:1100px;margin:0 auto;padding:20px 16px} .footer{max-width:1100px;margin:0 auto;padding:14px 16px 28px;color:var(--muted2);font-size:12px;text-align:center} .footer-icp{text-align:center;padding:6px 0} .footer-icp a{font-size:12px;color:var(--muted2);text-decoration:none;transition:color var(--transition-fast)} .footer-icp a:hover{color:var(--brand)} .runtime-info{white-space:normal;overflow-wrap:anywhere;word-break:break-word} .runtime-info pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word} .row{display:flex;align-items:center;gap:10px;margin:0 0 12px} .box,.card,.list,.user-header{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; margin-bottom:12px; box-shadow:var(--shadow-sm); } .box{padding:16px} .box.row{padding:12px 16px} .home-shell{ background:transparent; border:0; border-radius:0; padding:0; overflow:visible; box-shadow:none; margin-bottom:0; } .home-shell .forum-layout{gap:20px} .forum-layout{display:flex;gap:14px;align-items:flex-start} .forum-main{flex:1;min-width:0} .main-panel{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); } .main-panel>.list{margin-bottom:0;border-radius:0;border:0;box-shadow:none} .main-panel>.row{margin-bottom:0;padding:14px 16px} .sidebar{ width:252px; flex-shrink:0; display:grid; gap:12px; align-content:start; position:sticky; top:76px; } .sidebar .card{margin-bottom:0} .sidebar-card{border-color:var(--line-soft);box-shadow:var(--shadow-sm)} .tab-bar{display:flex;align-items:center;gap:0;margin:0 0 12px} .tab-bar>.pagination{margin:0 0 0 auto;padding:0} .profile-toolbar,.topic-toolbar{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px;border-bottom:1px solid var(--line-soft)} .profile-header-card{display:flex;align-items:center;gap:18px;padding:22px 18px;margin-bottom:0;border-bottom:1px solid var(--line-soft)} .profile-header-avatar img,.profile-header-avatar .avatar-img{width:68px;height:68px;border-radius:50%} .profile-header-info{flex:1;min-width:0} .profile-header-name{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:650;color:var(--text);letter-spacing:-0.02em} .profile-header-group{display:inline-block;padding:3px 10px;font-size:12px;font-weight:500;color:var(--muted);background:var(--bg-soft);border-radius:999px} .profile-badge{display:inline-block;padding:3px 10px;font-size:12px;border-radius:999px} .profile-badge.banned{color:#fff;background:#dc3545} .profile-badge.muted{color:#fff;background:#f59e0b} .profile-header-stats{margin-top:7px;font-size:13px} .profile-header-points{color:var(--brand);font-weight:600} .profile-header-bio{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.55} /* 用户主页详细资料展示 */ .user-profile-detail{padding:18px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:16px} .up-sig{font-size:13px;color:var(--muted);font-style:italic;padding-left:14px;border-left:3px solid var(--brand);line-height:1.6} .up-attr-row{display:flex;flex-wrap:wrap;gap:7px} .up-pill{display:inline-flex;align-items:center;padding:4px 13px;font-size:12px;font-weight:600;border-radius:999px;background:var(--brand-soft);color:var(--brand);line-height:1.6;letter-spacing:0.01em} .up-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px} .up-info-item{display:flex;align-items:baseline;gap:7px;font-size:13px;padding:6px 10px;background:var(--bg-soft);border-radius:var(--radius-sm)} .up-info-label{color:var(--muted);flex-shrink:0;min-width:32px;font-size:12px} .up-info-value{color:var(--text);word-break:break-all;font-weight:500} .up-info-value a{color:var(--brand);text-decoration:none} .up-info-value a:hover{text-decoration:underline} .up-tags-section,.up-text-section{display:flex;flex-direction:column;gap:7px} .up-section-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.06em;text-transform:uppercase} .up-tags-cloud{display:flex;flex-wrap:wrap;gap:6px} .up-tag-chip{display:inline-block;padding:4px 11px;font-size:12px;border:1px solid var(--line);border-radius:999px;color:var(--text);background:var(--bg-soft);font-weight:500} .up-text-content{font-size:13px;color:var(--text);line-height:1.7;padding:12px 14px;background:var(--bg-soft);border-radius:var(--radius-sm);border-left:3px solid var(--brand)} @media(max-width:480px){.up-info-grid{grid-template-columns:1fr 1fr}} .profile-toolbar .tab-bar,.topic-toolbar .tab-bar{flex:1;min-width:0;margin:0} .topic-toolbar .tab-post{ display:none; align-items:center; flex-shrink:0; margin-left:auto; min-height:0; padding:7px 16px; border:0; border-radius:999px; background:var(--brand); color:#fff; font-size:12.5px; font-weight:600; box-shadow:var(--shadow-sm); } .mobile-forum-strip{display:none} .tab{ padding:7px 16px; border:1px solid var(--line); border-radius:0; background:var(--panel); color:var(--muted); font-size:13px; font-weight:500; line-height:1.2; white-space:nowrap; transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast); } .tab:first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)} .tab:not(:has(~ .tab)){border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)} .tab + .tab{margin-left:-1px} .tab:hover{color:var(--text);background:var(--line-soft)} .tab:active{transform:scale(0.97)} .tab.active{background:var(--brand);border-color:var(--brand);color:#fff;position:relative;z-index:1;box-shadow:var(--shadow-sm)} .tab.active:hover{background:var(--brand);color:#fff} .auth-tabs{padding:14px 0 0;margin:0 0 4px} /* ---------- Post list ---------- */ .post-list,.quick-links,.admin-manage-list{list-style:none;margin:0;padding:0} .post-item{ display:flex; align-items:flex-start; gap:12px; min-height:66px; padding:15px 16px; border-bottom:1px solid var(--line-soft); transition:background var(--transition-fast); } .post-item:last-child{border-bottom:none} .post-item:hover{background:var(--brand-tint)} .post-avatar{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px;height:40px; border-radius:50%; background:var(--avatar-bg); color:var(--avatar-text); font-size:14px; font-weight:700; overflow:hidden; } .avatar-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} .post-body{flex:1;min-width:0} .post-title{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:14px; line-height:1.4; font-weight:600; letter-spacing:-0.005em; } .post-title:hover{color:var(--brand)} .post-title-row{min-width:0} .post-title-row .post-title{display:inline;overflow:visible;white-space:normal;text-overflow:clip} .profile-reply-excerpt{ display:-webkit-box; overflow:hidden; margin-top:4px; color:var(--muted); font-size:12.5px; line-height:1.5; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .topic-pages{display:inline-flex;align-items:center;gap:3px;margin-left:6px;vertical-align:middle;color:var(--muted2);font-size:11px} .topic-pages .meta-icon,.post-content-stats .meta-icon{width:12px;height:12px;flex:0 0 12px} .topic-pages a{display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:16px;color:var(--muted);line-height:1} .topic-pages a:hover{color:var(--brand)} .topic-pages-sep{color:var(--muted2);line-height:1} .topic-badge{ display:inline-flex; align-items:center; height:18px; margin-right:6px; padding:0 8px; border-radius:999px; background:var(--line-soft); color:var(--muted); font-size:10px; font-weight:600; vertical-align:middle; } .topic-badge.pinned{background:var(--badge-pinned-bg);color:var(--badge-pinned-text)} .topic-badge.highlight{background:var(--danger-soft);color:var(--danger)} .post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:5px;color:var(--muted);font-size:11.5px} .post-meta span,.post-meta a,.post-content-stats span{display:inline-flex;align-items:center;gap:3px} .post-meta a{color:var(--muted)} .post-meta a:hover{color:var(--brand)} .meta-icon{width:13px;height:13px;flex:0 0 13px;color:var(--muted2)} .post-meta .post-forum-meta{display:none} .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px;color:var(--muted);font-size:12.5px} .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--brand)} /* ---------- Post entry ---------- */ .post-entry{ display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-areas:"avatar body" "content content"; column-gap:12px; align-items:start; } .post-entry.has-title{grid-template-areas:"title title" "avatar body" "content content";row-gap:8px} .post-topic-title{grid-area:title;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:6px;padding:18px 18px 0} .post-entry .post-avatar{grid-area:avatar} .post-entry .post-body{grid-area:body} .post-entry .post-content{grid-area:content} .post-entry:hover{background:var(--panel)} .post-highlight{margin:10px 0;padding:13px 15px;border-radius:var(--radius-sm);background:var(--brand-soft)} .post-head{position:relative;display:flex;align-items:center;min-height:20px;padding-right:60px} .topic-post-list .post-head.has-floor{padding-right:96px} .post-head .post-title{flex:1;min-width:0} .post-head .post-author{flex:0 0 auto} .post-user-group,.user-state-tag{ display:inline-flex; align-items:center; flex-shrink:0; margin-left:6px; padding:0 8px; border:0; border-radius:999px; background:var(--line-soft); color:var(--muted); font-size:10px; line-height:1.5; white-space:nowrap; vertical-align:middle; } .user-state-tag.danger{background:var(--danger-soft);color:var(--danger)} .post-user-group.group-vip{background:linear-gradient(135deg,#f0c969,#e6a817);color:#5a3e00;font-weight:700;box-shadow:0 1px 4px rgba(230,168,23,0.3)} .post-user-group.group-banned{background:#3a2020;color:#ff6b6b;font-weight:600} .post-head .user-state-tags{flex-shrink:0} .notification-item.unread .post-title{color:var(--text);font-weight:700} .notification-head{display:flex;gap:6px} .notification-kind{margin-left:0} .notification-unread{ display:inline-flex; align-items:center; height:18px; padding:0 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-size:10px; line-height:1; font-weight:600; } .notification-read-divider{ display:flex; align-items:center; justify-content:center; padding:18px 0; color:var(--muted2); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--line-soft); } .notification-content{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.6} .notify-link{ display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--muted); font-size:12px; transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast); } .notify-link:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .notify-target{ display:flex; align-items:center; gap:10px; padding:13px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--bg); color:var(--muted); font-size:12px; } .notify-target-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--line-soft);overflow:hidden} .notify-target-info{display:grid;gap:2px;min-width:0} .notify-target-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:14px;line-height:1.3} .notify-target-info span{color:var(--muted2);font-size:11px} .notify-pop{display:grid;gap:12px} .notify-form,.reply-panel form{display:grid;gap:10px} .notify-quote-card{margin:0;padding:0 0 0 14px;border-left:3px solid var(--line);color:var(--muted);font-size:12px;line-height:1.6} .notify-quote-card p{margin:0;word-break:break-word;overflow-wrap:anywhere} .notify-form textarea{min-height:132px;border-color:var(--line);background:var(--panel);font-size:13px;line-height:1.7} .notify-form textarea::placeholder{color:var(--muted2)} .notify-actions{display:flex;align-items:center;justify-content:space-between;gap:10px} .notify-status{min-height:16px;color:var(--muted);font-size:12px} /* ---------- Modal / Toast ---------- */ .modal-backdrop{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,0.32); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .modal-backdrop[hidden]{display:none!important} .modal-panel{ width:min(460px,100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-xl); animation:modal-in .22s cubic-bezier(0.25,0.1,0.25,1); } @keyframes modal-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}} /* ---------- Lightbox ---------- */ .lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);padding:24px;animation:lightbox-in .15s ease} .lightbox[hidden]{display:none!important} .lightbox-img{max-width:90vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5)} .lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;transition:background .15s} .lightbox-close{top:16px;right:16px;width:40px;height:40px;font-size:24px} .lightbox-prev{left:16px;top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:28px} .lightbox-next{right:16px;top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:28px} .lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.3)} .lightbox button[hidden]{display:none} @keyframes lightbox-in{from{opacity:0}to{opacity:1}} .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line-soft); } .modal-head strong{font-size:15px;color:var(--text);font-weight:600} .modal-close{ width:30px;min-width:30px;height:30px;min-height:30px; padding:0; border:0; border-radius:50%; background:var(--line-soft); color:var(--muted); font-size:18px; cursor:pointer; transition:background var(--transition-fast),color var(--transition-fast); } .modal-close:hover{background:var(--line);color:var(--text)} .modal-body{padding:16px} .confirm-box{display:grid;gap:14px} .confirm-message{margin:0;color:var(--text);font-size:14px;line-height:1.6} .confirm-check{ display:flex; align-items:center; gap:8px; padding:11px 13px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-size:14px; } .confirm-check input{width:16px;height:16px;margin:0;accent-color:var(--brand)} .prompt-input{ width:100%; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); font:inherit; } .prompt-input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--ring)} .confirm-actions{display:flex;justify-content:flex-end;gap:8px} .toast{ position:fixed; left:50%;top:42%; z-index:50; transform:translate(-50%,-50%); max-width:calc(100vw - 32px); padding:12px 20px; border-radius:999px; background:rgba(29,29,31,0.92); color:#fff; font-size:13px; font-weight:500; box-shadow:var(--shadow-lg); animation:toast-in .25s ease; } [data-theme="dark"] .toast{background:rgba(245,245,247,0.94);color:#1D1D1F} @media (prefers-color-scheme: dark){[data-theme="auto"] .toast{background:rgba(245,245,247,0.94);color:#1D1D1F}} .toast[hidden]{display:none!important} @keyframes toast-in{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} /* ---------- Post content ---------- */ .post-ops{position:absolute;right:0;top:0;display:flex;align-items:center;gap:4px} .post-floor{display:inline-flex;height:24px;align-items:center;color:var(--muted2);font-size:11px} .post-content{ width:100%; margin-top:5px; word-break:break-word; overflow-wrap:anywhere; color:var(--text); font-size:14.5px; line-height:1.78; } .post-content p{margin:0 0 10px} .post-content p:last-child{margin-bottom:0} .post-content blockquote{ margin:8px 0 12px; padding:4px 0 4px 15px; border-left:3px solid var(--brand-soft); color:var(--muted); border-radius:2px; background:var(--bg-soft); padding:8px 14px 8px 15px; } .post-content blockquote:last-child{margin-bottom:0} .post-content blockquote p{margin-bottom:6px} .post-content ul{margin:6px 0 10px 20px;padding:0} .post-content li{margin:3px 0} .post-content table{ width:100%; min-width:250px; border-collapse:collapse; border:1px solid var(--line); background:var(--panel); font-size:13px; line-height:1.5; border-radius:var(--radius-sm); overflow:hidden; } .post-content th,.post-content td{padding:9px 11px;border:1px solid var(--line-soft);text-align:left;vertical-align:top} .post-content th{background:var(--bg);color:var(--muted);font-weight:600} .post-content tr:nth-child(even) td{background:var(--bg)} .post-content code{ padding:2px 6px; border-radius:6px; background:var(--code-bg); color:var(--code-text); font-family:var(--font-mono); font-size:.9em; } .post-content pre{ display:block; max-width:100%; margin:10px 0 12px; padding:14px 16px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--pre-bg)!important; color:var(--pre-text); font:12.5px/1.7 var(--font-mono); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); } .post-content pre code{display:block;padding:0!important;border:0;border-radius:0;background:transparent!important;color:inherit;font:inherit;white-space:pre;word-break:normal;overflow-wrap:normal} .post-content img{display:block;max-width:100%;height:auto;margin:8px 0;border-radius:var(--radius-sm)} .post-content a{color:var(--brand)} .post-content a:hover{color:var(--brand-hover);text-decoration:underline} .post-content-title{margin:0;color:var(--text);font-size:21px;font-weight:700;line-height:1.35;letter-spacing:-0.015em} .post-content-stats{display:inline-flex;align-items:center;gap:8px;color:var(--muted2);font-size:11.5px;line-height:1.4} .post-tag{ margin-left:auto; flex-shrink:0; padding:2px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--muted); font-size:11px; white-space:nowrap; transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast); } .post-tag:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)} .post-forum-badge{display:inline-flex} /* ---------- Forms ---------- */ .btn,button{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 17px; border:0; border-radius:var(--radius-sm); background:var(--brand); color:#fff; cursor:pointer; font:inherit; font-weight:600; line-height:1.2; white-space:nowrap; transition:background var(--transition-fast),box-shadow var(--transition-fast),transform 80ms ease; } .btn:hover,button:hover{background:var(--brand-hover);color:#fff;box-shadow:0 3px 10px rgba(0,122,255,0.22)} .btn:active,button:active{transform:scale(.97)} .btn.alt{background:var(--line-soft);color:var(--text);border:1px solid var(--line)} .btn.alt:hover{background:var(--line);color:var(--text);border-color:var(--line);box-shadow:none} .btn.danger,button.danger{background:var(--danger)} .btn.danger:hover,button.danger:hover{background:var(--danger);filter:brightness(0.92);box-shadow:0 3px 10px rgba(255,59,48,0.25)} button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); } .post-action-form{display:inline-flex!important;margin:0!important;padding:0!important;gap:0!important} .post-action-form button{font:inherit} input,select,textarea{ width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); font:inherit; padding:9px 13px; transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast); } input::placeholder,textarea::placeholder{color:var(--muted2)} input:hover,select:hover,textarea:hover{border-color:var(--muted2)} input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);outline:0;background:var(--panel)} input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--brand);border-radius:4px} textarea{min-height:120px;resize:vertical;line-height:1.6} .attachment-uploader,.avatar-mirror-box{display:grid;gap:8px} .attachment-input{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none} .attachment-drop{display:grid;justify-items:start;gap:2px;padding:0;border:0;background:transparent;color:var(--muted);text-align:left;cursor:pointer} .attachment-drop strong{color:var(--text);font-size:13px;line-height:1.4} .attachment-drop span{font-size:12px;line-height:1.45} .attachment-uploader:focus-within .attachment-drop,.attachment-drop:hover{background:transparent;color:var(--brand)} .grid{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;align-items:start;margin:10px 0} .grid>span{padding-top:8px;color:var(--muted);font-size:12.5px} .form-panel{margin:0;padding:20px 24px} .form-panel.auth-panel{margin-top:0} .form-panel h2{margin:0 0 16px} .form-panel form{display:grid;gap:4px} .form-panel .grid{grid-template-columns:1fr;gap:5px;margin:0 0 10px} .form-panel .grid>span{padding-top:0} .form-panel input,.form-panel select{max-width:460px} .form-panel button{justify-self:start} .form-panel .muted{margin:10px 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg)} .reply-edit-panel textarea{min-height:220px} .settings-form{padding:0;overflow:hidden} .settings-form form{padding:24px 28px;gap:0} .settings-form .grid{grid-template-columns:180px minmax(0,1fr);gap:10px 16px;margin:0;padding:12px 0;border-bottom:1px solid var(--line-soft);transition:background var(--transition-fast)} .settings-form .grid:hover{background:var(--bg)} .settings-form .grid>span{padding-top:10px;color:var(--muted);font-size:13px;font-weight:500} .settings-form .grid>span small{display:block;margin-top:3px;color:var(--muted2);font-size:11px;font-weight:400;line-height:1.4} .settings-form input[type=text],.settings-form input[type=url],.settings-form input[type=email],.settings-form input[type=number],.settings-form select{max-width:100%;width:100%} .settings-form textarea{min-height:72px;max-width:100%;width:100%} .settings-form textarea[name=header_html],.settings-form textarea[name=footer_html]{min-height:100px;font-family:var(--font-mono);font-size:12px} .settings-form input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;transition:transform var(--transition-fast)} .settings-form input[type=checkbox]:hover{transform:scale(1.1)} .settings-form .grid:has(input[type=checkbox]){align-items:center;padding:12px 0} .settings-form .grid:has(input[type=checkbox])>span{padding-top:0} .settings-section{margin:0;padding:20px 0;border:0;background:none;box-shadow:none} .settings-section:first-child{padding-top:0} .settings-section+.settings-section{border-top:2px solid var(--line);margin-top:4px} .settings-section h3{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;letter-spacing:-0.01em} .settings-section h3::before{content:'';display:inline-block;width:3px;height:14px;border-radius:2px;background:var(--brand);flex-shrink:0} .settings-section-collapse .settings-section-body{display:none} .settings-section-collapse.open .settings-section-body{display:block} .settings-section-collapse h3{cursor:pointer;user-select:none;transition:color var(--transition-fast)} .settings-section-collapse h3:hover{color:var(--brand)} .settings-section-collapse h3::after{content:'展开';margin-left:auto;font-size:12px;font-weight:400;color:var(--muted2)} .settings-section-collapse.open h3::after{content:'收起'} .settings-actions{display:flex;justify-content:flex-end;gap:10px;padding:20px 0 0;border-top:1px solid var(--line-soft);margin-top:8px} .settings-actions button{min-width:120px;transition:all var(--transition-fast)} .settings-actions button:hover{transform:translateY(-1px)} .settings-actions button:active{transform:scale(0.98)} .settings-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:18px 28px;border-top:1px solid var(--line-soft);background:var(--bg)} .settings-tool-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)} .settings-tool-card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)} .settings-tool-card>div{display:grid;gap:3px;min-width:0} .settings-tool-card strong{color:var(--text);font-size:13px;font-weight:600} .settings-tool-card span{color:var(--muted);font-size:11px;line-height:1.4;word-break:break-all} .settings-tool-actions{display:flex;gap:6px;flex-shrink:0} .settings-tool-action{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)} .settings-tool-action:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .settings-tool-action:active{transform:scale(0.96)} /* ---------- Reply panel ---------- */ .reply-panel{ margin:0; padding:16px; border:0; border-top:1px solid var(--line-soft); border-radius:0; background:transparent; box-shadow:none; scroll-margin-top:76px; } .reply-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)} .reply-panel-head h3{margin:0;color:var(--text);font-size:14px;font-weight:600} .reply-panel-head span{display:inline-flex;align-items:center;min-height:20px;padding:0 9px;border-radius:999px;background:var(--line-soft);color:var(--muted);font-size:11px;white-space:normal;text-align:right} .reply-panel .grid{grid-template-columns:1fr;margin:0} .reply-panel .grid>span{display:none} .reply-panel textarea{min-height:118px;border-color:var(--line);background:var(--bg);line-height:1.7} .reply-panel textarea:focus{background:var(--panel)} .reply-panel button{justify-self:end;min-width:96px} .reply-login-box{ display:flex; align-items:center; justify-content:center; min-height:118px; border:1px dashed var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--muted); font-size:13px; gap:6px; } .reply-login-box a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 16px;border-radius:var(--radius-sm);background:var(--brand);color:#fff;font-weight:600} .reply-login-box a:hover{background:var(--brand-hover);color:#fff} .reply-login-box.disabled{background:var(--bg);color:var(--muted2)} .icon-action{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:26px;height:26px; border-radius:var(--radius-sm); opacity:.55; transition:opacity var(--transition-fast),background var(--transition-fast); } .icon-action:hover{background:var(--brand-soft);opacity:1;color:var(--brand)} .icon-action:before{content:"";width:15px;height:15px;background:center/15px 15px no-repeat} .icon-quote:before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2386868b%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 10 4 15l5 5%27/%3E%3Cpath d=%27M20 4v7a4 4 0 0 1-4 4H4%27/%3E%3C/svg%3E")} .icon-edit:before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2386868b%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 20h9%27/%3E%3Cpath d=%27M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z%27/%3E%3C/svg%3E")} .fav-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--muted);flex-shrink:0;transition:color var(--transition-fast)} .fav-btn:hover,.fav-btn.active{color:var(--brand)} .fav-btn .meta-icon{width:14px;height:14px;flex:0 0 14px;color:inherit} .fav-btn span,.icon-action span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- User card / sidebar ---------- */ .user-card{box-shadow:var(--shadow-sm)} .user-wrap{padding:16px} .user-wrap .user-header{margin:0 0 12px;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none} .user-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px} .user-header-info{display:flex;align-items:center;gap:10px;min-width:0} .user-avatar-big{ width:50px;height:50px; border-radius:50%; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; flex-shrink:0; overflow:hidden; box-shadow:0 3px 10px rgba(0,122,255,0.22); } .user-avatar-big:hover{box-shadow:0 0 0 3px var(--brand-soft),0 3px 10px rgba(0,122,255,0.22)} .visitor-avatar{font-size:16px;font-weight:700} .table-avatar{width:24px;height:24px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:8px;background:var(--line-soft);overflow:hidden} .avatar-picker{display:grid;gap:10px;min-width:0} .avatar-picker select{min-width:0} .profile-disclosure{min-width:0} .profile-disclosure>div{min-width:0} .user-name{font-size:15px;font-weight:650;color:var(--text);letter-spacing:-0.01em} .user-name:hover{color:var(--brand)} .user-rank{margin-top:2px;color:var(--muted);font-size:11px} .side-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} .side-auth.single{grid-template-columns:1fr} .side-auth a{display:flex;align-items:center;justify-content:center;height:36px;border-radius:var(--radius-sm);background:var(--brand);color:#fff;font-weight:600;transition:background var(--transition-fast),box-shadow var(--transition-fast)} .side-auth a:hover{background:var(--brand-hover);box-shadow:0 3px 10px rgba(0,122,255,0.22)} .side-auth a+a{background:var(--line-soft);color:var(--text);border:1px solid var(--line);font-weight:500} .side-auth a+a:hover{background:var(--line);box-shadow:none} .user-links{display:grid;grid-template-columns:1fr 1fr;font-size:12.5px} .user-attrs{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .attr-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap} .attr-gender{background:var(--brand-tint);color:var(--brand)} .attr-orientation{background:rgba(175,82,222,0.1);color:#AF52DE} .attr-role{background:rgba(255,59,48,0.08);color:var(--danger)} .attr-pronouns{background:rgba(52,199,89,0.08);color:var(--success)} .attr-experience{background:rgba(255,149,0,0.1);color:#FF9500} .attr-relationship{background:rgba(255,45,85,0.08);color:#FF2D55} .attr-tag{background:var(--line-soft);color:var(--muted)} [data-theme="dark"] .attr-orientation{color:#BF5AF2} [data-theme="auto"] .attr-orientation{color:#AF52DE} @media(prefers-color-scheme:dark){[data-theme="auto"] .attr-orientation{color:#BF5AF2}} .user-links a{display:flex;align-items:center;gap:5px;min-height:28px;color:var(--muted);white-space:nowrap} .user-links a:hover{color:var(--brand)} .user-links .notify-badge{margin-left:auto} .btn-post{ display:block; margin:0 16px 16px; padding:10px; border-radius:var(--radius-sm); background:var(--brand); color:#fff; text-align:center; font-size:13px; font-weight:600; transition:background var(--transition-fast),box-shadow var(--transition-fast); } .btn-post:hover{background:var(--brand-hover);color:#fff;box-shadow:0 3px 12px rgba(0,122,255,0.28)} .quick-wrap{padding:12px 16px} .quick-title{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em} .quick-links li{border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--muted)} .quick-links li:last-child{border-bottom:none} .quick-links a{display:flex;align-items:center;min-height:30px} .quick-links a:before{content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--muted2)} .quick-links li.notify-dot-link a:before{background:var(--danger);box-shadow:0 0 0 3px rgba(255,59,48,0.14)} .quick-links a.active{color:var(--text);font-weight:600} .quick-links a.active:before{background:var(--brand)} .quick-links a:hover{color:var(--brand)} .quick-links a:hover:before{background:var(--brand)} .feature-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px} .feature-links li{min-width:0;border-bottom:none} .feature-links a{min-width:0} .feature-links a:before{flex:0 0 6px} .feature-link-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .feature-links .notify-badge{flex:0 0 auto} .notice-links li{position:relative;padding:9px 0 9px 14px;line-height:1.55;color:var(--muted)} .notice-links li:before{content:"";position:absolute;left:0;top:17px;width:5px;height:5px;border-radius:50%;background:var(--muted2)} .sidebar-bio{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;color:var(--muted);font-size:12px;line-height:1.65} .profile-info-grid{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px} .profile-info-row{display:flex;align-items:baseline;gap:4px;font-size:12px;line-height:1.6} .profile-info-label{color:var(--muted2);flex-shrink:0;min-width:28px} .profile-info-value{color:var(--text);word-break:break-word} .profile-looking-for,.profile-interests-text{margin-top:8px;display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.6} .profile-looking-for .profile-info-value,.profile-interests-text .profile-info-value{color:var(--muted);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere} .stats-wrap{padding:12px 16px 14px} .stats-sub{margin-bottom:8px;color:var(--muted);font-size:11px} .new-users{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px} .nu-item{display:flex;flex-direction:column;align-items:center;gap:3px} .nu-avatar-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--line-soft);color:#fff;font-size:14px;font-weight:700} .nu-name{max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10px;text-align:center} /* ---------- Admin ---------- */ .admin{display:grid;grid-template-columns:184px minmax(0,1fr);gap:14px;align-items:start} .side{position:sticky;top:76px;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow-sm)} .side a{display:block;margin-bottom:2px;padding:8px 12px;border-radius:var(--radius-sm);color:var(--muted);font-size:13px;transition:background var(--transition-fast),color var(--transition-fast)} .side a:hover{background:var(--line-soft);color:var(--text)} .side a.pill{background:var(--brand);color:#fff;font-weight:600} .list{width:100%;border:0;border-collapse:separate;border-spacing:0;font-size:13px} .admin-table-search{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0} .admin-table-search .admin-search-select{flex:0 0 108px;width:108px;max-width:108px} .admin-search-select{width:auto;height:32px;padding:0 28px 0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px} .admin-search-field{display:flex;align-items:center;width:230px;height:32px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);overflow:hidden} .admin-search-field input{flex:1;min-width:0;height:100%;padding:0 10px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:12px} .admin-search-field input:focus{border:0;box-shadow:none} .admin-search-submit{height:100%;min-height:0;padding:0 12px;border:0;border-left:1px solid var(--line-soft);border-radius:0;background:var(--bg);color:var(--muted);font-size:12px;font-weight:600} .admin-search-clear{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px;font-weight:600} .admin-search-submit:hover,.admin-search-clear:hover{background:var(--brand-soft);color:var(--brand)} .admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0} .admin-head-left{flex:1;min-width:0} .admin-head-add{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12.5px;font-weight:600} .admin-head-add:hover{background:var(--brand);color:#fff} .admin-head-inline{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px} .admin-head-left-slot{flex:1 1 320px;display:flex;align-items:center;min-width:0} .admin-head-right-slot{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;min-width:0} .bulk-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 16px 12px;padding:10px 14px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm)} .bulk-select-all{display:inline-flex;align-items:center;gap:6px;margin-right:auto;color:var(--muted);font-size:12px} .bulk-select-all input{width:15px;height:15px} .bulk-action-group{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0} .bulk-action-select{flex:0 0 154px;width:154px;max-width:154px;height:30px;padding:0 24px 0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bulk-action-select+.bulk-action-select{flex-basis:164px;width:164px;max-width:164px} .bulk-delete{min-height:30px;padding:0 12px;font-size:12px} .admin-user-cell{display:flex;align-items:center;gap:9px;min-width:0;color:var(--text);font-weight:600} .admin-user-cell span,.admin-user-cell strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admin-user-cell .table-avatar{flex:0 0 34px;width:34px;height:34px;margin-right:0;border-radius:9px} .admin-user-text{display:grid;gap:2px;min-width:0} .admin-user-text strong{color:var(--text);font-size:13px;line-height:1.25} .admin-user-text span{color:var(--muted2);font-size:11px;font-weight:400;line-height:1.25} .user-state-tags{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap} .admin-flag.danger{border-color:transparent;background:var(--danger-soft);color:var(--danger)} .admin-name{color:var(--text);font-size:13px;font-weight:600} .admin-group-pill{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border:0;border-radius:999px;background:var(--line-soft);color:var(--muted);font-size:12px} .admin-topic-user .admin-group-pill{margin-left:6px} .admin-flag{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:22px;padding:0 9px;border:0;border-radius:999px;background:var(--line-soft);color:var(--muted2);font-size:12px} .admin-flag.on{background:var(--brand-soft);color:var(--brand);font-weight:600} .admin-flag.update{background:var(--badge-pinned-bg);color:var(--badge-pinned-text);font-weight:600} .admin-topic-user{display:flex;align-items:center;margin-bottom:4px;color:var(--muted);font-size:12px} .admin-topic-user .table-avatar{width:18px;height:18px;margin-right:6px;opacity:.72} .admin-dot{margin:0 6px;color:var(--muted2)} .admin-content-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:13px;font-weight:600;line-height:1.45} .admin-content-title:hover{color:var(--brand)} .admin-content-text{min-width:0;color:var(--muted);line-height:1.65;white-space:normal} .admin-inline-ops{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-left:auto;font-size:12px} .admin-inline-ops a,.admin-inline-ops button{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px;font-weight:500;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)} .admin-inline-ops a:hover,.admin-inline-ops button:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .admin-inline-ops a.danger:hover,.admin-inline-ops button.danger:hover{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)} .list th,.list td{max-width:420px;padding:12px 12px;border-bottom:1px solid var(--line-soft);overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle} .list th{background:var(--bg);color:var(--muted);font-size:12px;font-weight:600} .list tr:last-child td{border-bottom:none} .list tr:hover td{background:var(--bg)} .list td:last-child,.list th:last-child{text-align:right} .admin-bulk-list,.main-panel>.admin-bulk-list{border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm)} .admin-bulk-list th{height:36px;background:var(--bg);color:var(--muted);font-weight:600} .admin-bulk-list td{padding-top:13px;padding-bottom:13px} .admin-bulk-list tr:hover td{background:var(--bg)} .admin-bulk-list input[type=checkbox]{width:15px;height:15px} .admin-list-panel{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm);overflow:hidden;margin:12px 16px} .admin-list-head{padding:14px;border-bottom:1px solid var(--line-soft);background:var(--bg)} .admin-list-item{padding:14px;border-bottom:1px solid var(--line-soft)} .admin-list-item:last-child{border-bottom:none} .admin-list-item:hover{background:var(--bg)} .admin-object-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;min-height:64px} .admin-user-row,.admin-topic-row,.admin-reply-row{grid-template-columns:minmax(0,1fr) auto} .admin-trash-row{grid-template-columns:18px minmax(0,1fr) auto} .admin-row-check{flex:0 0 auto;width:15px;height:15px;margin:0} .admin-inline-ops .admin-row-check{margin-left:4px} .admin-row-main{display:grid;gap:6px;min-width:0} .admin-row-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0;color:var(--muted2);font-size:11px;line-height:1.35} .admin-topic-row .admin-row-main,.admin-reply-row .admin-row-main{padding-right:8px} .admin-reply-row .admin-content-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--muted)} .plugin-tabs{display:inline-flex;align-items:center;gap:4px;width:auto;margin:0 16px 12px;padding:4px;border:0;border-radius:999px;background:var(--line-soft)} .plugin-tabs .tab{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.2} .plugin-tabs .tab+.tab{margin-left:0} .plugin-tabs .tab:hover{background:var(--panel);color:var(--text)} .plugin-tabs .tab.active{background:var(--panel);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)} .plugin-list{display:grid;gap:10px;padding:10px;background:var(--bg)} .plugin-item.admin-object-row{align-items:start;gap:10px;min-height:86px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)} .plugin-item.admin-list-item{border-bottom:1px solid var(--line-soft)} .plugin-item:hover{box-shadow:var(--shadow)} .plugin-item.plugin-local-enabled{border-color:var(--brand);background:var(--brand-soft)} .plugin-item.plugin-local-disabled{border-color:var(--line-soft);background:var(--panel)} .plugin-title-line{display:flex;align-items:center;gap:8px;min-width:0} .plugin-title-line .admin-content-title{flex:0 1 auto;font-size:14px} .plugin-title-line .admin-flag{flex:0 0 auto} .plugin-desc{color:var(--muted)} .plugin-ops{grid-column:1;justify-content:flex-start;align-self:start;margin:2px 0 0;overflow-x:auto} .ops{white-space:nowrap} .ops a{display:inline-flex;align-items:center;min-height:26px;margin-left:4px;padding:3px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)} .ops a:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .ops .post-action-form{vertical-align:middle} .ops button{display:inline-flex;align-items:center;min-height:26px;margin-left:4px;padding:3px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px;font-weight:500} .ops button:hover{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)} .pill{display:inline-flex;align-items:center;min-height:22px;padding:2px 10px;border:0;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600} /* ---------- Pagination / empty ---------- */ .pagination{display:flex;justify-content:center;margin:14px 0;overflow-x:auto} .pagination ul{display:flex;gap:4px;min-width:max-content;list-style:none;margin:0;padding:0} .pagination a,.pagination .ellipsis{min-width:34px;height:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--muted);font-size:12.5px} .pagination a:hover{background:var(--line-soft);color:var(--text)} .pagination li.active a{background:var(--brand);color:#fff;font-weight:600} .pagination .ellipsis{color:var(--muted2)} .empty-state{padding:36px 16px;color:var(--muted2);text-align:center;font-size:14px} /* ---------- Topic media ---------- */ .topic-media-wrap{padding:0 18px} .topic-tip-wrap{padding:0 18px} .topic-media{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .topic-media .media-item{position:relative;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:var(--line-soft);cursor:pointer} .topic-media .media-item img,.topic-media .media-item video{width:100%;height:100%;object-fit:cover;display:block} .media-uploader{margin-top:10px;border:1px dashed var(--line);border-radius:var(--radius);padding:14px;background:var(--panel)} .media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .media-item{position:relative;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:var(--line-soft)} .media-item img{width:100%;height:100%;object-fit:cover;display:block} .media-item .media-thumb{width:100%;height:100%} .media-item .video-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--line-soft)} .media-item .video-icon{font-size:28px;color:var(--muted)} .media-remove{position:absolute;top:4px;right:4px;height:20px;padding:0 7px;gap:3px;border:0;border-radius:10px;background:rgba(0,0,0,0.55);color:#fff;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast);z-index:1} .media-remove:hover{background:rgba(0,0,0,0.8)} .media-insert{position:absolute;top:4px;left:4px;height:20px;padding:0 7px;gap:3px;border:0;border-radius:10px;background:rgba(0,0,0,0.55);color:#fff;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast);z-index:1} .media-insert:hover{background:var(--brand)} .media-upload-btn{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--muted);font-size:13px;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast);overflow:hidden} .media-upload-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)} .media-upload-btn input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .media-upload-btn span{pointer-events:none;text-align:center;padding:4px} .media-price-label{position:absolute;left:4px;bottom:4px;right:24px;z-index:2;display:flex;align-items:center;gap:2px;border-radius:4px;background:rgba(0,0,0,.6);padding:1px 4px} .media-price-label::before{content:"付费";font-size:10px;color:#ffd700;font-weight:600;white-space:nowrap} .media-price-input{width:100%;padding:1px 2px;font-size:11px;border:0;border-radius:3px;background:rgba(255,255,255,.15);color:#fff;text-align:center;min-width:30px} .media-price-input::placeholder{color:rgba(255,255,255,.7)} .media-price-input:focus{outline:none;background:rgba(255,255,255,.3)} .topic-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .topic-media-item,.topic-media-video{position:relative} .media-locked .media-blur{filter:blur(14px) brightness(.7)} .media-lock-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.45);color:#fff;text-align:center;padding:8px} .media-lock-icon{font-size:22px} .media-purchase-form{margin:0} .media-purchase-btn{padding:4px 12px;font-size:12px;font-weight:600;border:0;border-radius:var(--radius-sm);background:var(--brand);color:#fff;cursor:pointer} .media-purchase-btn:hover{filter:brightness(1.08)} .topic-media-paywall{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);text-align:center;margin-bottom:10px} .media-paywall-icon{font-size:32px} .media-paywall-tip{font-size:14px;color:var(--text);margin:0} .topic-media-paywall .media-purchase-btn{padding:8px 24px;font-size:14px} /* ---------- Tips ---------- */ .tip-section{margin-top:12px;padding:16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel)} .tip-amounts{display:flex;flex-wrap:wrap;gap:6px} .tip-amount{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:13px;cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)} .tip-amount:hover{border-color:var(--brand);color:var(--brand)} .tip-amount.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600} .tip-list{margin-top:12px;display:grid;gap:8px} .tip-item{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line-soft)} .tip-item:last-child{border-bottom:0} .tip-item .tip-user{font-weight:600;color:var(--text)} /* ---------- Paid content ---------- */ .paid-content{margin-top:14px;padding:16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel)} .paid-lock{text-align:center;padding:18px 0} .paid-buy{padding:10px 28px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background var(--transition-fast)} .paid-buy:hover{background:var(--brand-hover)} .topic-paid-wrap{list-style:none;margin:0 0 12px} .topic-paid{margin:0 18px 14px;padding:24px 16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);text-align:center} .topic-paid .paid-lock-icon{font-size:28px;margin-bottom:8px} .topic-paid .paid-tip{font-size:14px;color:var(--muted);margin:0 0 14px;line-height:1.6} .topic-paid .paid-purchase-form{margin:0} .topic-paid .paid-purchase-btn{padding:9px 26px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background var(--transition-fast)} .topic-paid .paid-purchase-btn:hover{background:var(--brand-hover)} .topic-paid .paid-login-tip{margin:0;font-size:14px} .topic-paid .paid-login-tip a{color:var(--brand);font-weight:600} /* ---------- Guest home ---------- */ .guest-home{min-height:calc(100vh - 54px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:linear-gradient(135deg,var(--bg) 0%,var(--line-soft) 100%);position:relative;padding:40px 20px 60px} .guest-center{text-align:center;max-width:520px;padding:48px 24px} .guest-title{font-size:42px;font-weight:700;margin:0 0 14px;line-height:1.12;letter-spacing:-0.025em;background:linear-gradient(135deg,var(--brand),var(--brand-hover));-webkit-background-clip:text;background-clip:text;color:transparent} .guest-subtitle{font-size:16px;color:var(--muted);margin:0 0 30px;line-height:1.6} .guest-buttons{display:flex;gap:12px;justify-content:center;margin-top:28px} .guest-buttons .btn{padding:12px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background var(--transition-fast),transform var(--transition-fast)} .guest-buttons .btn-primary{background:var(--brand);color:#fff} .guest-buttons .btn-primary:hover{background:var(--brand-hover);transform:translateY(-1px)} .guest-buttons .btn-secondary{background:var(--panel);color:var(--text);border:1px solid var(--line)} .guest-buttons .btn-secondary:hover{border-color:var(--brand);color:var(--brand)} .guest-rules{margin-top:24px;padding:20px 24px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);text-align:left;box-shadow:var(--shadow-sm)} .guest-rules-title{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px} .guest-rules-title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--brand);border-radius:2px} .guest-rules-list{margin:0;padding:0;list-style:none;display:grid;gap:8px} .guest-rules-list li{font-size:13px;color:var(--muted);line-height:1.6;padding-left:18px;position:relative} .guest-rules-list li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--brand)} .guest-icp{position:absolute;bottom:20px;left:0;right:0;text-align:center} .guest-icp a{font-size:12px;color:var(--muted2);text-decoration:none;transition:color var(--transition-fast)} .guest-icp a:hover{color:var(--brand)} .guest-preview{width:100%;max-width:680px;margin-top:8px} .guest-forums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px} .guest-forum-card{padding:16px 14px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);text-align:center;text-decoration:none;transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)} .guest-forum-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)} .guest-forum-name{font-size:15px;font-weight:600;color:var(--text)} .guest-forum-desc{font-size:12px;color:var(--muted2);margin-top:4px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .guest-topics{padding:20px 24px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm)} .guest-topics-title{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px} .guest-topics-title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--brand);border-radius:2px} .guest-topic-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);text-decoration:none} .guest-topic-item:last-child{border-bottom:0} .guest-topic-title{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0} .guest-topic-item:hover .guest-topic-title{color:var(--brand)} .guest-topic-meta{font-size:12px;color:var(--muted2);white-space:nowrap;flex-shrink:0} .guest-forum-head{text-align:center;margin-bottom:20px} .guest-forum-head-title{font-size:24px;font-weight:700;margin:0 0 8px;letter-spacing:-0.02em} .guest-forum-head-desc{font-size:14px;color:var(--muted);margin:0} .guest-login-tip{text-align:center;padding:24px;margin-top:8px} .guest-login-tip p{font-size:14px;color:var(--muted);margin:0 0 12px} .guest-login-tip .btn{display:inline-block;padding:10px 28px} /* ---------- Points ---------- */ .recharge-packages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0} .package-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 16px;border:1px solid var(--line-soft);border-radius:var(--radius);text-align:center;cursor:pointer;text-decoration:none;transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);background:var(--panel)} .package-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)} .package-amount{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-0.02em} .package-points{font-size:14px;color:var(--muted)} .package-bonus{font-size:12px;color:var(--brand);font-weight:600} .package-total{font-size:13px;color:var(--text);font-weight:600;margin-top:4px;padding-top:6px;border-top:1px solid var(--line-soft);width:100%} .pay-methods h3{margin:16px 0 10px;font-size:14px} .pay-btn{padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);font-size:14px;font-weight:600;cursor:pointer;color:var(--text);transition:border-color var(--transition-fast),color var(--transition-fast)} .pay-btn:hover{border-color:var(--brand);color:var(--brand)} .pay-btn.wechat:hover{border-color:#07c160;color:#07c160} .pay-btn.alipay:hover{border-color:#1677ff;color:#1677ff} .points-overview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 20px} .points-item{padding:18px;background:var(--line-soft);border-radius:var(--radius);text-align:center} .points-item .points-label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px} .points-item .points-value{font-size:28px;font-weight:700;color:var(--brand);letter-spacing:-0.02em} .data-table{width:100%;border-collapse:collapse;font-size:13px} .data-table th,.data-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);text-align:left} .data-table th{background:var(--bg);font-weight:600;font-size:12px;color:var(--muted)} .data-table tr:hover td{background:var(--bg)} .data-table .empty{text-align:center;color:var(--muted);padding:20px 0} .inline-form{display:inline} .admin-media-thumb{width:48px;height:48px;object-fit:cover;border-radius:4px} .points-plus{color:var(--brand);font-weight:600} .points-minus{color:#e74c3c;font-weight:600} .pay-status{font-weight:600;padding:2px 10px;border-radius:999px;font-size:13px} .pay-status.paid{background:var(--brand-soft);color:var(--brand)} .pay-status.unpaid{background:var(--line-soft);color:var(--muted)} .pay-qr-box{text-align:center;margin:20px 0;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)} .pay-qr-box h3{margin:0 0 16px;font-size:16px} .pay-qr-img{display:inline-block;padding:12px;background:#fff;border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(0,0,0,.08)} .pay-qr-img img{display:block;width:240px;height:240px} .pay-qr-tip{margin:14px 0 0;font-size:13px;color:var(--muted)} .note{padding:14px 16px;border-radius:var(--radius-sm);background:var(--line-soft);font-size:14px;color:var(--muted);margin:12px 0;line-height:1.6} .note.ok{background:var(--brand-soft);color:var(--brand)} .note .btn{display:inline-flex;margin-top:10px;padding:7px 18px;border:0;border-radius:var(--radius-sm);background:var(--brand);color:#fff;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer} .note .btn:hover{background:var(--brand-hover)} /* ---------- Private messages ---------- */ .pm-card .pm-wrap{padding:12px 16px} .pm-entry-link{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--text);font-size:14px;font-weight:500;transition:background var(--transition-fast),color var(--transition-fast)} .pm-entry-link:hover{background:var(--brand-soft);color:var(--brand)} .pm-entry-link .badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:1} .pm-thread-list{list-style:none;margin:0;padding:0} .pm-thread-item{border-bottom:1px solid var(--line-soft)} .pm-thread-item:last-child{border-bottom:0} .pm-thread-item a{display:block;padding:12px 0;color:inherit;transition:background var(--transition-fast)} .pm-thread-item a:hover{background:var(--bg)} .pm-thread-user{font-weight:600;font-size:14px;margin-bottom:2px} .pm-thread-preview{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pm-thread-time{font-size:12px;color:var(--muted2);margin-top:2px} .pm-messages{max-height:480px;overflow-y:auto;padding:12px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--bg)} .pm-msg{margin-bottom:12px;display:flex;flex-direction:column;align-items:flex-start} .pm-msg.mine{align-items:flex-end} .pm-msg-body{max-width:75%;padding:9px 14px;border-radius:18px;background:var(--panel);border:1px solid var(--line-soft);font-size:13.5px;line-height:1.5;word-break:break-word;white-space:pre-wrap} .pm-msg.mine .pm-msg-body{background:var(--brand);color:#fff;border-color:var(--brand)} .pm-msg-time{font-size:11px;color:var(--muted2);margin-top:4px} .pm-send-form{margin-top:16px} .pm-send-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font:inherit;resize:vertical;background:var(--panel);color:var(--text)} .pm-send-form textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)} .pm-send-form button{margin-left:auto;padding:8px 20px;border:0;border-radius:var(--radius-sm);background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:background var(--transition-fast)} .pm-send-form button:hover{background:var(--brand-hover)} .pm-paywall{margin:0 0 16px;padding:18px 20px;border:1px solid var(--brand);border-radius:var(--radius);background:var(--brand-soft);text-align:center} .pm-paywall-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px} .pm-paywall-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:10px} .pm-paywall-desc strong{color:var(--brand);font-weight:700} .pm-paywall-balance{font-size:12px;color:var(--muted);margin-bottom:14px} .pm-paywall-balance strong{color:var(--text);font-weight:600} .pm-paywall-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 22px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)} .pm-paywall-btn:hover{background:var(--brand-hover);transform:translateY(-1px)} /* ============================================================ NEW feature classes ============================================================ */ /* ---------- Topic tags ---------- */ .topic-tags{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;margin-left:6px;vertical-align:middle} .topic-tag{display:inline-flex;align-items:center;height:18px;padding:0 8px;border:0;border-radius:999px;background:var(--line-soft);color:var(--muted);font-size:10.5px;font-weight:600;line-height:1;white-space:nowrap;transition:color var(--transition-fast),background var(--transition-fast)} .topic-tag:hover{background:var(--brand-soft);color:var(--brand)} .post-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .topic-tags-wrap{list-style:none;padding:0 18px;margin-top:-4px} .topic-tags-wrap .topic-tags{margin-left:0;margin-top:6px} .tag-chips{display:flex;flex-wrap:wrap;gap:4px} .tag-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 10px;border:0;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;animation:tagPop .18s ease} .tag-chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;border-radius:50%;background:rgba(0,0,0,0.08);color:inherit;font-size:14px;line-height:1;cursor:pointer;transition:background var(--transition-fast)} .tag-chip-remove:hover{background:rgba(0,0,0,0.18)} [data-theme="dark"] .tag-chip-remove,[data-theme="auto"] .tag-chip-remove{background:rgba(255,255,255,0.12)} [data-theme="dark"] .tag-chip-remove:hover,[data-theme="auto"] .tag-chip-remove:hover{background:rgba(255,255,255,0.22)} @media (prefers-color-scheme: dark){[data-theme="auto"] .tag-chip-remove{background:rgba(255,255,255,0.12)}[data-theme="auto"] .tag-chip-remove:hover{background:rgba(255,255,255,0.22)}} .tag-preset-wrap{display:flex;flex-direction:column;gap:8px} .tag-preset-options{display:flex;flex-wrap:wrap;gap:6px} .tag-preset-option{display:inline-flex;align-items:center;padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:13px;cursor:pointer;transition:all var(--transition-fast)} .tag-preset-option:hover:not(:disabled){border-color:var(--brand);color:var(--brand)} .tag-preset-option.selected{background:var(--brand);border-color:var(--brand);color:#fff} .tag-preset-option:disabled{opacity:0.4;cursor:not-allowed} .tag-preset-hint{font-size:12px;color:var(--muted2);margin:0} .tag-preset-empty{font-size:13px;color:var(--muted2);margin:0} @keyframes tagPop{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}} /* ---------- User online status ---------- */ .online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted2);flex-shrink:0} .online-dot.online{background:var(--success);box-shadow:0 0 0 2px rgba(52,199,89,0.2)} .online-dot.offline{background:var(--muted2)} /* ---------- Polls ---------- */ .poll-container{margin:14px 0;padding:16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel)} .poll-question{margin:0 0 12px;font-size:14.5px;font-weight:600;color:var(--text)} .poll-options{display:grid;gap:8px} .poll-option{display:grid;gap:5px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)} .poll-option:hover{border-color:var(--brand);background:var(--brand-soft)} .poll-option.voted{border-color:var(--brand);background:var(--brand-soft)} .poll-bar{position:relative;height:8px;border-radius:999px;background:var(--line-soft);overflow:hidden} .poll-bar-fill{height:100%;border-radius:999px;background:var(--brand);transition:width var(--transition)} .poll-stats{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:var(--muted);font-size:11.5px} .poll-vote-btn{margin-top:12px;padding:8px 18px;border:0;border-radius:var(--radius-sm);background:var(--brand);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--transition-fast)} .poll-vote-btn:hover{background:var(--brand-hover)} .poll-create-form{display:grid;gap:10px} .poll-create-header{margin-bottom:2px} .poll-options-builder{display:grid;gap:8px} .poll-option-row{display:flex;align-items:center;gap:8px} .poll-option-row input{flex:1} .poll-option-remove{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)} .poll-option-remove:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)} .poll-option-add{justify-self:start;padding:6px 16px;border:1px dashed var(--line);border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:12.5px;font-weight:500;cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast)} .poll-option-add:hover{border-color:var(--brand);color:var(--brand)} /* ---------- Editor toolbar ---------- */ .editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-bottom:6px;padding:6px 8px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--bg2)} .editor-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:0 2px} .char-count{color:var(--muted2);font-size:11.5px;font-variant-numeric:tabular-nums} textarea[data-editor]{border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid var(--line)} textarea[data-editor]:focus{border-top-color:var(--brand)} /* ---------- Post Editor (朋友圈风格) ---------- */ .post-editor-panel{padding:0;overflow:hidden} .post-editor-panel form{gap:0} .post-editor-panel form>.grid{padding:14px 18px 0} .post-editor-body{padding:0 18px;background:var(--panel)} .post-editor-body textarea{width:100%;min-height:240px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:16px;font-size:16px;line-height:1.75;resize:vertical;background:var(--panel);color:var(--text);transition:border-color var(--transition-fast)} .post-editor-body textarea:focus{outline:none;border-color:var(--brand);border-bottom-color:var(--brand)} .post-editor-body textarea::placeholder{color:var(--muted2)} .post-editor-body .editor-toolbar{margin:0 0 6px;border:1px solid var(--line);border-top:0;border-bottom:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--bg2)} .post-editor-body .editor-footer{display:flex;justify-content:space-between;align-items:center;padding:6px 2px 12px} .editor-preview-toggle{border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px 12px;font-size:13px;color:var(--muted);background:var(--panel);cursor:pointer;transition:all var(--transition-fast)} .editor-preview-toggle:hover{border-color:var(--brand);color:var(--brand)} .editor-preview{min-height:240px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;font-size:15px;line-height:1.75;overflow-y:auto;max-height:500px;background:var(--panel)} .editor-preview img{max-width:100%;border-radius:var(--radius-sm);margin:8px 0} .editor-preview video{max-width:100%;border-radius:var(--radius-sm);margin:8px 0} .editor-preview p{margin:8px 0} .editor-preview .preview-empty{color:var(--muted2);text-align:center} .post-editor-panel .media-uploader{margin:0;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;padding:12px 18px;background:var(--panel)} .post-editor-panel .media-grid{margin-top:0} .post-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-soft);background:var(--bg2)} .post-tab{flex:1;padding:11px 0;border:0;background:transparent;color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast);border-bottom:2px solid transparent} .post-tab:hover{color:var(--text);background:var(--line-soft)} .post-tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600} .post-panel{padding:14px 18px;background:var(--panel)} .post-panel[hidden]{display:none} .post-panel .grid{margin:0 0 12px} .post-panel .grid:last-child{margin-bottom:0} .post-advanced{border-top:1px solid var(--line-soft)} .post-advanced>summary{padding:0;height:0;overflow:hidden;visibility:hidden;list-style:none} .post-advanced>summary::-webkit-details-marker{display:none} .post-advanced-body{padding:0 18px 14px} .post-advanced-body .grid{margin:0 0 10px} .post-advanced-body .grid:last-child{margin-bottom:0} .post-submit{padding:16px 18px;border-top:1px solid var(--line-soft);background:var(--panel)} .post-submit .btn-primary-lg{width:100%} .post-paid-section{border-top:1px solid var(--line-soft);background:var(--panel)} .post-paid-section>summary{padding:11px 18px;font-size:13px;color:var(--muted);cursor:pointer;transition:background var(--transition-fast);list-style:none;user-select:none} .post-paid-section>summary::-webkit-details-marker{display:none} .post-paid-section>summary::before{content:"🔒 ";font-size:11px} .post-paid-section[open]>summary::before{content:"🔓 "} .post-paid-section[open]>summary{color:var(--brand)} .post-paid-section>summary:hover{background:var(--line-soft)} .post-paid-body{padding:0 18px 14px} .post-paid-body .grid{margin:0 0 10px} .post-paid-body textarea{min-height:90px} .post-paid-tip{font-size:12px;color:var(--muted2);margin:4px 0 0} /* ---------- Form actions ---------- */ .btn-primary-lg{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 32px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)} .btn-primary-lg:hover{background:var(--brand-hover);box-shadow:var(--shadow-md)} .btn-primary-lg:active{transform:scale(0.98)} /* ---------- Like button ---------- */ @keyframes likePop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}} /* ---------- Badges / levels ---------- */ .user-badges{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px} .user-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border:0;border-radius:999px;font-size:10px;font-weight:700;line-height:1;background:var(--line-soft);color:var(--muted)} .user-level{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11.5px} .level-progress{flex:1;min-width:60px;max-width:120px} .level-bar{height:5px;border-radius:999px;background:var(--line-soft);overflow:hidden} .level-bar>span{display:block;height:100%;border-radius:inherit;background:var(--brand)} /* ---------- Check-in ---------- */ .checkin-card{padding:16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm)} .checkin-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 20px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--transition-fast)} .checkin-btn:hover{background:var(--brand-hover)} .checkin-btn.checked{background:var(--line-soft);color:var(--muted);cursor:default} .checkin-tip{margin-top:8px} .checkin-record-title{margin-top:16px} .checkin-streak{margin-top:10px;color:var(--muted);font-size:12px} .checkin-streak strong{color:var(--brand);font-weight:700} .checkin-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px} .checkin-calendar .day{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);background:var(--line-soft);color:var(--muted2);font-size:11px} .checkin-calendar .day.checked{background:var(--brand);color:#fff;font-weight:600} /* ---------- Quote reply enhanced ---------- */ /* ---------- Vote / like ---------- */ .vote-btn{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)} .vote-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)} .vote-btn.voted{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .vote-count{font-variant-numeric:tabular-nums} /* ---------- Misc supporting styles ---------- */ .mobile-forum-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:24px;color:var(--muted);font-size:13px;line-height:1} .mobile-forum-link.active{color:var(--text);font-weight:700} .is-hidden{display:none!important} .pagination-bar{display:flex;align-items:center;justify-content:center;padding:12px 0;gap:4px} .pagination-bar .pagination{margin:0} .profile-disclosure-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 16px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:13px;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)} .profile-disclosure-summary:hover{border-color:var(--line);background:var(--line-soft)} .profile-disclosure-summary strong{color:var(--text)} .profile-disclosure-detail{display:grid;gap:12px;margin-top:12px} .profile-disclosure-detail .grid{grid-template-columns:92px minmax(0,1fr);gap:12px} .avatar-picker-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center} .avatar-picker-preview{width:72px;height:72px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--bg);padding:6px} .avatar-picker-preview .avatar-img{border-radius:calc(var(--radius) - 2px)} .avatar-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;width:100%;overflow:visible} .avatar-option{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;aspect-ratio:1/1;padding:4px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);cursor:pointer;line-height:0;overflow:hidden;transition:border-color var(--transition-fast),background var(--transition-fast)} .avatar-option:hover,.avatar-option.active{border-color:var(--brand);background:var(--brand-soft)} .avatar-option .avatar-img{border-radius:3px} .user-header .avatar-img{border-radius:50%} .profile-bottom-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)} .profile-bottom-actions .btn-primary-lg{width:auto;min-width:140px;flex-shrink:0} .profile-bottom-actions .post-action-form{flex-shrink:0} .profile-exit-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 28px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:14.5px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)} .profile-exit-button:hover{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)} .profile-exit-button:active{transform:scale(0.98)} @media(max-width:480px){.profile-bottom-actions{flex-direction:column}.profile-bottom-actions .btn-primary-lg,.profile-bottom-actions .profile-exit-button{width:100%;max-width:none}} .auth-extra{margin:8px 0 0;color:var(--muted);font-size:12px;text-align:left} .auth-extra a{color:var(--brand)} .auth-extra a:hover{color:var(--brand-hover)} .oauth-login{margin-top:20px} .oauth-divider{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--muted);font-size:12px} .oauth-divider::before,.oauth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)} .oauth-buttons{display:flex;gap:10px} .oauth-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--card);color:var(--text);font-size:13px;font-weight:500;transition:all var(--transition-fast);cursor:pointer} .oauth-btn:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .oauth-btn::before{content:"";width:18px;height:18px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0} .oauth-qq::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2312B7F5' d='M12 2c-3.3 0-6 2.7-6 6 0 1.2.4 2.4 1 3.3-.3.6-.8 1.5-1.3 2.3-.5.8-1 1.6-1 2.2 0 .8.5 1.4 1.3 1.7.2.1.4.1.6.1.4 0 .8-.2 1.2-.5.2.4.5.8.9 1.1-.4.3-.7.7-.7 1.2 0 .8.7 1.4 1.5 1.4h5.6c.8 0 1.5-.6 1.5-1.4 0-.5-.3-.9-.7-1.2.4-.3.7-.7.9-1.1.4.3.8.5 1.2.5.2 0 .4 0 .6-.1.8-.3 1.3-.9 1.3-1.7 0-.6-.5-1.4-1-2.2-.5-.8-1-1.7-1.3-2.3.6-.9 1-2.1 1-3.3 0-3.3-2.7-6-6-6z'/%3E%3C/svg%3E")} .oauth-wechat::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2307C160' d='M9 4C5.1 4 2 6.6 2 9.8c0 1.8 1 3.4 2.6 4.5L4 16.5l2.5-1.3c.8.2 1.6.4 2.5.4h.5c-.1-.4-.2-.9-.2-1.3 0-3 2.9-5.4 6.5-5.4h.5C16 6 12.8 4 9 4zm-2.5 4.3c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm5 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM16 10c-3 0-5.5 2-5.5 4.5S13 19 16 19c.7 0 1.4-.1 2-.3l2 1-.5-1.6c1.2-.8 2-2 2-3.6 0-2.5-2.5-4.5-5.5-4.5zm-2 2.3c.4 0 .8.3.8.8s-.4.8-.8.8-.8-.3-.8-.8.4-.8.8-.8zm4 0c.4 0 .8.3.8.8s-.4.8-.8.8-.8-.3-.8-.8.4-.8.8-.8z'/%3E%3C/svg%3E")} .auth-panel h2{margin-bottom:18px;font-size:20px;font-weight:600;text-align:center;letter-spacing:-0.01em} .auth-panel form button{width:100%;margin-top:6px} .auth-center{display:flex;justify-content:center;align-items:flex-start;padding:20px 16px;min-height:calc(100vh - 200px)} .auth-center-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px} .auth-logo{text-align:center;margin-bottom:24px} .auth-logo-text{font-size:24px;font-weight:700;color:var(--brand);letter-spacing:-0.01em} .auth-tabs-pill{display:flex;gap:0;margin-bottom:24px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line-soft)} .auth-pill{flex:1;text-align:center;padding:10px 0;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:all var(--transition-fast);border-right:1px solid var(--line-soft)} .auth-pill:last-child{border-right:0} .auth-pill:hover{color:var(--text);background:var(--line-soft)} .auth-pill.active{background:var(--brand);color:#fff} .auth-form{display:grid;gap:4px} .auth-form .grid{grid-template-columns:1fr;gap:5px;margin:0 0 10px} .auth-form .grid>span{padding-top:0;font-size:13px} .auth-form .grid input{font-size:14px} .auth-submit{width:100%;margin-top:8px;padding:12px;border:0;border-radius:var(--radius-md);background:var(--brand);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background var(--transition-fast)} .auth-submit:hover{background:var(--brand-hover)} .auth-forgot{text-align:center;margin:16px 0 0;font-size:13px} .auth-forgot a{color:var(--brand);text-decoration:none} .auth-forgot a:hover{text-decoration:underline} .auth-success-msg{text-align:center;color:var(--brand);font-size:14px;line-height:1.6;margin:8px 0} .auth-center .oauth-login{margin-top:24px} .auth-center .oauth-buttons{gap:8px} .auth-center .oauth-btn{padding:11px 12px;font-size:13px} .points-page{display:grid;gap:16px;padding:16px} .points-hero{display:flex;justify-content:center} .points-hero-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:30px 20px;background:linear-gradient(135deg,var(--brand-400) 0%,var(--brand-600) 100%);border-radius:var(--radius);box-shadow:var(--shadow-md)} .points-hero-label{font-size:13px;color:rgba(255,255,255,0.85)} .points-hero-value{font-size:42px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-0.02em} .points-hero-sub{font-size:12px;color:rgba(255,255,255,0.7)} .points-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .points-action-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);text-decoration:none;color:var(--text);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)} .points-action-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)} .points-action-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:16px;font-weight:700} .points-action-text{font-size:13px;font-weight:500} .points-log-section{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)} .points-log-section h3{margin:0 0 12px;font-size:15px} .points-log-list{display:grid;gap:2px} .points-log-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)} .points-log-item:last-child{border-bottom:0} .points-log-info{display:grid;gap:2px;min-width:0} .points-log-desc{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .points-log-meta{font-size:11px;color:var(--muted2)} .points-log-change{font-size:15px;font-weight:600;flex-shrink:0} .points-log-item.plus .points-log-change{color:var(--brand)} .points-log-item.minus .points-log-change{color:var(--danger)} .profile-edit-action{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)} .profile-edit-action:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .profile-edit-action:active{transform:scale(0.96)} /* 标签选择器（Apple 风格胶囊设计） */ .tag-select-field{display:flex;flex-direction:column;gap:8px} .tag-select-options,.tag-multi-options{display:flex;flex-wrap:wrap;gap:8px} .tag-opt{display:inline-flex;align-items:center;padding:6px 16px;border:1.5px solid var(--line-soft);border-radius:999px;cursor:pointer;font-size:13px;color:var(--muted);transition:all var(--transition-fast);user-select:none;background:var(--panel)} .tag-opt:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)} .tag-opt.selected{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;box-shadow:var(--shadow-sm)} .tag-opt.tag-add{border-style:dashed;color:var(--muted);font-size:15px;padding:5px 14px} .tag-opt.tag-add:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)} /* 字数统计 */ .char-count{font-weight:400;font-size:11px;color:var(--line);float:right} .char-count-warn{color:var(--danger)} /* 偏好标签展示 */ .up-pref-chip{display:inline-block;padding:4px 12px;font-size:12px;border:1px solid var(--brand);border-radius:999px;color:var(--brand);background:var(--brand-soft);font-weight:500} .up-contact-item{margin-top:4px;padding:6px 10px;background:var(--bg-soft);border-radius:var(--radius-sm);font-size:13px} .profile-form{padding:0;overflow:hidden} .profile-form-head{display:flex;align-items:baseline;gap:12px;padding:28px 28px 20px;border-bottom:1px solid var(--line-soft)} .profile-form-head h2{margin:0;font-size:21px;font-weight:700;color:var(--text);letter-spacing:-0.02em} .profile-form-hint{color:var(--muted);font-size:12.5px} .profile-form form{padding:24px 28px;gap:0} .profile-form .grid{margin:0;padding:12px 0;border-bottom:1px solid var(--line-soft)} .profile-form .grid:last-child{border-bottom:0} .profile-form .profile-disclosure{border-bottom:1px solid var(--line-soft);padding:12px 0} .profile-form .grid>span{color:var(--muted);font-size:12.5px;font-weight:500} .profile-form .grid>span small{display:block;margin-top:2px;color:var(--muted2);font-size:11px;font-weight:400;line-height:1.4} .profile-form input,.profile-form select,.profile-form textarea{background:var(--bg);border-color:transparent} .profile-form input:hover,.profile-form select:hover,.profile-form textarea:hover{border-color:var(--line-soft)} .profile-form input:focus,.profile-form select:focus,.profile-form textarea:focus{background:var(--panel);border-color:var(--brand)} .profile-form-actions{padding-top:20px;margin-top:8px;border-top:1px solid var(--line-soft)} .profile-form-actions .btn-primary-lg{width:100%;max-width:200px} .profile-section{margin:20px 0 0;padding:24px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast)} .profile-section:hover{box-shadow:var(--shadow)} .profile-section h3{margin:0 0 18px;font-size:15px;font-weight:600;color:var(--text);padding-bottom:14px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px;letter-spacing:-0.01em} .profile-section h3::before{content:'';display:inline-block;width:3px;height:15px;border-radius:2px;background:var(--brand);flex-shrink:0} .profile-attr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .profile-attr-grid .grid{margin:0;padding:0;border-bottom:0} .profile-attr-grid .grid>span{padding-top:0;margin-bottom:2px} .reply-edit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .reply-edit-head h2{margin:0} .reply-edit-ops{display:inline-flex;align-items:center;gap:10px} .reply-mute-link,.reply-delete-link{display:inline-flex;align-items:center;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;font-size:12px;font-weight:400;line-height:1.4;white-space:nowrap} .reply-mute-link{color:var(--muted)} .reply-mute-link:hover{background:transparent!important;color:var(--brand)} .reply-delete-link{color:var(--danger)} .reply-delete-link:hover{background:transparent!important;color:var(--danger);filter:brightness(0.9)} .plugin-entry-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .plugin-entry-line{grid-column:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .plugin-entry-label{color:var(--muted2);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap} .plugin-entry-form{display:inline-flex} .plugin-entry-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer} .plugin-entry-check input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer} /* note 警告变体 */ .note.warn{background:var(--danger-soft);color:var(--danger)} /* sidebar 列表 */ .sidebar-list{list-style:none;margin:0;padding:0;display:grid;gap:2px} .sidebar-list li{font-size:13px;color:var(--muted);line-height:1.6;padding-left:16px;position:relative} .sidebar-list li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:0.6} .sidebar-list a{color:var(--text);text-decoration:none;transition:color var(--transition-fast)} .sidebar-list a:hover{color:var(--brand)} /* PM 对话头部 */ .pm-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)} .pm-header h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-0.01em} .pm-back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:14px;text-decoration:none;transition:color var(--transition-fast);flex-shrink:0} .pm-back:hover{color:var(--brand)} /* 邮件预览 */ .mail-preview{margin:12px 0;padding:16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--bg);font-size:13px} .mail-preview>div{display:flex;gap:8px;margin-bottom:6px} .mail-preview span{color:var(--muted);min-width:48px;flex-shrink:0} .mail-preview strong{color:var(--text);font-weight:600} .mail-preview pre{margin:8px 0 0;padding:12px;background:var(--panel);border-radius:var(--radius-sm);white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.6;color:var(--text)} /* 版块权限勾选组 */ .forum-group-checks{display:flex;flex-wrap:wrap;gap:8px} .forum-group-checks .check{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line-soft);border-radius:999px;font-size:13px;color:var(--muted);cursor:pointer;transition:all var(--transition-fast)} .forum-group-checks .check:hover{border-color:var(--brand);color:var(--brand)} .forum-group-checks .check input{accent-color:var(--brand)} /* 邀请码商店 */ .invite-shop{margin:12px 0} .invite-shop .data-table th{text-align:center} .invite-shop .data-table td{text-align:center} /* 头像镜像 */ .avatar-mirror-box{padding:14px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel)} .avatar-mirror-status{font-size:12px;color:var(--muted);min-height:18px} /* 确认对话框增强 */ .confirm-box{display:grid;gap:14px} .confirm-message{margin:0;font-size:14.5px;line-height:1.6;color:var(--text)} .confirm-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer} .confirm-check input{accent-color:var(--brand)} .confirm-actions{display:flex;justify-content:flex-end;gap:8px} .confirm-actions button{min-height:34px;padding:0 18px;border:0;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;cursor:pointer;transition:background var(--transition-fast)} .confirm-actions .btn.alt{background:var(--line-soft);color:var(--text)} .confirm-actions .btn.alt:hover{background:var(--line)} .confirm-actions .danger{background:var(--danger);color:#fff} .confirm-actions .danger:hover{background:var(--danger);filter:brightness(0.9)} .prompt-box{max-width:380px} .prompt-input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:15px;background:var(--panel);color:var(--text)} .prompt-input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)} /* 设置更新提示点 */ .settings-update-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);margin-left:6px;vertical-align:middle;animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.85)}} /* 标签弹入动画 */ @keyframes tagPop{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}} /* 搜索高亮 */ mark{background:var(--brand-soft);color:var(--brand);padding:0 2px;border-radius:2px} /* 滚动条美化 */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:var(--line)} [data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15)} [data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)} /* 选中文本 */ ::selection{background:var(--brand-soft);color:var(--brand)} /* 响应式微调 */ @media(max-width:768px){ .guest-forums{grid-template-columns:repeat(2,1fr)} .points-actions{grid-template-columns:1fr} .points-hero-card{padding:24px 16px} .points-hero-value{font-size:36px} .profile-attr-grid{grid-template-columns:1fr} /* 顶部导航移动端：两行布局 */ .bar{flex-wrap:wrap;height:auto;padding:6px 12px;gap:6px} .brand{font-size:15px} .brand:before{width:24px;height:24px;flex:0 0 24px} .forum-nav{order:99;width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;gap:2px;padding-bottom:2px;scrollbar-width:none} .forum-nav::-webkit-scrollbar{display:none} .forum-link{flex:0 0 auto;max-width:none;padding:0 10px;height:30px;font-size:13px} .forum-more-toggle{display:none} .search-form{flex:1 1 auto;max-width:none;margin-left:auto;height:32px} .search-field{flex:0 0 48px;font-size:11px} .search-input{font-size:13px} .nav-mine{display:none} .nav-icon{width:32px;height:32px} .nav-icon svg{width:17px;height:17px} .theme-toggle{width:32px;height:32px} .theme-toggle svg{width:17px;height:17px} } @media(max-width:480px){ .guest-forums{grid-template-columns:1fr} .guest-title{font-size:32px} .guest-center{padding:32px 16px} .auth-center-card{padding:24px 20px} .profile-form-head{padding:20px 20px 16px} .profile-form form{padding:20px} .profile-section{padding:18px} /* 个人资料表单移动端优化 */ .profile-form input,.profile-form select,.profile-form textarea{width:100%;max-width:100%;box-sizing:border-box} .profile-disclosure-detail .grid{grid-template-columns:1fr} .tag-select-options,.tag-multi-options{gap:6px} } /* 深色模式滚动条 */ [data-theme="dark"]{color-scheme:dark} [data-theme="auto"]{color-scheme:light dark} /* 焦点可见性 */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* 用户卡片补充 */ .user-signature{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .user-points-link{color:var(--brand);font-weight:600;text-decoration:none;transition:color var(--transition-fast)} .user-points-link:hover{color:var(--brand-hover);text-decoration:underline} .user-invite-link{color:var(--muted);font-size:12px;text-decoration:none;transition:color var(--transition-fast)} .user-invite-link:hover{color:var(--brand)} .user-card-extra{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:12px} .user-card-extra a{color:var(--muted);text-decoration:none;transition:color var(--transition-fast)} .user-card-extra a:hover{color:var(--brand)} /* SVG 图标 */ .svg-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* 表单错误面板 */ .form-error-panel{max-width:520px;margin:0 auto;padding:32px 28px;text-align:center} .form-error-panel h2{margin:0 0 12px;font-size:20px;font-weight:700;color:var(--text)} .form-error-panel p{margin:0;color:var(--muted);font-size:14px;line-height:1.6} /* 邀请码页 */ .invite-tip{margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--brand);font-size:13px;line-height:1.6} .invite-balance{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel);font-size:14px;color:var(--muted)} .invite-balance strong{color:var(--brand);font-weight:700;font-size:18px} /* 支付方式容器 */ .pay-methods{display:grid;gap:10px;margin:12px 0} /* AJAX 回复表单 */ .ajax-reply-form{margin:8px 0;padding:14px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--panel)} /* 减少动画偏好 */ @media(prefers-reduced-motion:reduce){ *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important} }