/* 江湖帖 · 首页与登录页 */

/* ========== HOME PAGE - Enhanced ========== */
.home-scroll{padding-bottom:80px}

/* Daily Banner - Compact */
.daily-banner{background:linear-gradient(135deg,#3a3020,#2c2418);margin:6px 16px 0;border-radius:12px;padding:8px 12px;position:relative;overflow:hidden}
.daily-banner::before{content:"";position:absolute;top:-16px;right:-16px;width:60px;height:60px;background:radial-gradient(circle,rgba(200,169,81,.15),transparent);border-radius:50%}
.daily-banner .banner-title{font-family:var(--serif);font-size:13px;color:var(--gold);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.daily-banner .banner-title .date{font-size:10px;color:rgba(255,255,255,.4);margin-left:auto;font-family:var(--sans)}
.daily-banner .banner-stats{display:flex;gap:0}
.daily-banner .bstat{flex:1;text-align:center;position:relative;transition:transform .15s;padding:2px 0}
.daily-banner .bstat:active{transform:scale(.92)}
.daily-banner .bstat:not(:last-child)::after{content:"";position:absolute;right:0;top:15%;height:70%;width:1px;background:rgba(255,255,255,.1)}
.daily-banner .bstat .num{font-family:var(--serif);font-size:17px;font-weight:700;color:#fff}
.daily-banner .bstat .num.hot{color:var(--gold)}
.daily-banner .bstat .label{font-size:9px;color:rgba(255,255,255,.5);margin-top:1px}

/* Announcement Bar */
.announcement-bar{display:flex;align-items:center;gap:8px;margin:8px 16px 0;padding:8px 12px;background:#fff8e1;border:0.5px solid #ffe082;border-radius:10px;color:#8d6e63;font-size:12px;cursor:pointer;transition:.2s}
.announcement-bar:active{transform:scale(.99)}
.announcement-bar .ann-icon{font-size:14px;flex-shrink:0}
.announcement-bar .ann-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announcement-bar .ann-more{font-size:11px;color:var(--gold-d);flex-shrink:0}
.announcement-bar.unread{background:#fff3e0;border-color:#ffcc80}

/* Section Title - Compact */
.sec-title{display:flex;align-items:center;gap:6px;padding:10px 16px 5px;font-size:13px;font-weight:600;color:var(--ink)}
.sec-title .ico{font-size:15px}
.sec-title .more{margin-left:auto;font-size:12px;color:var(--ink3);font-weight:400;cursor:pointer}

/* Urgent Posts - Horizontal Scroll */
.urgent-scroll{display:flex;gap:10px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.urgent-scroll::-webkit-scrollbar{display:none}
.urgent-card{min-width:200px;background:var(--card);border-radius:12px;padding:14px;box-shadow:var(--shadow);border:1px solid rgba(196,74,58,.15);position:relative;cursor:pointer;transition:transform .15s;flex-shrink:0}
.urgent-card:active{transform:scale(.97)}
.urgent-card .u-badge{position:absolute;top:-6px;right:10px;background:var(--red);color:#fff;font-size:10px;padding:2px 8px;border-radius:8px;font-weight:600;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.urgent-card .u-cat{font-size:10px;padding:2px 6px;border-radius:4px;color:#fff;display:inline-block;margin-bottom:6px}
.urgent-card .u-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.urgent-card .u-reward{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--gold-d)}
.urgent-card .u-reward .unit{font-size:10px;color:var(--ink3);font-weight:400}
.urgent-card .u-meta{font-size:11px;color:var(--ink3);margin-top:4px;display:flex;align-items:center;gap:4px}
.urgent-card .u-meta .av{width:16px;height:16px;border-radius:50%;background:var(--gold-l);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:var(--ink)}

/* Featured Knights */
.knights-row{display:flex;gap:12px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.knights-row::-webkit-scrollbar{display:none}
.knight-card{min-width:100px;text-align:center;cursor:pointer;flex-shrink:0}
.knight-card .k-avatar{width:56px;height:56px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;position:relative;transition:transform .2s}
.knight-card:active .k-avatar{transform:scale(.92)}
.knight-card .k-avatar .rank-crown{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:14px}
.knight-card .k-name{font-size:12px;font-weight:600;color:var(--ink)}
.knight-card .k-sub{font-size:10px;color:var(--ink3);margin-top:1px}

/* Category Card - Icon + Text */
.cat-card{margin:8px 16px 0;background:linear-gradient(180deg,#fff9ed 0%,#fff 100%);border-radius:14px;border:1px solid var(--gold-l);box-shadow:0 2px 10px rgba(200,169,81,.08);overflow:hidden}
.cat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer}
.cat-header-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#6b4c1e}
.cat-header-title .ch-icon{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-d));display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.cat-header-status{font-size:12px;color:var(--ink3);background:#fff;border:1px solid var(--gold-l);padding:3px 10px;border-radius:12px;display:flex;align-items:center;gap:5px}
.cat-header-status .ch-dot{width:6px;height:6px;border-radius:50%}
.cat-header-arrow{font-size:12px;color:var(--gold-d);transition:transform .3s}
.cat-card.expanded .cat-header-arrow{transform:rotate(180deg)}
.cat-tabs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 12px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease,padding .35s ease}
.cat-card.expanded .cat-tabs-grid{max-height:260px;opacity:1;padding-top:2px}
.cat-tab{padding:10px 2px;border-radius:12px;background:#fff;border:1px solid var(--gold-l);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.cat-tab:active{transform:scale(.95)}
.cat-tab .cat-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--bg)}
.cat-tab .cat-name{font-size:11px;font-weight:600;color:var(--ink)}
.cat-tab .cat-sub{font-size:9px;color:var(--ink3)}
.cat-tab.active{color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.cat-tab.active .cat-icon{background:rgba(255,255,255,.25)!important}
.cat-tab.active .cat-name{color:#fff}
.cat-tab.active .cat-sub{color:rgba(255,255,255,.8)}
.cat-tab[data-cat="all"].active{background:var(--ink)}
.cat-tab[data-cat="errand"].active{background:linear-gradient(135deg,#4caf50,#2e7d32)}
.cat-tab[data-cat="pet"].active{background:linear-gradient(135deg,#ef5350,#c62828)}
.cat-tab[data-cat="skill"].active{background:linear-gradient(135deg,#42a5f5,#1565c0)}
.cat-tab[data-cat="accompany"].active{background:linear-gradient(135deg,#ab47bc,#7b1fa2)}
.cat-tab[data-cat="answer"].active{background:linear-gradient(135deg,#ffa726,#ef6c00)}
.cat-tab[data-cat="labor"].active{background:linear-gradient(135deg,#8d6e63,#5d4037)}
.cat-tab[data-cat="all"] .cat-icon{background:#f5f5f0}
.cat-tab[data-cat="errand"] .cat-icon{background:#e8f5e9;color:#2e7d32}
.cat-tab[data-cat="pet"] .cat-icon{background:#ffebee;color:#c62828}
.cat-tab[data-cat="skill"] .cat-icon{background:#e3f2fd;color:#1565c0}
.cat-tab[data-cat="accompany"] .cat-icon{background:#f3e5f5;color:#7b1fa2}
.cat-tab[data-cat="answer"] .cat-icon{background:#fff3e0;color:#ef6c00}
.cat-tab[data-cat="labor"] .cat-icon{background:#efebe9;color:#5d4037}

/* Search - Compact */
.search-bar{padding:6px 16px 4px}
.search-input{width:100%;height:32px;border-radius:16px;border:1px solid var(--border);background:var(--card);color:var(--ink);padding:0 16px 0 34px;font-size:12px;outline:none}
.search-input::placeholder{color:var(--ink3)}
.search-wrap{position:relative}
.search-wrap::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:11px;height:11px;border:2px solid var(--ink3);border-radius:50%}
.search-wrap::after{content:"";position:absolute;left:21px;top:20px;width:5px;height:2px;background:var(--ink3);transform:rotate(45deg)}

/* Filter Card - Icon + Text (cool tone) */
.filter-card{margin:8px 16px 0;background:linear-gradient(180deg,#f0f7ff 0%,#fff 100%);border-radius:14px;border:1px solid #d0e3f7;box-shadow:0 2px 10px rgba(66,165,245,.08);overflow:hidden}
.filter-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer}
.filter-header-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#2c5282}
.filter-header-title .fh-icon{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#64b5f6,#1976d2);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.filter-header-status{font-size:12px;color:#546e7a;background:#fff;border:1px solid #d0e3f7;padding:3px 10px;border-radius:12px}
.filter-header-arrow{font-size:12px;color:#1976d2;transition:transform .3s}
.filter-card.expanded .filter-header-arrow{transform:rotate(180deg)}
.filter-panel{padding:0 14px 12px;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease,padding .35s ease}
.filter-card.expanded .filter-panel{max-height:220px;opacity:1;padding-top:2px}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap}
.filter-item{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:16px;background:#fff;border:1px solid #d0e3f7;font-size:12px;color:#37474f;cursor:pointer;transition:.2s}
.filter-item:active{transform:scale(.95)}
.filter-item.active{background:linear-gradient(135deg,#42a5f5,#1976d2);color:#fff;border-color:transparent}
.filter-item.toggle.active{background:linear-gradient(135deg,#ef5350,#c62828);color:#fff;border-color:transparent}
.filter-item .f-icon{font-size:14px}
.filter-item .f-arrow{font-size:10px;opacity:.6}
.filter-dropdown{margin:8px 0 0;background:var(--card);border-radius:10px;box-shadow:var(--shadow);border:0.5px solid var(--border);overflow:hidden;display:none}
.filter-dropdown.show{display:block;animation:fadeIn .15s}
.diff-dot{color:var(--orange);font-size:10px}
.filter-dropdown{margin:0 16px 8px;background:var(--card);border-radius:10px;box-shadow:var(--shadow);border:0.5px solid var(--border);overflow:hidden;display:none}
.filter-dropdown.show{display:block;animation:fadeIn .15s}
.filter-opt{padding:11px 16px;font-size:13px;color:var(--ink2);cursor:pointer;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.filter-opt:last-child{border-bottom:none}
.filter-opt:active{background:#f9f5ed}
.filter-opt.selected{color:var(--gold-d);font-weight:600}
.filter-opt .check{color:var(--gold);font-size:14px}

/* Post List - Enhanced Cards */
.post-list{padding:8px 16px 0}
.post-card{background:var(--card);border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s;border:0.5px solid var(--border);border-left:3px solid transparent;position:relative}
.post-card:active{transform:scale(.98)}
.post-card.bc-errand{border-left-color:var(--green)}
.post-card.bc-pet{border-left-color:var(--red)}
.post-card.bc-skill{border-left-color:var(--blue)}
.post-card.bc-accompany{border-left-color:var(--purple)}
.post-card.bc-answer{border-left-color:var(--orange)}
.post-card.bc-labor{border-left-color:var(--brown)}
.post-card.bc-other{border-left-color:#8a8a8a}
.post-card .top-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.post-card .cat-badge{font-size:11px;padding:2px 8px;border-radius:4px;color:#fff;font-weight:500;white-space:nowrap}
.cat-errand{background:var(--green)}
.cat-pet{background:var(--red)}
.cat-skill{background:var(--blue)}
.cat-accompany{background:var(--purple)}
.cat-answer{background:var(--orange)}
.cat-labor{background:var(--brown)}
.post-card .urgent-tag{font-size:10px;padding:2px 6px;background:var(--red);color:#fff;border-radius:4px;margin-left:6px;font-weight:600;animation:pulse 1.5s infinite}
.post-card .status-tag{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:500}
.st-open{background:#e8f5e9;color:#2e7d32}
.st-claimed{background:#fff3e0;color:#e65100}
.st-completed{background:#f3e5f5;color:#7b1fa2}
.st-full{background:#e3f2fd;color:#1565c0}
.st-closed{background:#efebe9;color:#5d4037}
.post-card .title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px;line-height:1.4}
.post-card .desc{font-size:12px;color:var(--ink2);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card .bottom-row{display:flex;justify-content:space-between;align-items:center}
.post-card .reward{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--gold-d)}
.post-card .reward .unit{font-size:11px;color:var(--ink3);font-weight:400;margin-left:2px}
/* .post-card .stars 已删（2026-09-21）：卡片不再显示星级（= 难度，重复） */
.post-card .meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3)}
.post-card .meta .avatar-sm{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;cursor:pointer;transition:transform .15s}
.post-card .meta .avatar-sm:active{transform:scale(.85)}
.av-0{background:#c44a3a}.av-1{background:#5d8a3a}.av-2{background:#4a6fa5}.av-3{background:#9c6ab3}.av-4{background:#d4793a}.av-5{background:#7a6c5d}.av-6{background:#c8a951}.av-7{background:#3a8a8a}
.post-card .loc-tag{font-size:10px;color:var(--ink3);display:flex;align-items:center;gap:2px}

/* FAB - hidden, kept for reference */
.fab{display:none}

/* ========== LOGIN PAGE ========== */
#page-login.active{display:flex;flex-direction:column;height:100%;background:linear-gradient(135deg,#2c2418 0%,#3a3020 50%,#1a1410 100%);overflow-y:auto}
.login-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px;position:relative}
.login-wrap::before{content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(200,169,81,.08),transparent 70%);border-radius:50%}
.login-wrap::after{content:"";position:absolute;bottom:-40px;left:-40px;width:140px;height:140px;background:radial-gradient(circle,rgba(196,74,58,.06),transparent 70%);border-radius:50%}
.login-logo{font-family:var(--serif);font-size:48px;color:var(--gold);margin-bottom:8px;text-shadow:0 2px 20px rgba(200,169,81,.3);position:relative;z-index:1}
.login-subtitle{font-family:var(--serif);font-size:14px;color:rgba(255,255,255,.4);margin-bottom:40px;letter-spacing:4px;position:relative;z-index:1}
.login-card{width:100%;background:var(--card);border-radius:16px;padding:28px 24px;box-shadow:0 8px 40px rgba(0,0,0,.3);position:relative;z-index:1}
.login-card .lc-title{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);text-align:center;margin-bottom:6px}
.login-card .lc-desc{font-size:12px;color:var(--ink3);text-align:center;margin-bottom:24px}
.login-card .input-group{margin-bottom:16px}
.login-card .input-group label{display:block;font-size:12px;color:var(--ink3);margin-bottom:6px}
.login-card .input-group input{width:100%;height:44px;border:1px solid var(--border);border-radius:10px;padding:0 14px;font-size:15px;outline:none;font-family:var(--sans);color:var(--ink);background:#fff}
.login-card .input-group input:focus{border-color:var(--gold)}
.login-card .code-row{display:flex;gap:10px}
.login-card .code-row input{flex:1}
.login-card .code-btn{height:44px;padding:0 16px;border:1px solid var(--gold);border-radius:10px;background:#fffbe6;color:var(--gold-d);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.2s}
.login-card .code-btn:active{transform:scale(.95)}
.login-card .code-btn:disabled{opacity:.5;cursor:not-allowed}
.login-agree{display:flex;align-items:flex-start;gap:8px;margin:16px 0;font-size:12px;color:var(--ink3);line-height:1.5}
.login-agree input{margin-top:2px;flex-shrink:0}
.login-agree a{color:var(--gold-d);text-decoration:none}
.login-btn{width:100%;height:48px;border-radius:24px;border:none;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s;font-family:var(--serif)}
.login-btn:active{transform:scale(.97)}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-footer{font-size:11px;color:rgba(255,255,255,.3);text-align:center;margin-top:20px;line-height:1.6;position:relative;z-index:1}

/* ========== LOGIN TABS / SOCIAL (Req 1) ========== */
.lc-tabs{display:flex;gap:0;margin-bottom:20px;background:var(--bg);border-radius:12px;padding:4px}
.lc-tab{flex:1;height:40px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--ink3);border-radius:9px;cursor:pointer;transition:.2s}
.lc-tab.active{background:var(--gold);color:#fff;box-shadow:0 2px 8px rgba(200,169,81,.4)}
.social-divider{display:flex;align-items:center;justify-content:center;margin:18px 0;color:var(--ink3);font-size:11px}
.social-divider::before,.social-divider::after{content:'';flex:1;height:1px;background:var(--border);margin:0 12px}
.social-row{display:flex;gap:10px}
.social-btn{flex:1;height:44px;border-radius:22px;border:1px solid var(--border);background:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s}
.social-btn:active{transform:scale(.97)}
.social-wechat{color:#07c160;border-color:rgba(7,193,96,.35)}
.social-alipay{color:#1677ff;border-color:rgba(22,119,255,.35)}
.social-qq{color:#12b7f5;border-color:rgba(18,183,245,.35)}
.link{color:var(--gold-d);cursor:pointer;text-decoration:none}
.btn-logout{width:100%;height:46px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--ink3);font-size:14px;font-weight:600;cursor:pointer;margin-top:18px}
.btn-logout:active{background:var(--bg)}
.btn-danger{width:100%;height:46px;border-radius:10px;border:1px solid #e74c3c;background:#fff;color:#e74c3c;font-size:14px;font-weight:600;cursor:pointer;margin-top:12px}
.btn-danger:active{background:#e74c3c;color:#fff}

/* Settings list */
.setting-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.setting-item{display:flex;align-items:center;gap:12px;padding:14px 12px;background:var(--bg);border-radius:12px;cursor:pointer;transition:background .15s}
.setting-item:active{background:var(--gold-l)}
.setting-item .si-icon{font-size:18px;width:24px;text-align:center}
.setting-item .si-label{flex:1;font-size:14px;color:var(--ink);font-weight:500}
.setting-item .si-value{font-size:12px;color:var(--ink3);margin-right:4px}
.setting-item .si-arrow{font-size:16px;color:var(--ink3)}
.setting-group{font-size:12px;color:var(--ink3);margin:14px 4px 4px;font-weight:600}
.age-warn{background:#fff4f3;border:1px solid #f3c2bd;border-radius:10px;padding:12px;font-size:12px;color:#c0392b;line-height:1.6;margin-bottom:14px}

/* Announcement list */
.ann-list{display:flex;flex-direction:column;gap:10px}
.ann-item{padding:14px;background:var(--bg);border-radius:12px;border-left:3px solid var(--gold-l)}
.ann-item.unread{background:#fff8e1;border-left-color:var(--gold-d)}
.ann-item .ann-title{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ann-item .ann-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-d);display:none}
.ann-item.unread .ann-dot{display:inline-block}
.ann-item .ann-body{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:8px}
.ann-item .ann-time{font-size:11px;color:var(--ink3)}