:root { --c-bg: #f0dfb8; --c-bg-soft: #ecd6a4; --c-surface: #fff8ec; --c-surface-2: #fdf3d8; --c-border: #e0c48a; --c-border-2: #d4b876; --c-text: #5a3e2b; --c-title: #4a2810; --c-muted: #9a7b3f; --c-accent: #c0392b; --c-accent-2: #e67e22; --c-jade: #2c6e6e; --c-pink: #e91e63; --c-danger: #e53935; --pad-x: 16px; --pad-x: clamp(12px, 3.5vw, 32px); --gap: 12px; --gap: clamp(8px, 2.2vw, 18px); --gap-sm: 8px; --gap-sm: clamp(6px, 1.6vw, 10px); --gap-lg: 18px; --gap-lg: clamp(14px, 3vw, 26px); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --shadow-sm: 0 2px 8px rgba(139, 69, 19, .08); --shadow-md: 0 4px 16px rgba(139, 69, 19, .12); --shadow-accent: 0 3px 10px rgba(192, 57, 43, .4); --fs-xs: 11px; --fs-xs: clamp(11px, 2.8vw, 12px); --fs-sm: 12px; --fs-sm: clamp(12px, 3vw, 13px); --fs-base: 14px; --fs-base: clamp(14px, 3.2vw, 15px); --fs-md: 15px; --fs-md: clamp(15px, 3.6vw, 17px); --fs-lg: 17px; --fs-lg: clamp(17px, 4.2vw, 22px); --fs-xl: 20px; --fs-xl: clamp(20px, 5vw, 28px); --w-page: 1200px; --w-narrow: 680px; --w-form: 480px; --nav-h: 62px;} *, *::before, *::after { box-sizing: border-box;} * { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent;} html, body { overflow-x: hidden; max-width: 100%;} html { -webkit-text-size-adjust: 100%;} body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; background: var(--c-bg); color: var(--c-text); font-size: var(--fs-base); line-height: 1.6; min-height: 100vh; padding-bottom: calc(var(--nav-h) + 16px);} a { color: inherit; text-decoration: none;} img, video { max-width: 100%; height: auto; display: block;} button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit;} .container { width: 100%; max-width: var(--w-page); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x);} .container-narrow { width: 100%; max-width: var(--w-narrow); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x);} .stack { display: flex; flex-direction: column; gap: var(--gap);} .row { display: flex; flex-direction: row; align-items: center; gap: var(--gap-sm); flex-wrap: wrap;} .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm);} .center { text-align: center;} .muted { color: var(--c-muted);} .grow { flex: 1; min-width: 0;} .nowrap { white-space: nowrap;} .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap);} .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--gap);}
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr;}} .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: clamp(6px, 2.1vw, 9px) 12px; background: #f7ecd0; border-bottom: 1px solid #e0cfab;} .topbar-home { position: fixed; top: 0; left: 0; right: 0;} .topbar-home .topbar-title { position: absolute; left: 56px; right: 56px; top: 50%; transform: translateY(-50%); pointer-events: none;} .topbar-title { font-size: clamp(17px, 5vw, 20px); font-weight: 800; color: #5a3a1e; letter-spacing: .06em; text-align: center; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .nav-burger { width: 34px; height: 34px; flex: 0 0 34px; min-width: 34px; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; position: relative; display: block; -webkit-appearance: none; appearance: none;} .nav-burger svg { display: block; width: 34px; height: 34px;} .nav-burger svg rect { fill: #5a3a1e;} .nav-burger span { display: block; height: 3px; background: #5a3a1e; border-radius: 2px;} .nav-search { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; color: #5a3a1e;} .nav-search svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;} .nav-drawer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 70;} .nav-mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(35, 22, 10, .5);} .nav-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 68%; max-width: 280px; background: #fbf3df; border-right: 1px solid #e0cfab; padding: 18px 0 env(safe-area-inset-bottom); overflow: auto; box-shadow: 2px 0 14px rgba(80, 50, 20, .16);} .nav-head { font-size: 18px; font-weight: 800; color: #5a3a1e; padding: 0 18px 14px; border-bottom: 1px solid #e6d7b3; margin-bottom: 10px;} .nav-panel a { display: block; padding: 13px 18px; font-size: 15px; font-weight: 500; color: #5c4326; border-bottom: 1px solid #f0e4c8;} .nav-panel .nav-out { color: #b03a2e;} .icon-btn { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #6b3410; font-size: 22px; cursor: pointer; border-radius: 50%;} .icon-btn:active { background: rgba(139, 69, 19, .08);} .slogan { padding: 12px 10px 8px; padding-left: calc(max(0px, (100vw - var(--w-page)) / 2) + 10px); padding-right: calc(max(0px, (100vw - var(--w-page)) / 2) + 10px); background: #f7ecd0; overflow-wrap: anywhere;} .slogan-text { font-size: 17px; font-weight: 800; color: #d81e5b; letter-spacing: .04em;} .grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; padding: 6px 10px 16px; max-width: var(--w-page); margin: 0 auto;} [hidden] { display: none !important;} .grid > .card { flex: 0 0 48%; margin-bottom: var(--gap);}
@media (min-width: 700px) { .grid > .card { flex: 0 0 31.5%;}}
@media (min-width: 1000px) { .grid > .card { flex: 0 0 23.5%;}}
@media (max-width: 330px) { .grid > .card { flex: 0 0 100%;}} .card { background: linear-gradient(160deg, var(--c-surface-2), #f5e2b3); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;} .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);} .card-cover { position: relative; height: 0; padding-top: 75%; background: #efe3c6; overflow: hidden;} @supports (aspect-ratio: 4 / 3) { .card-cover { height: auto; padding-top: 0; aspect-ratio: 4 / 3;}} .cover-ph { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #f4ead2 0%, #eee0bd 55%, #f4ead2 100%); opacity: 1;} .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001);} .card-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -22px 26px -22px rgba(60, 38, 12, .38);} .tag { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 8px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; color: #fff; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .tag-top, .tag-cat { background: var(--c-jade);} .tag-essence { background: var(--c-accent);} .card-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column;} .card-title { font-size: var(--fs-md); font-weight: 700; color: var(--c-title); line-height: 1.42; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .card-summary { font-size: var(--fs-sm); color: #8a6a4a; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; flex: 1;} .card-meta { display: flex; gap: 12px; font-size: var(--fs-sm); color: #7a5a3a; margin-bottom: 10px; flex-wrap: wrap;} .card-foot { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--c-border-2); padding-top: 8px;} .avatar { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #8b4513, #5a3008); flex-shrink: 0;} .avatar.sm { width: 20px; height: 20px; display: inline-block; vertical-align: middle;} .avatar.lg { width: clamp(48px, 12vw, 64px); height: clamp(48px, 12vw, 64px); background: radial-gradient(circle, var(--c-accent), #8b4513);} .date { font-size: var(--fs-sm); color: #8a6a4a;} .date em { color: var(--c-accent); font-style: normal; margin-left: 4px;} .empty { flex: 1 0 100%; grid-column: 1 / -1; text-align: center; padding: 56px var(--pad-x); color: var(--c-muted); font-size: var(--fs-base);} .empty a { color: var(--c-accent);} .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: space-around; background: linear-gradient(180deg, var(--c-bg), var(--c-bg-soft)); border-top: 1px solid var(--c-border-2); padding: 6px 0 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom));}
@media (min-width: 900px) { .bottomnav { left: 50%; right: auto; transform: translateX(-50%); width: min(100%, 640px); border-radius: 16px 16px 0 0; box-shadow: 0 -2px 14px rgba(139, 69, 19, .12);}} .bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-xs); color: #7a5a3a; flex: 1; min-width: 0;} .bn-item .bn-icon { font-size: 20px; line-height: 1.1;} .bn-item .bn-icon svg { width: 21px; height: 21px; display: block; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;} .bn-item.on .bn-icon svg { stroke-width: 2;} .bn-item.on { color: var(--c-accent); font-weight: 600;} .bn-item span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .bn-pub { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--c-accent-2), var(--c-accent)); color: #fff; font-size: 28px; font-weight: 300; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-accent); margin-top: -20px;} .bottom-space { height: calc(56px + env(safe-area-inset-bottom));} body.site { padding-top: var(--topbar-h, 53px);}
@media (display-mode: standalone), (display-mode: fullscreen) { .topbar { padding-top: calc(clamp(6px, 2.1vw, 9px) + env(safe-area-inset-top));}} .form-wrap { width: 100%; max-width: var(--w-form); margin: var(--gap-lg) auto; padding: var(--gap-lg); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);} .form-title { font-size: var(--fs-lg); color: #8b4513; margin-bottom: var(--gap-sm);} .form-wrap label { display: block; font-size: var(--fs-sm); color: #7a5a3a; margin: 14px 0 6px;} .form-wrap input[type=text], .form-wrap input[type=password], .form-wrap input[type=email], .form-wrap input[type=file], .form-wrap input[type=number], .form-wrap textarea, .form-wrap .sel { width: 100%; padding: 11px 12px; border: 1px solid var(--c-border-2); border-radius: var(--r-sm); font-size: max(16px, var(--fs-base)); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;} .form-wrap textarea { resize: vertical; min-height: 100px; line-height: 1.7;} .form-wrap input:focus, .form-wrap textarea:focus, .form-wrap .sel:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(192, 57, 43, .1);} .form-wrap input.input-bad { border-color: var(--c-danger); background: #fff5f5; box-shadow: 0 0 0 2px rgba(229, 57, 53, .15);} .field-tip { display: none; font-size: var(--fs-xs); color: var(--c-danger); margin-top: 5px;} .math-row { display: flex; align-items: center; gap: 10px;} .math-row input { flex: 1; min-width: 0;} .math-refresh { flex-shrink: 0; font-size: var(--fs-sm); color: var(--c-accent); text-decoration: underline;} .btn { display: inline-block; margin-top: var(--gap-lg); padding: 12px 28px; border: 0; border-radius: var(--r-md); background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color: #fff; font-size: var(--fs-md); font-weight: 600; cursor: pointer; text-align: center; transition: opacity .15s, transform .1s;} .btn:hover { opacity: .93;} .btn:active { transform: scale(.98);} .btn-block { display: block; width: 100%;} .btn-ghost { background: transparent; border: 1px solid var(--c-border-2); color: #8b4513;} .alert { background: #fdecea; border: 1px solid #f5c6cb; color: var(--c-accent); padding: 10px 14px; border-radius: var(--r-sm); margin: 12px 0; font-size: var(--fs-sm); line-height: 1.7;} .form-alt { margin-top: 16px; font-size: var(--fs-sm); color: var(--c-muted);} .form-alt a { color: var(--c-accent);} .panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--gap-lg); box-shadow: var(--shadow-sm);} .panel-title { font-size: var(--fs-md); font-weight: 700; color: #8b4513; margin-bottom: var(--gap-sm);} .thread { width: 100%; max-width: var(--w-narrow); margin: var(--gap) auto 0; padding: var(--gap-lg); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);} .thread-title { font-size: var(--fs-xl); color: var(--c-title); line-height: 1.4; margin-bottom: 10px;} .thread-meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 14px; flex-wrap: wrap;} .thread-content { font-size: var(--fs-md); line-height: 1.9; color: var(--c-text); word-break: break-word;} .thread-imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px;} .thread-imgs.single { grid-template-columns: 1fr;}
@media (min-width: 620px) { .thread-imgs { grid-template-columns: repeat(3, 1fr);} .thread-imgs.single { grid-template-columns: 1fr;}}
@media (min-width: 980px) { .thread-imgs { grid-template-columns: repeat(4, 1fr);} .thread-imgs.single { grid-template-columns: 1fr;}} .thread-imgs a { display: block; border-radius: var(--r-sm); overflow: hidden; border: 1px solid #e8d5a8;} .thread-imgs img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;} .thread-imgs.single img { aspect-ratio: auto; max-height: 70vh; object-fit: contain; background: #f7ecd5;} .thread-attach { margin-top: 14px; padding: 10px 14px; background: #f5e6c8; border-radius: var(--r-sm); font-size: var(--fs-sm); word-break: break-all;} .thread-attach a { color: var(--c-accent); text-decoration: underline;} .posts { width: 100%; max-width: var(--w-narrow); margin: var(--gap-lg) auto 0; padding: 0 var(--pad-x);} .posts-title { font-size: var(--fs-md); color: #8b4513; margin-bottom: 12px;} .post-item { background: #fff; border: 1px solid #e8d5a8; border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px;} .post-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); margin-bottom: 6px; flex-wrap: wrap;} .post-time { color: #b89a6a; font-size: var(--fs-xs);} .post-body { font-size: var(--fs-base); line-height: 1.7; color: var(--c-text); word-break: break-word;} .reply-form { width: 100%; max-width: var(--w-narrow); margin: var(--gap-lg) auto; padding: 0 var(--pad-x);} .reply-form label { display: block; font-size: var(--fs-sm); color: #7a5a3a; margin-bottom: 6px;} .reply-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--c-border-2); border-radius: var(--r-sm); font-size: max(16px, var(--fs-base)); resize: vertical;} .profile { width: 100%; max-width: var(--w-narrow); margin: var(--gap) auto 0; padding: var(--gap-lg); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);} .profile-head { display: flex; align-items: center; gap: 14px;} .profile-info { flex: 1; min-width: 0;} .profile-name { font-size: var(--fs-lg); color: var(--c-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .profile-mail { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .admin-link { display: inline-block; margin-top: 8px; font-size: var(--fs-sm); color: var(--c-accent);} .profile-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;} .action-btn { flex: 1 1 120px; text-align: center; padding: 12px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-base); color: #8b4513; transition: background .15s;} .action-btn:active { background: #f5e6c8;} .my-posts { width: 100%; max-width: var(--w-narrow); margin: 0 auto; padding: var(--gap-lg) var(--pad-x) 20px;} .my-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid #e8d5a8; border-radius: var(--r-sm); margin-bottom: 8px;} .my-title { font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .my-date { font-size: var(--fs-xs); color: var(--c-muted); flex-shrink: 0;} .uc { width: 100%; max-width: var(--w-narrow); margin: var(--gap) auto 0; padding: 0 var(--pad-x);} .uc-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);} .uc-banner { height: clamp(88px, 22vw, 124px); position: relative; background: linear-gradient(135deg, #8b4513 0%, #b8860b 52%, #d9a441 100%);} .uc-game-card .uc-online { position: absolute; right: 10px; top: 12px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 249, 235, .9); border: 1px solid rgba(255, 249, 235, .6); box-shadow: 0 2px 8px rgba(80, 45, 10, .18);} .uc-game-card .uc-online-k { font-size: 9px; font-weight: 700; color: #96703a; letter-spacing: .6px; line-height: 1;} .uc-game-card .uc-online-v { font-size: 14px; font-weight: 800; color: #6b3a0e; line-height: 1.15; white-space: nowrap;}
@media (max-width: 360px) { .uc-game-card .uc-online { right: 8px; top: 10px; padding: 4px 8px;} .uc-game-card .uc-online-v { font-size: 12px;}} .uc-game-card .g-dead { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #fbe9e7; border: 1px solid #e3b3ac; font-size: 11px; font-weight: 700; color: #9c2b1c; display: flex; align-items: center; gap: 6px; line-height: 1.4;} .uc-game-card .g-dead .g-bang { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;} .uc-game-card .g-rev { margin-top: 6px;} .uc-game-card .g-rev-btn { width: 100%; height: 28px; border: 0; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; color: #fff8e6; background: linear-gradient(135deg, #c0392b, #8e2a1c); box-shadow: 0 2px 6px rgba(140, 40, 30, .22);} .uc-game-card .g-rev-alt { display: block; margin-top: 5px; text-align: center; font-size: 10px; font-weight: 700; color: #8a7350; text-decoration: underline; text-underline-offset: 2px;} .uc-game-card .g-rev-box { display: none; margin-top: 6px; padding: 8px; border-radius: 8px; background: #fffdf8; border: 1px solid #e2d3b8;} .uc-game-card .g-rev.open .g-rev-box { display: block;} .uc-game-card .g-rev-q { font-size: 11px; line-height: 1.5; color: #5c4322;} .uc-game-card .g-rev-bal { margin-top: 3px; font-size: 11px; color: #8a7350;} .uc-game-card .g-rev-ok { width: 100%; height: 30px; margin-top: 7px; border: 0; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; color: #fff8e6; background: linear-gradient(135deg, #c08a1e, #8a5a12);} .uc-game-card .g-rev-no { margin-top: 6px; font-size: 11px; line-height: 1.5; color: #9c2b1c;} .uc-game-card .g-rev-no a { color: #8a5a12; font-weight: 700;} .uc-game-card .uc-flash { margin: 0 0 8px; padding: 6px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1.4;} .uc-game-card .uc-flash.ok { background: #eaf3e3; border: 1px solid #b9d3a8; color: #3f6b2a;} .uc-game-card .uc-flash.err { background: #fbe9e7; border: 1px solid #e3b3ac; color: #9c2b1c;} .uc-banner::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,248,232,.10) 0 7px, transparent 7px 16px);} .uc-avatar { width: clamp(72px, 19vw, 88px); height: clamp(72px, 19vw, 88px); margin: -46px auto 0; position: relative; z-index: 2; border-radius: 50%; border: 3px solid var(--c-surface); background: radial-gradient(circle at 32% 28%, #e8b45a, #a05a1c); color: #fff8e6; font-size: clamp(24px, 6.4vw, 30px); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(90, 50, 10, .25);} .uc-name { text-align: center; font-size: var(--fs-lg); color: var(--c-title); font-weight: 700; margin-top: 10px; padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .uc-sub { text-align: center; font-size: var(--fs-sm); color: var(--c-muted); margin-top: 3px; padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .uc-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0 12px;} .uc-badge { font-size: var(--fs-xs); padding: 3px 11px; border-radius: 999px; background: #f5e6c8; color: #8b4513; white-space: nowrap;} .uc-badge.gold { background: linear-gradient(135deg, #d9a441, #b8860b); color: #fff;} .uc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-border); margin-top: 16px;} .uc-stat { padding: 14px 6px; text-align: center; min-width: 0;} .uc-stat + .uc-stat { border-left: 1px solid #f0e0bc;} .uc-stat b { display: block; font-size: clamp(17px, 4.6vw, 22px); color: var(--c-accent); font-weight: 700; line-height: 1.25;} .uc-stat span { font-size: var(--fs-xs); color: var(--c-muted);} .uc-entries { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: var(--gap);}
@media (min-width: 560px) { .uc-entries { grid-template-columns: repeat(4, 1fr);}} .uc-entry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-sm); color: #8b4513; text-align: center; transition: background .15s, transform .1s;} .uc-entry:active { background: #fdf3d8; transform: scale(.97);} .uc-entry i { font-style: normal; font-size: 22px; line-height: 1;} .uc-entry.danger { color: var(--c-accent); grid-column: 1 / -1; flex-direction: row; gap: 10px; padding: 13px 16px;} .uc-section { margin-top: var(--gap-lg);} .uc-section h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-md); color: #8b4513; margin-bottom: 10px;} .uc-section h3 small { font-weight: 400; font-size: var(--fs-xs); color: var(--c-muted);} .wallet-card { background: #fff; border: 1px solid #e8d5a8; border-radius: var(--r-md); padding: var(--gap-lg); text-align: center; margin-top: 12px;} .wallet-balance { font-size: var(--fs-xl); font-weight: 700; color: var(--c-accent);} .wallet-tip { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 8px;}
@media (min-width: 1264px) { .grid { padding-left: 0; padding-right: 0;}}
@media (min-width: 900px) { .topbar { padding-left: max(var(--pad-x), calc((100vw - var(--w-page)) / 2)); padding-right: max(var(--pad-x), calc((100vw - var(--w-page)) / 2));} .slogan { padding-left: max(var(--pad-x), calc((100vw - var(--w-page)) / 2)); padding-right: max(var(--pad-x), calc((100vw - var(--w-page)) / 2));} .form-wrap { padding: 32px;}} .hide-xs { display: none;}
@media (min-width: 560px) { .hide-xs { display: initial;}} .mt-sm { margin-top: var(--gap-sm);} .mt-md { margin-top: var(--gap);} .mt-lg { margin-top: var(--gap-lg);} .notice { background: linear-gradient(135deg, #fdf3dd, #f8e7c4); border: 1px solid #e3c88b; border-left: 4px solid var(--c-accent); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: var(--gap); font-size: var(--fs-sm); line-height: 1.75; color: #7a5a1e;} .notice b { display: block; color: var(--c-accent); font-weight: 600; margin-bottom: 2px;} .done-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(20px, 5vw, 32px); text-align: center; box-shadow: 0 6px 22px rgba(150, 110, 40, .08);} .done-ico { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; font-weight: 700; background: linear-gradient(135deg, #c98b2e, #a8651a); box-shadow: 0 4px 14px rgba(168, 101, 26, .3);} .done-title { font-size: var(--fs-lg); color: var(--c-text); margin: 0 0 6px;} .done-name { font-size: var(--fs-md); font-weight: 600; color: var(--c-accent); margin: 0 0 14px; word-break: break-all;} .done-note { font-size: var(--fs-sm); line-height: 1.9; color: #6f5622; background: #fdf6e6; border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px;} .done-note strong { color: var(--c-accent);} .done-mail { font-size: var(--fs-xs); color: var(--c-muted); margin: 0 0 18px; word-break: break-all;} .done-card .btn { margin-bottom: 10px;} .form-wrap .done-card { background: transparent; border: 0; box-shadow: none; padding: 0;} .wal { display: flex; flex-direction: column; gap: var(--gap); width: 100%; max-width: var(--w-narrow); margin: var(--gap) auto 0; padding: 0 var(--pad-x); box-sizing: border-box;} .wal-coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--gap-sm);} .wal-coin { min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(12px, 3.4vw, 18px) clamp(8px, 2.4vw, 14px); text-align: center; box-shadow: 0 3px 12px rgba(150, 110, 40, .07);} .wal-coin-ico { width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: .5px;} .wal-coin-num { font-size: clamp(15px, 4.5vw, 25px); font-variant-numeric: tabular-nums; letter-spacing: -.3px; white-space: nowrap; font-weight: 700; color: var(--c-title); line-height: 1.2;} .wal-coin-name { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px;} .wal-coin.c-merit .wal-coin-ico { background: linear-gradient(135deg, #d9a441, #a5691a); box-shadow: 0 3px 10px rgba(165,105,26,.28);} .wal-coin.c-stone .wal-coin-ico { background: linear-gradient(135deg, #6f9c8c, #2c6e6e); box-shadow: 0 3px 10px rgba(44,110,110,.26);} .wal-coin.c-points .wal-coin-ico { background: linear-gradient(135deg, #e2795c, #c0392b); box-shadow: 0 3px 10px rgba(192,57,43,.24);} .wal-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(14px, 4vw, 22px);} .wal-title { font-size: var(--fs-md); color: #8b4513; margin: 0 0 var(--gap-sm); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;} .wal-title small { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 400;} .swap-box { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-bottom: 12px;} .swap-side { min-width: 0;} .swap-side select { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--c-border-2); border-radius: var(--r-md); background: #fffdf8; color: var(--c-text); font-size: max(16px, var(--fs-base)); line-height: 1.4;} .swap-lab { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 5px;} .swap-input { display: flex; gap: 6px; margin-top: 8px;} .swap-input input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--c-border-2); border-radius: var(--r-md); background: #fffdf8; color: var(--c-text); font-size: max(16px, var(--fs-base));} .swap-all { flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--c-border-2); background: var(--c-surface-2); color: #8b4513; border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer;} .swap-arrow { width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; border: 1px solid var(--c-border-2); background: linear-gradient(135deg, #f6e3b8, #eed4a0); color: #8b4513; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s;} .swap-arrow:active { transform: rotate(180deg);} .swap-est { margin-top: 8px; font-size: var(--fs-sm); color: var(--c-muted); background: var(--c-surface-2); border-radius: var(--r-md); padding: 10px 12px; min-height: 40px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;} .swap-est b { color: var(--c-accent); font-size: var(--fs-md);} .swap-rate { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 14px;} .wal-log { display: flex; flex-direction: column;} .wal-log-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--c-border);} .wal-log-item:last-child { border-bottom: 0;} .wal-log-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: linear-gradient(135deg, #c9a15c, #9a7331);} .wal-log-main { flex: 1; min-width: 0; display: flex; flex-direction: column;} .wal-log-main b { font-size: var(--fs-sm); color: var(--c-text); font-weight: 600;} .wal-log-main span { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px;} .wal-log-num { flex: 0 0 auto; font-size: var(--fs-md); font-weight: 700;} .wal-log-num.plus { color: #2c6e6e;} .wal-log-num.minus { color: var(--c-accent);}
@media (max-width: 420px) { .swap-box { grid-template-columns: 1fr;} .swap-arrow { margin: 0 auto 6px; transform: rotate(90deg);} .swap-arrow:active { transform: rotate(270deg);}} .uc-avatar { overflow: hidden;} .uc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block;} .uc-sign { text-align: center; font-size: var(--fs-sm); color: var(--c-muted); padding: 6px 20px 0; line-height: 1.6; word-break: break-word;} .sv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px;} .sv-row { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px; display: grid; gap: 10px; min-width: 0;} .sv-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: var(--fs-sm); color: #8b4513;} .sv-ico { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700;} .sv-ico.c-merit { background: linear-gradient(135deg, #d9a441, #a5691a);} .sv-ico.c-stone { background: linear-gradient(135deg, #6f9c8c, #2c6e6e);} .sv-ico.c-points { background: linear-gradient(135deg, #e2795c, #c0392b);} .sv-name { font-weight: 600;} .sv-nums { color: var(--c-muted);} .sv-nums b { color: var(--c-title); font-weight: 600;} .sv-form { display: flex; gap: 8px; min-width: 0;} .sv-amt { flex: 1 1 0; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--c-border-2); border-radius: var(--r-sm); font-size: max(16px, var(--fs-base)); background: #fff; outline: none;} .sv-amt:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(192, 57, 43, .1);} .sv-btn { flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color: #fff; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;} .sv-btn:active { transform: scale(.98);} .sv-btn.ghost { background: #fff; color: #8b4513; border: 1px solid var(--c-border-2);} .wal-hint { margin-top: 10px; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.7;}
@media (min-width: 560px) { .sv-row { grid-template-columns: 1fr auto; align-items: center;} .sv-form { justify-content: flex-end;}} .pf { max-width: var(--w-form); margin: 0 auto; padding: 0 var(--pad-x);} .pf-back { display: inline-block; margin-top: var(--gap); font-size: var(--fs-sm); color: var(--c-muted);} .pf .form-wrap { margin-top: var(--gap);} .pf-avatar { display: flex; align-items: center; gap: 14px; margin: 6px 0 2px;} .pf-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: var(--shadow-sm); flex: 0 0 auto;} .pf-initial { background: radial-gradient(circle at 32% 28%, #e8b45a, #a05a1c); color: #fff8e6; font-size: 26px; font-weight: 700;} .pf-avatar-tip { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.7;} .pf-lock { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 6px;} .pf-foot { text-align: center; font-size: var(--fs-xs); color: var(--c-muted); margin: var(--gap-lg) 0 var(--gap);} .pf-foot a { color: var(--c-accent);} .form-wrap input[type=file]::file-selector-button { border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 14px; margin-right: 10px; background: #fdf3d8; color: #8b4513; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;} .form-wrap input[type=file]::-webkit-file-upload-button { border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 14px; margin-right: 10px; background: #fdf3d8; color: #8b4513; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;} .wal-coin-saved { display: block; font-size: 11px; line-height: 1.5; color: var(--c-muted); margin-top: 2px;} .wal-coin-saved.has { color: #a5691a; font-weight: 600;} .up-box { margin: 4px 0 14px; padding: 10px 12px; background: #fffdf6; border: 1px dashed var(--c-border-2); border-radius: var(--r-md);} .up-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;} .up-head b { font-size: var(--fs-sm); color: var(--c-title);} .up-tip { font-size: var(--fs-xs); color: var(--c-muted);} .up-acts { display: flex; gap: 8px; flex-wrap: wrap;} .up-btn { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--c-border); background: #fff; color: #8b4513; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;} .up-btn:active { transform: scale(.97);} .up-limit { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6;} .up-progress { margin-top: 10px;} .up-bar { height: 6px; background: #f0e3c8; border-radius: 3px; overflow: hidden;} .up-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));} .up-meta { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 5px;} .up-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;} .up-thumb { position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-border); background: #f7ecd5;} .up-thumb a { display: block; width: 100%; height: 100%;} .up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;} .up-del { position: absolute; top: 0; right: 0; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0 0 0 8px; background: rgba(192, 57, 43, .85); color: #fff; font-size: 12px; line-height: 18px; cursor: pointer;} .up-files { margin-top: 8px;} .up-file { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--c-border); font-size: var(--fs-xs);} .up-file b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5a3e2b; font-weight: 600;} .up-file span { flex: 0 0 auto; color: var(--c-muted);} .up-file button { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; color: var(--c-accent); font-size: 12px; cursor: pointer;} .inline-img { display: block; width: 100%; max-width: 100%; height: auto; margin: 12px 0; border-radius: 12px; border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);} .up-thumb-hit { display: block; width: 100%; height: 100%; cursor: zoom-in;} .up-btn.ghost { background: #fff; color: #8b4513; border: 1px solid var(--c-border);} .up-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px;} .up-modal[hidden] { display: none;} .up-modal-mask { position: absolute; inset: 0; background: rgba(42, 24, 8, .72);} .up-modal-box { position: relative; width: min(88vw, 420px); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--r-lg); padding: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);} .up-modal-box img { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 10px; background: #f2e2c4;} .up-modal-name { font-size: 11px; color: var(--c-muted); margin: 8px 2px 0; word-break: break-all; line-height: 1.4;} .up-modal-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;} .up-modal-acts .up-btn { flex: 1 1 0; min-width: 0; padding: 10px; text-align: center;} .up-hint { font-size: 11px; color: var(--c-muted); margin: 6px 2px 0; line-height: 1.5;} .up-pick-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--c-title); margin: 0 2px 8px;} .up-pick-count { font-size: 11px; font-weight: 400; color: var(--c-muted);} .up-pick-preview { display: block; width: 100%; max-height: 32vh; object-fit: contain; border-radius: 10px; background: #f2e2c4;} .up-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; max-height: 25vh; overflow: auto; margin: 8px 0 0; padding: 2px;} .up-pick { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #efdcbc; cursor: pointer;} .up-pick img { width: 100%; height: 100%; object-fit: cover; display: block;} .up-pick.on { border-color: var(--c-accent);} .up-pick-ok { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 10px; line-height: 16px; text-align: center; display: none;} .up-pick.on .up-pick-ok { display: block;} .up-pick-in { position: absolute; left: 0; top: 0; padding: 1px 4px; font-size: 9px; color: #fff; background: rgba(44, 110, 110, .9); border-radius: 0 0 6px 0;} .up-pick-up { flex: 1 1 100% !important; border-style: dashed !important;} .up-btn:disabled { opacity: .45; cursor: not-allowed;} .math-tip { display: none; flex-shrink: 0; padding: 3px 10px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 700; color: #2c6e6e; background: #e6f3ee; border: 1px solid #b3d8cb; white-space: nowrap;} input.input-ok { border-color: #2c6e6e !important; box-shadow: 0 0 0 2px rgba(44, 110, 110, .12);} .mail { display: flex; flex-direction: column; gap: var(--gap); width: 100%; max-width: var(--w-narrow); margin: var(--gap) auto 0; padding: 0 var(--pad-x); box-sizing: border-box;} .mail-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #fff8ec, #fdf3d8); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(12px, 3.4vw, 18px); box-shadow: 0 3px 12px rgba(150, 110, 40, .08);} .mail-hero-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, #e2795c, #c0392b); box-shadow: 0 3px 10px rgba(192, 57, 43, .3);} .mail-hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column;} .mail-hero-txt b { font-size: var(--fs-md); color: var(--c-title);} .mail-hero-txt span { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px; line-height: 1.5;} .mail-state { flex: 0 0 auto; padding: 4px 10px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 700;} .mail-state.on { color: #2c6e6e; background: #e6f3ee; border: 1px solid #b3d8cb;} .mail-state.off { color: #b3541e; background: #fdeee0; border: 1px solid #f0cdb0;} .mail-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(14px, 3.6vw, 20px); box-shadow: 0 3px 12px rgba(150, 110, 40, .07);} .mail-empty { color: var(--c-muted); font-size: var(--fs-sm);} .mail-ok { display: flex; align-items: center; gap: 12px;} .mail-ok-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6f9c8c, #2c6e6e); box-shadow: 0 3px 10px rgba(44, 110, 110, .28);} .mail-ok-txt { display: flex; flex-direction: column; min-width: 0;} .mail-ok-txt b { font-size: var(--fs-md); color: var(--c-title); word-break: break-all;} .mail-ok-txt span { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px;} .mail-steps { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px;} .mail-steps li { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-sm); color: var(--c-text); padding-left: 2px;} .mail-steps li b { flex: 0 0 auto; color: var(--c-title);} .mail-steps li span { flex: 1; min-width: 0; color: var(--c-muted); font-size: var(--fs-xs);} .mail-steps li::before { content: counter(mstep); counter-increment: mstep; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #d9a441, #a5691a);} .mail-steps { counter-reset: mstep;} .mail-form label { display: block; font-size: var(--fs-sm); color: #7a5a3a; margin: 14px 0 6px;} .mail-form input[type=email], .mail-form input[type=text] { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--c-border-2); border-radius: var(--r-md); background: #fffdf8; color: var(--c-text); font-size: var(--fs-sm); font-family: inherit;} .mail-form input:focus { outline: none; border-color: #c99b3f; box-shadow: 0 0 0 3px rgba(201, 155, 63, .14);} .mail-form input:disabled { background: #f6efdf; color: #b3a183;} .mail-send-row { display: flex; gap: 8px; align-items: stretch;} .mail-send-row input[type=email] { flex: 1; min-width: 0;} .mail-send { flex: 0 0 auto; padding: 0 14px; border: 1px solid #d9a441; border-radius: var(--r-md); background: linear-gradient(135deg, #f0c56a, #d9a441); color: #4a2810; font-size: var(--fs-xs); font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap;} .mail-send:disabled { background: #efe3c8; border-color: #ddcda6; color: #a08a5e; cursor: default;} .mail-code { text-align: center; letter-spacing: 6px; font-size: 20px !important; font-weight: 700; padding: 10px 13px !important;} .mail-tip { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.7; margin: 10px 0 0;} .mail-more { margin-top: 10px;} .mail-more summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-accent); padding: 6px 0; list-style: none;} .mail-more summary::-webkit-details-marker { display: none;} .mail-more summary::before { content: '▸ ';} .mail-more[open] summary::before { content: '▾ ';} .mail-h3 { font-size: var(--fs-md); color: var(--c-title); margin: 0 0 8px;} .mail-help p { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.8; margin: 0;} .uc-entry { position: relative;} .uc-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 2px rgba(229, 57, 53, .15);} .uc-dot.on { background: #2c6e6e; box-shadow: 0 0 0 2px rgba(44, 110, 110, .15);} .msg { max-width: 720px; margin: 0 auto; padding: 12px var(--pad-x) 0;} .msg-tabs { display: flex; gap: 8px; margin-bottom: 12px;} .msg-tab { flex: 1; position: relative; text-align: center; text-decoration: none; padding: 11px 8px; border-radius: 12px; font-size: 15px; font-weight: 600; background: rgba(255, 248, 236, .86); border: 1px solid var(--c-border); color: var(--c-muted);} .msg-tab.on { background: linear-gradient(180deg, #f6d89c, #eec271); border-color: #c9a45c; color: #5a3310; box-shadow: 0 2px 10px rgba(160, 110, 30, .22);} .msg-badge { position: absolute; top: -7px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; border-radius: 9px; text-align: center; background: var(--c-danger); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; box-shadow: 0 2px 5px rgba(229, 57, 53, .35);} .msg-bar { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--c-muted); padding: 0 4px 9px;} .msg-bar b { color: var(--c-accent);} .msg-act { border: 1px solid var(--c-border-2); background: var(--c-surface); color: #8a5a24; border-radius: 999px; font-size: 12px; padding: 5px 12px; cursor: pointer; text-decoration: none; font-family: inherit;} .msg-list { display: flex; flex-direction: column; gap: 10px;} .msg-item { display: flex; gap: 11px; align-items: flex-start; position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 13px 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);} .msg-item.unread { border-color: #dcb975; box-shadow: 0 3px 12px rgba(170, 120, 40, .18);} .msg-item.unread::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #e2b350, #c0791d);} .msg-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; border: 1px solid rgba(0, 0, 0, .04);} .c-post { background: #fdeede;} .c-reply { background: #eaf3f1;} .c-reward { background: #fdf0d8;} .c-wallet { background: #f7ecdd;} .c-mail { background: #eef4fb;} .c-chat { background: #fbecef;} .c-admin { background: #f1efe7;} .c-sys { background: #f3efe4;} .c-game { background: #f2eee2;} .c-gift { background: #fbeade;} .msg-main { flex: 1; min-width: 0;} .msg-main b { display: block; font-size: 15px; color: var(--c-title); font-weight: 600;} .msg-main p { margin: 3px 0 0; font-size: 13px; color: #7a6136; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .msg-time { display: block; margin-top: 5px; font-size: 11.5px; color: #a98c52;} .msg-dot { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-danger);} .msg-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--c-surface); border: 1px dashed var(--c-border-2); border-radius: 16px; padding: 34px 20px; color: var(--c-muted);} .msg-empty-ico { font-size: 34px; opacity: .5;} .msg-empty b { color: var(--c-title); font-size: 15px;} .msg-empty span { font-size: 13px;} .msg-empty .msg-act { margin-top: 8px;} .msg-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 4px; font-size: 13px; color: var(--c-muted);} .msg-pager a { color: #8a5a24; text-decoration: none; border: 1px solid var(--c-border-2); background: var(--c-surface); border-radius: 999px; padding: 6px 14px;} .msg-new { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; background: linear-gradient(180deg, #fff9ee, #fbeecd); border: 1px solid var(--c-border); border-radius: 14px; padding: 12px 14px; color: #7a4a1a; font-size: 14px; text-decoration: none; box-shadow: var(--shadow-sm);} .msg-new i { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; font-style: normal; display: flex; align-items: center; justify-content: center; font-weight: 700; background: linear-gradient(180deg, #e8b64f, #cf9027); color: #fff; font-size: 16px;} .conv, .ct-row { display: flex; gap: 12px; align-items: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 11px 13px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);} .conv-av { position: relative; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: linear-gradient(180deg, #e8c887, #d3a353); color: #5a3310; font-weight: 700; font-size: 18px;} .conv-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block;} .conv-av > span { width: 100%; height: 100%; border-radius: 12px; display: flex; align-items: center; justify-content: center;} .conv-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; border-radius: 9px; text-align: center; background: var(--c-danger); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; box-shadow: 0 2px 5px rgba(229, 57, 53, .35);} .conv-main { flex: 1; min-width: 0;} .conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;} .conv-top b { font-size: 15px; color: var(--c-title); font-weight: 600;} .conv-top span { font-size: 11.5px; color: #a98c52; flex: 0 0 auto;} .conv-main p { margin: 3px 0 0; font-size: 13px; color: #8a7245; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .conv-me { color: #b08a4a; font-style: normal;} .conv-v { display: inline-block; margin-left: 5px; width: 15px; height: 15px; line-height: 15px; border-radius: 50%; background: var(--c-jade); color: #fff; font-size: 10px; font-style: normal; text-align: center; vertical-align: 1px;} .ct-search { display: flex; gap: 8px; margin-bottom: 10px;} .ct-search input { flex: 1; min-width: 0; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--c-border); background: var(--c-surface); font-size: 14px; color: var(--c-text); outline: none; font-family: inherit;} .ct-search input:focus { border-color: #c9a45c;} .ct-search button { border: none; border-radius: 11px; padding: 0 16px; cursor: pointer; background: linear-gradient(180deg, #e8b64f, #cf9027); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;} .ct-go { color: #b07f2e !important; font-size: 12.5px !important;} body.chatpage { padding-bottom: 0; background: #f2e5c9;} .chat { max-width: 720px; margin: 0 auto; padding: 14px var(--pad-x) 96px;} .chat-empty { min-height: 52vh; display: flex; flex-direction: column; justify-content: center;} .chat-hero { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 30px 10px 20px;} .chat-hero-av { width: 74px; height: 74px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #e8c887, #d3a353); color: #5a3310; font-weight: 700; font-size: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(160, 110, 30, .25);} .chat-hero-av img { width: 100%; height: 100%; object-fit: cover;} .chat-hero b { font-size: 17px; color: var(--c-title);} .chat-hero span { font-size: 13px; color: #a98c52;} .chat-time { text-align: center; margin: 14px 0 4px; font-size: 11.5px; color: #a98c52;} .chat-row { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0;} .chat-row.me { flex-direction: row-reverse;} .chat-av { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; overflow: hidden; background: linear-gradient(180deg, #e8c887, #d3a353); color: #5a3310; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;} .chat-av img { width: 100%; height: 100%; object-fit: cover;} .chat-av.me { background: linear-gradient(180deg, #f0c172, #d8992f);} .chat-bub { max-width: 74%; padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.55; word-break: break-word;} .chat-row.you .chat-bub { background: #fffdf7; color: #4a3018; border: 1px solid #e7d3a6; border-top-left-radius: 4px; box-shadow: 0 1px 3px rgba(150, 110, 40, .10);} .chat-row.me .chat-bub { background: linear-gradient(180deg, #f8dd9e, #eec471); color: #5a3410; border: 1px solid #dcae5b; border-top-right-radius: 4px; box-shadow: 0 1px 3px rgba(180, 120, 30, .20);} .chat-err { max-width: 720px; margin: 0 auto; padding: 8px var(--pad-x); color: var(--c-accent); font-size: 13px;} .chat-input { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: flex-end; gap: 9px; max-width: 720px; margin: 0 auto; padding: 9px var(--pad-x) calc(9px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 248, 236, .95), #fff6e8); border-top: 1px solid var(--c-border);} .chat-input textarea { flex: 1; min-width: 0; resize: none; min-height: 40px; max-height: 110px; padding: 9px 12px; border-radius: 11px; border: 1px solid #dcc79b; background: #fffdf6; font-size: 14px; line-height: 1.45; color: var(--c-text); font-family: inherit; outline: none;} .chat-input textarea:focus { border-color: #c9a45c;} .chat-input button { border: none; border-radius: 11px; padding: 10px 18px; cursor: pointer; background: linear-gradient(180deg, #e8b64f, #cf9027); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit; box-shadow: 0 2px 8px rgba(190, 130, 30, .3);}
@media (max-width: 380px) { .msg-ico { width: 36px; height: 36px; flex: 0 0 36px; font-size: 17px;} .conv-av { width: 42px; height: 42px; flex: 0 0 42px; font-size: 16px;}} .bn-icon { position: relative;} .bn-dot { position: absolute; top: -3px; right: -6px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-danger); font-style: normal; box-shadow: 0 1px 3px rgba(229, 57, 53, .5);} .uc-num { position: absolute; top: 7px; right: 9px; min-width: 17px; height: 17px; padding: 0 4px; line-height: 17px; border-radius: 9px; background: var(--c-danger); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; text-align: center; box-shadow: 0 2px 5px rgba(229, 57, 53, .35);} .chat-bub { position: relative;} .chat-row.you .chat-bub::after { content: ''; position: absolute; left: -5px; top: 11px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 6px solid #fffdf7;} .chat-row.me .chat-bub::after { content: ''; position: absolute; right: -5px; top: 11px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #f3d491;} .chat-av, .conv-av, .chat-hero-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);} .chat-row { margin: 12px 0;} .chat-err { max-width: none; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #fdecea; border: 1px solid #f0c6c0; color: var(--c-accent); font-size: 13px;} .chat-input { max-width: none; margin: 0; padding: 0;} .chat-input-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: flex-end; gap: 9px; padding: 9px var(--pad-x) calc(9px + env(safe-area-inset-bottom));} .up-pool { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(196, 158, 90, .35);} .up-pool[hidden] { display: none;} .up-pool-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 9px;} .up-pool-head b { font-size: var(--fs-xs); color: #7a5427; letter-spacing: .04em;} .up-pool-head span { font-size: 11px; color: var(--c-muted);} .up-pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px;} .up-pk { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-border); background: #f7ecd5; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;} .up-pk img { width: 100%; height: 100%; object-fit: cover; display: block;} .up-pk:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(150, 110, 50, .18);} .up-pk.on { border-color: #c99a3f; box-shadow: 0 0 0 2px rgba(201, 154, 63, .35);} .up-pk.hit { border-color: #b8862f; box-shadow: 0 0 0 2px rgba(184, 134, 47, .55), 0 4px 10px rgba(120, 80, 30, .18); transform: scale(.96); transition: transform .18s ease;} .up-pk.other { cursor: zoom-in;} .up-pk-tag { position: absolute; left: 4px; bottom: 4px; font-style: normal; padding: 1px 5px; border-radius: 5px; font-size: 10px; line-height: 1.5; color: #6a4517; background: rgba(255, 246, 226, .92);} .up-pk-owner { position: absolute; right: 3px; top: 3px; padding: 1px 5px; border-radius: 5px; font-size: 10px; line-height: 1.5; text-decoration: none; color: #fff; background: rgba(122, 84, 39, .82);} .up-pool-files { margin-top: 8px; display: grid; gap: 6px; align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));} .up-pkf { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 7px 7px; border-radius: 9px; background: #fff; border: 1px solid var(--c-border); cursor: pointer; min-width: 0; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;} .up-pkf.on { border-color: #c99a3f; background: #fff9ec; box-shadow: 0 2px 10px rgba(201, 154, 63, .18);} .up-pkf.other { cursor: default; opacity: .82;} .up-pkf-hd { display: flex; align-items: flex-start; gap: 4px; min-width: 0;} .up-pkf-ico { flex: 0 0 17px; width: 17px; height: 17px; border-radius: 4px; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f8e2bb, #e3bd7c); border: 1px solid #dcc08a; color: #7a4d1f; font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: .2px;} .up-pkf b { flex: 1 1 auto; min-width: 0; color: #5a3e2b; font-weight: 600; font-size: 9.5px; line-height: 1.35; word-break: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .up-pkf-meta { font-style: normal; font-size: 9.5px; color: var(--c-muted); line-height: 1.35;} .up-pk-used { position: absolute; left: 3px; top: 3px; font-style: normal; padding: 0 4px; border-radius: 4px; font-size: 9px; line-height: 1.6; color: #fff6e2; background: rgba(90, 62, 43, .55);} .up-pkf-used { position: absolute; right: 4px; top: 4px; font-style: normal; width: 5px; height: 5px; border-radius: 50%; overflow: hidden; text-indent: -9px; color: transparent; background: rgba(160, 110, 45, .55);} .up-pool-count { font-style: normal; font-size: 11px; color: #b08c50; padding: 1px 6px; border-radius: 5px; background: rgba(214, 180, 116, .16);} .up-file { display: block; padding: 7px 10px 8px;} .up-file-row { display: flex; align-items: center; gap: 6px;} .up-pay { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e8d5a8;} .up-pay label { flex: 0 0 auto; font-size: 11px; color: #8b6a45;} .up-pay input { flex: 0 0 52px; width: 52px; height: 26px; padding: 0 4px; text-align: center; border: 1px solid #e2c98f; border-radius: 6px; background: #fffdf7; font-size: 12px; color: #5a3e2b; outline: none;} .up-pay input:focus { border-color: #c79a4a; box-shadow: 0 0 0 2px rgba(199,154,74,.13);} .up-pay em { font-style: normal; font-size: 10px; color: #a98753;} .up-pay .up-pay-ins { flex: 0 0 auto; margin-left: auto; padding: 0 10px; height: 26px; line-height: 26px; border: 1px solid #d8b06a; border-radius: 6px; background: linear-gradient(135deg, #fff8e8, #f7e6c2); color: #8b5a1f; font-size: 11px; font-weight: 600; cursor: pointer;} .up-pay .up-pay-ins:active { transform: translateY(1px);} .up-pay-tip { margin: 5px 0 0; font-size: 10px; line-height: 1.5; color: #a08a6a;} .pf { position: relative; margin: 16px 0; padding: 16px 16px 14px; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, #35200f 0%, #4d2f16 42%, #7a4d1f 100%); border: 1px solid rgba(226, 190, 122, .38); box-shadow: 0 10px 26px rgba(58, 32, 8, .28), inset 0 1px 0 rgba(255, 231, 184, .16);} .pf::before { content: ''; position: absolute; inset: -40% -30% auto auto; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255, 210, 130, .22), rgba(255, 210, 130, 0) 68%); pointer-events: none;} .pf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #b07d33, #f5dca8, #b07d33);} .pf-head { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1;} .pf-ico { flex: 0 0 auto; width: 46px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffeac2, #e0b976); color: #6b3f14; font-size: 11px; font-weight: 800; letter-spacing: .5px; box-shadow: 0 4px 10px rgba(0, 0, 0, .28), inset 0 -2px 0 rgba(120, 70, 20, .22);} .pf-info { flex: 1 1 auto; min-width: 0;} .pf-info b { display: block; font-size: 15px; color: #fff3dc; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .pf-info em { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: #d9b988;} .pf-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: rgba(255, 214, 140, .14); border: 1px solid rgba(255, 214, 140, .45); color: #ffd88e; font-size: 10px; letter-spacing: 1px;} .pf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 220, 160, .16); position: relative; z-index: 1;} .pf-num { display: flex; align-items: baseline; gap: 5px;} .pf-num small { font-size: 11px; color: #c8a476;} .pf-num i { font-style: normal; font-size: 27px; font-weight: 700; line-height: 1; background: linear-gradient(180deg, #fff0cd, #e8b862 70%, #c58c3a); -webkit-background-clip: text; background-clip: text; color: transparent;} .pf-num em { font-style: normal; font-size: 11px; color: #d9b988;} .pf-form { margin: 0;} .pf-btn { position: relative; overflow: hidden; border: 0; cursor: pointer; padding: 0 20px; height: 40px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .5px; color: #4a2a0a; background: linear-gradient(135deg, #ffe9bd, #eabb6f 48%, #c9922f); box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .12s ease, filter .12s ease;} .pf-btn:active { transform: translateY(1px) scale(.99);} .pf-btn::after { content: ''; position: absolute; top: -60%; left: -70%; width: 40%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: rotate(16deg); animation: pfSheen 3.4s ease-in-out infinite;} @keyframes pfSheen { 0%, 62% { left: -70%;} 100% { left: 130%;}} .pf-btn.ok { display: inline-flex; align-items: center; text-decoration: none; color: #4a2a0a;} .pf-btn.ok:visited, .pf-btn.ok:hover { color: #4a2a0a; text-decoration: none;} .pf-unlocked { font-size: 11px; color: #9fd3a6; letter-spacing: 1px;} .pf-err { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: #fff3e2; border: 1px solid #e8c58a; color: #8a5a1c; font-size: 13px;} .pf-err a { color: #b07d33; text-decoration: underline;}
@media (max-width: 359px) { .pf-num i { font-size: 23px;} .pf-btn { padding: 0 14px; height: 38px; font-size: 13px;}} .up-pool-sub { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px;} .up-pool-sub b { font-size: 13px; color: #8b5a1f;} .up-pool-sub em { font-style: normal; font-size: 11px; color: #a08a6a;} .up-pkf-act { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; padding-top: 4px; border-top: 1px dashed #ecd9b0;} .up-pkf-lab, .up-pkf-unit { flex: 0 0 auto; white-space: nowrap; font-style: normal; font-size: 9.5px; color: #a98753;} .up-pkf-price { flex: 1 1 auto; min-width: 0; height: 21px; padding: 0 2px; text-align: center; border: 1px solid #e2c98f; border-radius: 5px; background: #fffdf7; font-size: 11.5px; color: #5a3e2b; outline: none;} .up-pkf-price:focus { border-color: #c79a4a; box-shadow: 0 0 0 2px rgba(199,154,74,.13);} .up-pay-mini { flex: 0 0 auto; margin: 0; padding: 0 4px; height: 23px; line-height: 23px; width: 100%; min-width: 0; white-space: nowrap; border: 1px solid #d8b06a; border-radius: 6px; background: linear-gradient(135deg, #fff8e8, #f7e6c2); color: #8b5a1f; font-size: 10.5px; font-weight: 600; cursor: pointer;} .cb { margin: 16px 0; border-radius: 14px; overflow: hidden; background: #1c1610; border: 1px solid rgba(226, 190, 122, .34); box-shadow: 0 8px 22px rgba(52, 32, 12, .22), inset 0 1px 0 rgba(255, 231, 184, .12);} .cb-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: linear-gradient(135deg, #2d2216, #1a130c); border-bottom: 1px solid rgba(226, 190, 122, .18);} .cb-lang { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .6px; color: #f6e3b6; background: rgba(226, 190, 122, .16); border: 1px solid rgba(226, 190, 122, .32); padding: 2px 8px; border-radius: 6px;} .cb-meta { flex: 1 1 auto; min-width: 0; font-size: 11px; color: #a79573;} .cb-copy { flex: 0 0 auto; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 12px; border-radius: 7px; white-space: nowrap; border: 1px solid rgba(226, 190, 122, .46); background: rgba(226, 190, 122, .14); color: #f6e3b6; transition: background .15s ease, transform .1s ease;} .cb-copy:hover { background: rgba(226, 190, 122, .26);} .cb-copy:active { transform: scale(.97);} .cb-code { margin: 0; padding: 13px 13px 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.7; color: #e9dcc2; white-space: pre; tab-size: 4;} .cb-lock { padding: 20px 16px 18px; text-align: center;} .cb-lock-ico { display: block; font-size: 20px; line-height: 1; margin-bottom: 8px; opacity: .9;} .cb-lock-t { display: block; font-size: 14px; color: #f6e3b6; letter-spacing: 1px;} .cb-lock-s { display: block; margin-top: 5px; font-size: 11.5px; color: #a79573;} .cb-form { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(226, 190, 122, .16);} .cb-num { display: flex; align-items: baseline; gap: 5px;} .cb-num small { font-size: 11px; color: #a79573;} .cb-num i { font-style: normal; font-size: 22px; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #ffe7b0, #d9a441); -webkit-background-clip: text; background-clip: text; color: transparent;} .cb-num em { font-style: normal; font-size: 11px; color: #c9b183;} .cd-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px;} .cd-bar label { margin: 0;} .cd-open { flex: 0 0 auto; padding: 0 12px; height: 30px; line-height: 28px; cursor: pointer; border: 1px solid #d8b06a; border-radius: 8px; background: linear-gradient(135deg, #fff8e8, #f7e6c2); color: #8b5a1f; font-size: 12.5px; font-weight: 600;} .cd-box { margin: 0 0 12px; padding: 11px 12px 12px; border-radius: 12px; background: #fffdf7; border: 1px solid #e6cf9f;} .cd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;} .cd-lang { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid #e2c98f; border-radius: 8px; background: #fff; font-size: 13px; color: #5a3e2b; outline: none;} .cd-price { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap;} .cd-price small { flex: 0 0 auto; white-space: nowrap; font-size: 11px; color: #a98753;} .cd-price input { width: 66px; height: 32px; padding: 0 6px; text-align: center; border: 1px solid #e2c98f; border-radius: 8px; background: #fff; font-size: 13px; color: #5a3e2b; outline: none;} .cd-price em { flex: 0 0 auto; white-space: nowrap; font-style: normal; font-size: 11px; color: #a98753;} .cd-text { width: 100%; box-sizing: border-box; padding: 10px; resize: vertical; border: 1px solid #e2c98f; border-radius: 10px; background: #fff; font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.6; color: #4a3524; outline: none; tab-size: 4;} .cd-text:focus, .cd-lang:focus, .cd-price input:focus { border-color: #c79a4a; box-shadow: 0 0 0 2px rgba(199, 154, 74, .13);} .cd-acts { display: flex; align-items: center; gap: 8px; margin-top: 9px;} .cd-len { flex: 1 1 auto; font-size: 11px; color: #a08a6a;} .cd-len.over { color: #b03a2e;} .cd-ins, .cd-cancel { flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;} .cd-ins { border: 1px solid #d8b06a; background: linear-gradient(135deg, #ffe9bd, #eabb6f); color: #5a3e2b;} .cd-cancel { border: 1px solid var(--c-border); background: #fff; color: var(--c-muted);} .cd-tip { margin: 9px 0 0; font-size: 11.5px; line-height: 1.6; color: #a08a6a;} .art { width: 100%; max-width: 760px; margin: 8px auto 0; padding: 0 12px 16px;} .art-head { background: linear-gradient(165deg, #fdf5e0, #f8eed4); border: 1.5px solid #2f6f6a; border-radius: 18px; padding: 14px 16px 13px; box-shadow: 0 2px 10px rgba(139,69,23,.07);} .art-title { font-size: 22px; font-weight: 800; color: #7c2d12; line-height: 1.4; margin: 0 0 10px; word-break: break-word;} .art-author { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;} .art-ava { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: #fff; border: 2px solid #2f6f6a; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #175e5e;} .art-ava img { width: 100%; height: 100%; object-fit: cover; display: block;} .art-ava.sm { width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px; border-width: 1.5px;} .art-name { font-size: 17px; font-weight: 700; color: #6b3410;} .art-time { font-size: 13px; color: #9c8163;} .art-week { font-size: 13px; color: #c8892f; font-weight: 600;} .art-stat { display: flex; align-items: center; gap: 20px; margin: 9px 0 0;} .art-like-form { margin: 0;} .art-like, .art-view { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; color: #8b7a5c; font-family: inherit;} .art-like.on { color: #c0392b; font-weight: 700;} .art-like svg, .art-view svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;} .art-kinds { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0;} .art-kind { background: #175e5e; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 8px; letter-spacing: .5px;} .art-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 0;} .atg-form { display: flex; flex-wrap: wrap; gap: 3px; margin: 0;} .atg-mini { display: inline-flex; align-items: center; height: 20px; padding: 0 5px; border-radius: 4px; font-size: 10px; line-height: 1; letter-spacing: 0; font-family: inherit; cursor: pointer; border: 1px solid #ddd0ad; background: #fffdf6; color: #a3936f; transition: none;} .atg-mini.on { border-color: var(--atgc); color: var(--atgc); background: #fff; font-weight: 700;} .atg-mini.ro { cursor: default;} .art-act.ro { opacity: .72; cursor: default; pointer-events: none;} .art-act.ro.act-edit { background: #f2ecdc; border-color: #cdbf9e; color: #8d8168;} .art-act.ro.act-del { background: #d8a49e; border-color: #cb9691; color: #fffaf5;} .art-acts { display: flex; align-items: center; gap: 8px; margin-left: auto;} .art-act { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; border: 1px solid transparent; font-family: inherit;} .art-act svg { width: 14px; height: 14px; flex: 0 0 14px; stroke: currentColor; fill: none;} .act-edit { color: #175e5e; background: #fffdf6; border-color: #2f6f6a;} .act-edit:hover { background: #eef6f4;} .art-act.act-del { color: #fff; background: #c0392b; border-color: #b53226;} .art-del-form { margin: 0; display: inline-flex;} .btn-plain { background: #fffdf6; color: #8a3b1f; border: 1px solid #d9c39a;} .atg { display: flex; align-items: center; gap: 4px; border: 1px solid currentColor; border-radius: 16px; background: #fffaf0; padding: 4px 11px; font-size: 13px; font-weight: 500; white-space: nowrap;} .atg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 14px;} .art-body { background: linear-gradient(165deg, #fdf7ea, #f9f0da); border: 1px solid #e6d5ab; border-radius: 18px; margin: 12px 0 0; padding: 16px 16px 4px; box-shadow: 0 2px 10px rgba(139,69,23,.06);} .art-body .thread-content { font-size: 16px; line-height: 1.95; color: #3d3126;} .art-body .thread-content img, .art-body img.inline-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0;} .art-body .thread-imgs { display: flex; flex-wrap: wrap; margin: 12px 0 0;} .art-body .thread-imgs a { flex: 0 0 48%; margin: 0 4% 8px 0;} .art-body .thread-imgs a:nth-child(2n) { margin-right: 0;} .art-body .thread-imgs.single a { flex: 0 0 100%; margin-right: 0;} .art-navline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 14px 16px; background: #fdf7ea; border: 1px solid #e6d5ab; border-radius: 14px; text-decoration: none; color: inherit;} .art-navline span { font-size: 13px; color: #a08a5e; flex: 0 0 auto;} .art-navline b { font-size: 15px; font-weight: 700; color: #5e3f1f;} .art-share { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; padding: 16px 18px; background: #fdf7ea; border: 1.5px solid #2f6f6a; border-radius: 18px;} .art-share b { font-size: 18px; font-weight: 800; color: #6b3410;} .art-poster-btn { background: linear-gradient(160deg, #f7a81b, #e07b12); color: #fff; border: 0; border-radius: 22px; padding: 11px 24px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(224,123,18,.28);} .art-cmt { margin: 12px 0 0; padding: 18px; background: #fdf7ea; border: 1.5px solid #2f6f6a; border-radius: 18px;} .art-cmt-title { font-size: 20px; font-weight: 800; color: #6b3410; margin: 0 0 12px;} .art-cmt-title2 { margin: 22px 0 12px; font-size: 16px;} .art-cmt-who { font-size: 14px; color: #7c6748; line-height: 1.7; margin: 0 0 14px;} .art-cmt-who a { color: #175e5e; text-decoration: underline;} .art-cmt-req { color: #a08a5e; font-size: 13px;} .art-cmt-form textarea { width: 100%; box-sizing: border-box; min-height: 120px; padding: 12px 14px; border: 1px solid #e0cfab; border-radius: 12px; background: #fffdf7; font-size: 15px; line-height: 1.8; font-family: inherit; color: #3d3126; resize: vertical;} .art-cmt-btn { margin: 14px 0 0; background: linear-gradient(160deg, #f7a81b, #e07b12); color: #fff; border: 0; border-radius: 22px; padding: 11px 26px; font-size: 15px; font-weight: 700; cursor: pointer;} .post-item { padding: 12px 0; border-bottom: 1px dashed #e6d5ab;} .post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap;} .post-head b { font-size: 14px; color: #6b3410;} .post-time { font-size: 12px; color: #a08a5e;} .post-body { font-size: 14px; line-height: 1.8; color: #4a3a26; word-break: break-word;} .poster-box { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 60;} .poster-mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(30,20,10,.62);} .poster-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 82%; max-width: 360px; max-height: 84%; overflow: auto; background: #fffdf7; border-radius: 16px; padding: 10px; box-sizing: border-box;} .poster-panel img { display: block; width: 100%; border-radius: 10px;} .poster-acts { display: flex; gap: 10px; margin-top: 10px;} .poster-save, .poster-cls { flex: 1 1 50%; border: 0; border-radius: 20px; padding: 11px 0; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;} .poster-save { background: linear-gradient(160deg, #f7a81b, #e07b12); color: #fff;} .poster-cls { background: #efe3c6; color: #7c5c2e;}
@media (min-width: 700px) { .art { padding: 0 20px 20px;} .art-body .thread-imgs a { flex: 0 0 31.5%;} .art-body .thread-imgs a:nth-child(2n) { margin-right: 4%;} .art-body .thread-imgs a:nth-child(3n) { margin-right: 0;}} .pub-taghint { font-style: normal; font-size: 12px; color: #a08a5e; font-weight: 400; margin-left: 6px;} .tag-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px;} .tag-pick { display: inline-block; cursor: pointer; margin: 0;} .tag-pick input { position: absolute; opacity: 0; width: 0; height: 0;} .tag-pick .atg { transition: none;} .tag-pick input:checked + .atg { background: #175e5e; color: #fff !important; border-color: #175e5e !important;} .tag-pick input:checked + .atg svg { stroke: #fff;} .grid { padding: 6px 10px 16px;} .grid > .pcell, .grid > .pcard { width: calc(50% - 5px) !important; max-width: calc(50% - 5px) !important;} .pcell, .pcard { display: block; flex: 0 0 auto; width: 49%; max-width: 49%; width: calc(50% - 5px); max-width: calc(50% - 5px); box-sizing: border-box; font-size: 14px; line-height: 1.4; margin: 0; font-size: 14px; text-align: left; background: linear-gradient(180deg, #fdf6e3 0%, #f9eed8 60%, #f6e7cb 100%); border: 1.5px solid #2f6f6a; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(80, 50, 20, .08);} .pc-cover { position: relative; height: 0; padding-top: 50%; background: #eee0bd; overflow: hidden;} .pc-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block;} .pc-ph { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #f4ead2 0%, #ebdcb6 55%, #f4ead2 100%);} .pc-ph-doc { position: absolute; left: 9px; right: 9px; top: 10px; bottom: 10px; background: #fffdf6; border: 1px solid #f0e3c6; border-radius: 8px; padding: 9px; font-size: 11.5px; line-height: 1.62; color: #a4916c; overflow: hidden;} .pc-tags { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 3px; max-width: calc(100% - 60px); overflow: hidden;} .pc-tg { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; border-radius: 3px; font-size: 9px; line-height: 1; font-weight: 700; color: #fff; white-space: nowrap;} .pc-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff;} .pc-badge.b-top { background: #c0392b;} .pc-badge.b-ess { background: #d98324;} .pc-body { padding: 6px 9px 7px;} .pc-title { font-size: 15px; font-weight: 800; color: #8a3b1f; line-height: 1.28; height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .pc-sum { font-size: 11.5px; color: #7a6549; line-height: 1.38; margin-top: 3px; height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .pc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 5px;} .pc-cat { background: #1f6367; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 5px; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .pc-nums { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;} .pc-num { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: #b07a2a;} .pc-num svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 14px;} .pc-num i { font-style: normal; font-weight: 600;} .pc-foot { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding-top: 5px; border-top: 1px solid #ecdfc0;} .pc-ava { width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; background: #fff; border: 1.5px solid #2f6f6a; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #175e5e;} .pc-ava img { width: 100%; height: 100%; object-fit: cover; display: block;} .pc-date { font-size: 12px; color: #8a7358;} .pc-week { font-size: 12px; color: #c8892f; font-weight: 600;}
@media (min-width: 700px) { .grid > .pcell, .grid > .pcard { width: calc((100% - 20px)/3) !important; max-width: calc((100% - 20px)/3) !important;}}
@media (min-width: 1000px) { .grid > .pcell, .grid > .pcard { width: calc((100% - 30px)/4) !important; max-width: calc((100% - 30px)/4) !important;}} .search-head { padding: 12px 12px 0;} .search-form { display: flex; gap: 8px;} .search-input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; font-size: 15px; font-family: inherit; border: 1.5px solid #2f6f6a; border-radius: 12px; background: #fffdf5; color: #3d3126;} .search-btn { flex: 0 0 auto; border: 0; border-radius: 12px; cursor: pointer; padding: 0 18px; font-size: 15px; font-weight: 700; font-family: inherit; background: linear-gradient(160deg, #f7a81b, #e07b12); color: #fff;} .search-tip { padding: 12px; font-size: 13px; color: #8a7358;}
@media (max-width: 380px) { .pc-title { font-size: 14px; height: 36px; line-height: 1.28;} .pc-sum { font-size: 11px; height: 30px; line-height: 1.36;} .pc-body { padding: 6px 8px 6px;} .pc-ph-doc { font-size: 10px; line-height: 1.4; padding: 5px 6px;} .pc-cat { font-size: 10.5px; padding: 3px 7px; max-width: 56%;} .pc-num { font-size: 11px;} .pc-num svg { width: 13px; height: 13px; flex: 0 0 13px;} .pc-date, .pc-week { font-size: 10.5px;} .pc-ava { width: 21px; height: 21px; flex: 0 0 21px;} .pc-body { padding: 7px 8px 6px;}} .topbar-logo{height:26px;width:auto;display:inline-block;vertical-align:middle;max-width:100%} .site-footer{max-width:1200px;margin:0 auto;padding:12px 16px 84px;text-align:center;font-size:12px;color:#9a8364;line-height:1.75} .code-row{display:flex;gap:8px;align-items:stretch} .code-row input{flex:1 1 auto;min-width:0} .code-row .btn{flex:0 0 116px;width:116px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;font-size:14px;white-space:nowrap} .field-tip.tip-ok{color:#2ba267} .field-tip.tip-bad{color:#d9473a} .chat-fee { font-size: 12px; color: #9a7b3f; text-align: center; padding: 3px 6px 2px; letter-spacing: .02em;} .chat { padding-bottom: 168px;} .chat-col { display: flex; flex-direction: column; max-width: 76%; min-width: 0;} .chat-row.you .chat-col { align-items: flex-start;} .chat-row.me .chat-col { align-items: flex-end;} .chat-col .chat-bub { max-width: 100%;} .chat-meta { display: flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 11px; color: #a98c52; letter-spacing: .2px;} .cm-dot { font-style: normal; opacity: .55;} .chat-flash { max-width: 720px; margin: 0 auto 10px; padding: 9px 12px; border-radius: 10px; background: #eaf6ec; border: 1px solid #bfe0c6; color: #256b3a; font-size: 13px;} .chat-bub-img { padding: 3px; background: #fffdf7; border: 1px solid #e7d3a6; border-radius: 12px;} .chat-bub-img img { display: block; max-width: 190px; max-height: 240px; border-radius: 9px; object-fit: cover;} .chat-img-miss { font-size: 12.5px; color: #a98c52; padding: 6px 8px; display: inline-block;} .chat-pay { border-radius: 14px; overflow: hidden; color: #fff; min-width: 208px; max-width: 262px; box-shadow: 0 3px 10px rgba(120, 70, 20, .22);} .chat-pay.rp { background: linear-gradient(135deg, #b8492f, #8d2b1e);} .chat-pay.tp { background: linear-gradient(135deg, #22795c, #165844);} .chat-pay.done { filter: saturate(.72); opacity: .88;} .pay-top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px;} .pay-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 20px;} .pay-main { display: flex; flex-direction: column; gap: 2px; min-width: 0;} .pay-main b { font-size: 15px; font-weight: 700; white-space: nowrap;} .pay-main span { font-size: 11.5px; opacity: .86;} .pay-act { margin-left: auto;} .pay-act button { border: 0; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-family: inherit; font-weight: 600; background: #fff; color: #a63a2a; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);} .chat-pay.tp .pay-act button { color: #165844;} .pay-note { padding: 0 12px 11px; font-size: 12px; opacity: .92;} .chat-gift { display: flex; gap: 10px; align-items: center; background: linear-gradient(160deg, #fffdf6, #fdf1d8); border: 1px solid #e3c898; border-radius: 16px; padding: 8px 10px 8px 8px; min-width: 218px; max-width: 266px; box-shadow: 0 3px 12px rgba(150, 105, 35, .14);} .chat-gift.done { opacity: .84; filter: saturate(.72);} .gift-fig { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse 70% 64% at 50% 46%, #efe2c6 0%, #fbf3df 100%); display: flex; align-items: center; justify-content: center;} .gift-fig img { width: 100%; height: 100%; object-fit: contain;} .gift-ico { font-size: 26px; line-height: 1;} .gift-body { display: flex; flex-direction: column; gap: 1px; min-width: 0;} .gift-cap { font-size: 10px; color: #b08a3e; letter-spacing: .06em;} .gift-body b { font-size: 13.5px; color: #6b4a22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .gift-body b i { font-style: normal; font-size: 11px; color: #a98c52;} .gift-kind { font-size: 10.5px; color: #a98c52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .gift-state { font-size: 11px; color: #8a5a12; font-weight: 700;} .gift-act { margin-left: auto; flex: 0 0 auto;} .gift-act button { border: 0; border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700; font-family: inherit; background: linear-gradient(135deg, #c8922f, #a9751f); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(150, 100, 20, .26);} .gift-mask .gift-box { width: 100%; max-width: 360px; max-height: 74vh; display: flex; flex-direction: column; gap: 8px; background: #fffdf7; border-radius: 16px; padding: 16px 14px 12px; box-shadow: 0 18px 44px rgba(90, 60, 20, .32);} .gift-box h3 { margin: 0; font-size: 16px; color: #4a3320;} .gift-tip { margin: 0; font-size: 11.5px; color: #8a7355; line-height: 1.55;} .gift-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px; margin: 0;} .gift-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid #e6d3ac; background: #fffaee; border-radius: 12px; padding: 6px 4px 5px; cursor: pointer; font-family: inherit; color: inherit;} .gift-cell:active { background: #f8edd4;} .gift-cell-pic { width: 100%; height: 62px; border-radius: 9px; overflow: hidden; background: #f2e6cb; display: flex; align-items: center; justify-content: center;} .gift-cell-pic img { width: 100%; height: 100%; object-fit: contain;} .gift-cell-n { font-size: 10.5px; color: #6b4a22; line-height: 1.3; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .gift-cell-q { font-size: 10px; color: #a98c52;} .gift-mask .pay-btns { justify-content: center;} .gift-mask .pay-cancel { flex: 0 0 132px; padding: 9px 0;} .gift-none { font-size: 12.5px; color: #8a7355; padding: 12px 2px;} .gift-none a { color: #a9751f; font-weight: 700; text-decoration: none;} .chat-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: linear-gradient(180deg, rgba(255, 248, 236, .97), #fff6e8); border-top: 1px solid var(--c-border); padding-bottom: env(safe-area-inset-bottom);} .chat-tools { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px var(--pad-x) 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;} .ctool { flex: 0 0 auto; border: 1px solid #dcc79b; background: #fffdf6; color: #6b4a22; border-radius: 999px; padding: 5px 10px; font-size: 12.5px; line-height: 1.25; font-family: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(150, 110, 40, .08);} .ctool:active { background: #f4e7cd;} .chat-bal { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; color: #a98c52; white-space: nowrap;} .chat-input { position: static; background: none; border: 0; padding: 0 0 9px;} .chat-input-inner { padding: 4px var(--pad-x) 0;} .chat-input textarea { background: #fffdf6;} .chat-emo { max-width: 720px; margin: 0 auto; padding: 8px var(--pad-x) 4px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; max-height: 32vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff8ec; border-top: 1px dashed rgba(196, 158, 90, .35);} .chat-emo[hidden] { display: none;} .emo-b { border: 0; background: none; font-size: 23px; line-height: 1.3; padding: 3px 0; cursor: pointer; border-radius: 8px; font-family: inherit;} .emo-b:active { background: #f4e7cd;} .pay-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 60; background: rgba(60, 40, 20, .38); display: flex; align-items: center; justify-content: center; padding: 0 24px;} .pay-mask[hidden] { display: none;} .pay-box { width: 100%; max-width: 330px; background: #fffdf7; border-radius: 16px; padding: 18px 16px 14px; box-shadow: 0 18px 44px rgba(90, 60, 20, .32); display: flex; flex-direction: column; gap: 9px;} .pay-box h3 { margin: 0; font-size: 16.5px; color: var(--c-title);} .pay-tip { margin: 0; font-size: 11.5px; color: #a98c52; line-height: 1.5;} .pay-box input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #dcc79b; background: #fffdf6; font-size: 14.5px; color: var(--c-text); font-family: inherit; outline: none;} .pay-box input:focus { border-color: #c9a45c;} .pay-btns { display: flex; gap: 9px; margin-top: 3px;} .pay-btns button { flex: 1; border: 0; border-radius: 10px; padding: 11px 0; font-size: 14.5px; font-family: inherit; font-weight: 600; cursor: pointer;} .pay-cancel { background: #f1e6cf; color: #6b4a22;} .pay-go { background: linear-gradient(180deg, #e8b64f, #cf9027); color: #fff; box-shadow: 0 2px 8px rgba(190, 130, 30, .3);} .pay-box input[type=number]::-webkit-outer-spin-button, .pay-box input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} .pay-box input[type=number] { -moz-appearance: textfield;} body.chatpage { overflow: hidden;} body.chatpage .topbar { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 100%; z-index: 6;} body.chatpage .chat { position: fixed; z-index: 2; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 720px; top: var(--ch-top, 54px); bottom: calc(var(--bn-h, 58px) + var(--dock-h, 96px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px var(--pad-x); box-sizing: border-box;} body.chatpage .chat-empty { min-height: 0;} body.chatpage .chat-dock { position: fixed; z-index: 4; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 720px; bottom: var(--bn-h, 58px); top: auto; box-shadow: 0 -3px 12px rgba(150, 110, 40, .07); padding-bottom: 4px;} body.chatpage .chat-emo { max-height: min(30vh, 240px);} body.chatpage .bottomnav { z-index: 7;} body.chatpage .bottom-space { display: none;} body.chatpage .site-footer { display: none;} .uc-game-card .uc-main { display: flex; align-items: flex-start; gap: 12px; padding: 0 14px;} .uc-game-card .uc-left { flex: 0 0 142px; width: 142px; height: 352px; margin-top: -46px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;} .uc-game-card .uc-left > * { flex: 0 0 auto;} .uc-game-card .uc-avatar { flex: 0 0 auto; align-self: center;} .uc-game-card .uc-avatar { width: 68px; height: 68px; margin: 0 auto; font-size: 22px;} .uc-game-card .uc-show { display: block; width: 142px; height: 160px; margin: 4px 0 0; padding: 0; text-decoration: none; border: 0; box-shadow: none; position: relative; z-index: 2; background: radial-gradient(ellipse 72% 64% at 50% 46%, rgba(240, 226, 199, .90) 0%, rgba(240, 226, 199, .40) 62%, rgba(240, 226, 199, 0) 100%);} .uc-game-card .uc-show img { display: block; width: 100%; height: 142px; object-fit: contain; object-position: bottom; -webkit-mask-image: radial-gradient(ellipse 64% 74% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 64% 74% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%);} .uc-game-card .uc-show.pet { width: 76%; height: 124px; margin: 12px 0 0; flex: 0 0 auto; display: block; background: radial-gradient(ellipse 64% 60% at 50% 54%, rgba(240, 226, 199, .86) 0%, rgba(240, 226, 199, .34) 64%, rgba(240, 226, 199, 0) 100%);} .uc-game-card .uc-show.pet img { height: 108px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 54%, #000 58%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 54%, #000 58%, rgba(0,0,0,0) 100%);} .uc-game-card .uc-pet-n { display: block; margin: 2px 0 0; padding: 0; height: 16px; font-size: 11px; font-weight: 700; line-height: 16px; color: #8a5a12; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .uc-game-card .uc-show-n { display: block; margin: 0 0 0; padding: 0; height: 18px; font-size: 12px; font-weight: 800; line-height: 18px; color: #8a5a12; text-align: center; background: none; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
@media (max-width: 360px) { .uc-game-card .uc-left { flex: 0 0 104px; width: 104px;} .uc-game-card .uc-show { width: 104px;} .uc-game-card .uc-pet-n { display: block; margin: 2px 0 0; padding: 0; height: 16px; font-size: 11px; font-weight: 700; line-height: 16px; color: #8a5a12; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .uc-game-card .uc-show-n { font-size: 11px;}}
@media (min-width: 361px) and (max-width: 389px) { .uc-game-card .uc-left { flex: 0 0 118px; width: 118px;} .uc-game-card .uc-show { width: 118px;}} .uc-game-card .uc-avatar img { width: 100%; height: 100%; object-fit: cover;} .uc-game-card .uc-right { flex: 1; min-width: 0; padding-top: 8px;} .uc-name-row { display: flex; align-items: center; gap: 8px; min-width: 0;} .uc-game-card .uc-name { margin: 0; padding: 0; text-align: left; flex: 0 1 auto; min-width: 0;} .g-lv { flex: 0 0 auto; font-size: 12px; font-weight: 800; line-height: 1; color: #fff; background: linear-gradient(135deg, #f59e0b, #b45309); padding: 5px 9px; border-radius: 8px; box-shadow: 0 2px 6px rgba(180, 83, 9, .28); letter-spacing: .3px;} .uc-game-card .uc-sub { text-align: left; padding: 0; margin-top: 3px;} .uc-game-card .uc-sign { text-align: left; padding: 0; margin-top: 2px;} .uc-game-card .uc-badges { justify-content: flex-start; padding: 0; margin-top: 10px;} .g-bars { margin-top: 14px;} .g-bar-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(clamp(52px, 15vw, 72px), max-content); column-gap: clamp(6px, 2vw, 10px); row-gap: clamp(8px, 2.4vw, 12px); align-items: center;} .g-lab { font-size: clamp(11px, 3.1vw, 13px); font-weight: 700; color: #7a6034; letter-spacing: .5px;} .g-track { position: relative; min-width: 0; height: clamp(11px, 3.4vw, 15px); border-radius: 8px; overflow: hidden; background: #ebe0c8; box-shadow: inset 0 1px 3px rgba(90, 50, 10, .20);} .g-track::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: .5; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 10%);} .g-fill { position: relative; height: 100%; border-radius: 8px; transition: width .35s ease;} .g-fill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));} .g-exp { background: linear-gradient(90deg, #f2a716, #d97706);} .g-hp { background: linear-gradient(90deg, #ef5350, #c62828);} .g-mp { background: linear-gradient(90deg, #4a90e2, #1d4ed8);} .g-val { font-size: clamp(11px, 3.1vw, 13px); font-weight: 800; text-align: right; line-height: 1.3; letter-spacing: .2px; font-variant-numeric: tabular-nums; white-space: nowrap;} .g-val-exp { color: #b45309;} .g-val-hp { color: #c62828;} .g-val-mp { color: #1d4ed8;} .g-zero { color: #9a8f7c !important;} .g-rule { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e6d3ab;} .g-chip { font-size: 11px; color: #8a6a45; background: #f6ecce; border: 1px solid #e6d3ab; border-radius: 999px; padding: 2px 8px; line-height: 1.55; font-variant-numeric: tabular-nums;} .g-dead { margin-top: 10px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; color: #b03a2e; background: #fdeeec; border: 1px solid #f2c3bd;} .g-bang { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: #c0392b; color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;} .g-dead b { color: #b03a2e; font-weight: 800;} .g-dead a { color: #b03a2e; font-weight: 700; text-decoration: none; border-bottom: 1px solid #e5a8a2; margin-left: 4px; white-space: nowrap;} .g-wrap { width: 100%; max-width: var(--w-narrow); margin: var(--gap) auto 0; padding: 0 var(--pad-x) 20px;} .g-head { padding: 4px 2px 10px;} .g-title { font-size: 19px; font-weight: 800; color: var(--c-title);} .g-sub { font-size: 12px; color: var(--c-muted); margin-top: 4px; line-height: 1.55;} .g-statbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 10px 12px; box-shadow: var(--shadow-sm);} .g-stat { flex: 1 1 26%; min-width: 68px; text-align: center;} .g-stat span { display: block; font-size: 11px; color: var(--c-muted);} .g-stat b { display: block; font-size: 15px; color: var(--c-accent); font-weight: 800; font-variant-numeric: tabular-nums;} .g-err, .g-ok { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;} .g-err { background: #fdeceb; border: 1px solid #f5c2c0; color: #b03a2e;} .g-ok { background: #e9f7ee; border: 1px solid #b7e4c7; color: #1b7a43;} .g-ok a { color: #1b7a43; font-weight: 700; text-decoration: underline;} .g-dead-bar { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; display: flex; align-items: center; gap: 8px; background: #fdeeec; border: 1px solid #f2c3bd; color: #b03a2e;} .g-dead-bar b { font-weight: 800;} .g-dead-bar a { color: #b03a2e; font-weight: 700; text-decoration: none; border-bottom: 1px solid #e5a8a2; margin-left: 4px; white-space: nowrap;} .g-filters { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 10px 0 2px; -webkit-overflow-scrolling: touch;} .g-filters::-webkit-scrollbar { display: none;} .g-flabel { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #9a8364; letter-spacing: .5px;} .g-fbtn { flex: 0 0 auto; border: 0; cursor: pointer; font-family: inherit; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f1e4c6; color: #8a6a45;} .g-fbtn.on { background: var(--c-accent); color: #fff;} .g-tbtn { flex: 0 0 auto; cursor: pointer; font-family: inherit; background: var(--c-surface); padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--c-border); color: #8a6a45;} .g-tbtn.on { border-color: var(--c-accent); background: #fdf3dc; box-shadow: 0 0 0 2px rgba(192, 57, 43, .12); color: var(--c-accent);} .g-tbtn.t-fan.on { border-color: #9ca3af; color: #4b5563; background: #f9fafb; box-shadow: 0 0 0 2px rgba(107,114,128,.12);} .g-tbtn.t-ling.on { border-color: #047857; color: #047857; background: #ecfdf5; box-shadow: 0 0 0 2px rgba(4,120,87,.12);} .g-tbtn.t-bao.on { border-color: #1d4ed8; color: #1d4ed8; background: #eff6ff; box-shadow: 0 0 0 2px rgba(29,78,216,.12);} .g-tbtn.t-xian.on { border-color: #b45309; color: #b45309; background: #fffbeb; box-shadow: 0 0 0 2px rgba(245,158,11,.16);} .g-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0 0;} .g-item { width: calc(50% - 5px); max-width: calc(50% - 5px); box-sizing: border-box; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 10px 10px 12px; text-align: center; box-shadow: var(--shadow-sm);} .g-tier { display: inline-block; font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 8px; border-radius: 7px; border: 1px solid transparent; margin-bottom: 8px;} .g-pic { width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 12px; overflow: hidden; background: #f6ead0; display: flex; align-items: center; justify-content: center;} .g-pic img { width: 100%; height: 100%; object-fit: cover; display: block;} .g-pic-ico { font-size: 34px; line-height: 1;} .g-name { font-size: 14px; font-weight: 800; color: var(--c-title); line-height: 1.35;} .g-name .g-qty { font-style: normal; font-size: 12px; color: var(--c-accent); margin-left: 6px; font-weight: 800;} .g-desc { font-size: 11px; color: var(--c-muted); line-height: 1.5; margin-top: 3px; min-height: 33px;} .g-price { font-size: 14px; font-weight: 800; color: #b03a2e; margin: 6px 0 8px; font-variant-numeric: tabular-nums;} .g-buy, .g-act { display: flex; align-items: center; gap: 6px; margin: 0;} .g-buy input, .g-act input[type=number] { width: 46px; flex: 0 0 46px; height: 34px; text-align: center; border: 1px solid var(--c-border); border-radius: 9px; background: #fff8ec; font-family: inherit; font-size: 13px; color: #5a3e2b; padding: 0 4px;} .g-buy-btn { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 9px; cursor: pointer; background: linear-gradient(135deg, #c0392b, #962d1f); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800;} .g-use-btn { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 9px; cursor: pointer; background: linear-gradient(135deg, #1b7a43, #146034); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800;} .g-act { margin-top: 6px;} .g-rec-btn { flex: 1; min-width: 0; height: 30px; border: 1px solid #e0cfab; border-radius: 9px; cursor: pointer; background: #fdf3dc; color: #8a6a45; font-family: inherit; font-size: 12px; font-weight: 700;} .g-bagbar { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--c-muted); padding: 10px 2px 0;} .g-bagbar a { color: var(--c-accent); font-weight: 700;} .g-empty { margin-top: 12px; padding: 26px 14px; text-align: center; font-size: 13px; color: var(--c-muted); background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--r-lg); line-height: 1.7;} .g-empty a { color: var(--c-accent); font-weight: 700;} .g-note { margin-top: 14px; font-size: 12px; color: var(--c-muted); line-height: 1.7;} .g-note a { color: var(--c-accent); font-weight: 700;} .g-status { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--shadow-sm);} .g-status-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px;} .g-status-tip { font-size: 11px; color: #9a8364; font-weight: 700;}
@media (max-width: 360px) { .g-item { width: 100%; max-width: 100%;} .g-chip { font-size: 10.5px; padding: 2px 7px;}} .g-filter-cat, .g-filter-tier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 10px 0 2px;} .g-filter-cat .g-fbtn, .g-filter-tier .g-tbtn { width: 100%; min-width: 0; padding: 7px 2px; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;} .g-filter-tier { grid-template-columns: repeat(4, minmax(0, 1fr));} .g-grid-cell { gap: 8px;} .g-cell { position: relative; box-sizing: border-box; flex: 0 0 auto; width: calc(33.333% - 5.34px); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 24px 6px 8px; text-align: center; box-shadow: var(--shadow-sm);} .g-ctier { position: absolute; top: 5px; left: 5px; font-size: 9px; font-weight: 800; line-height: 1; padding: 2px 5px; border-radius: 5px; border: 1px solid transparent;} .g-cpic { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 10px; overflow: hidden; background: #f6ead0; display: flex; align-items: center; justify-content: center;} .g-cpic img { width: 100%; height: 100%; object-fit: cover; display: block;} .g-cname { font-size: 12px; font-weight: 800; color: var(--c-title); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .g-cfx { font-size: 10px; color: #9a8364; line-height: 1.4; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .g-cprice { font-size: 11px; font-weight: 800; color: #b03a2e; margin: 5px 0 5px; font-variant-numeric: tabular-nums;} .g-cbuy { margin: 0;} .g-cbuy-btn { width: 100%; height: 27px; border: 0; border-radius: 8px; cursor: pointer; background: linear-gradient(135deg, #c0392b, #962d1f); color: #fff; font-family: inherit; font-size: 11px; font-weight: 800;}
@media (min-width: 560px) { .g-cell { width: calc(25% - 6px);}} .g-bagbar { background: var(--c-surface); border:1px solid var(--c-border); border-radius: 12px; padding:10px 12px; margin-top:10px; font-weight:700; color:#5a3e2b;} .g-bag-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:6px; padding:10px 0;} .g-bag-cell { background: var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:6px 4px; text-align:center; position:relative; box-shadow: var(--shadow-sm);} .g-bag-cell .g-pic { width:48px; height:48px; margin:0 auto 4px; border-radius:8px;} .g-bag-cell .g-pic-ico { font-size:24px;} .g-bag-cell .g-bag-name { font-size:10px; font-weight:700; color:var(--c-title); line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .g-bag-cell .g-bag-qty { position:absolute; top:2px; right:4px; background:#c0392b; color:#fff; font-size:10px; font-weight:800; border-radius:6px; padding:1px 4px; min-width:16px;} .g-bag-cell form { margin-top:4px;} .g-bag-cell .g-use-btn { height:24px; font-size:10px; border-radius:6px; padding:0 4px;} .g-bag-cell .g-pic-link { display:block;} .g-bag-cell .g-bag-tag { display:block; margin-top:4px; font-size:10px; font-weight:800; line-height:1.5; color:#8a5a12; background:#fdf3dd; border:1px solid var(--c-border-2); border-radius:6px; padding:1px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .g-bag-cell .g-bag-tag.on { background:#8a5a12; border-color:#8a5a12; color:#fff8e6;} .g-bag-cell .g-use-btn.col { background:linear-gradient(135deg,#c08a1e,#8a5a12);} .g-bag-cell .g-recy { display:block; width:100%; margin:3px 0 0; padding:2px 0; border:0; background:none; font-family:inherit; font-size:9.5px; font-weight:800; line-height:1.3; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#a26a3c; text-decoration:underline; text-underline-offset:2px;} .g-bag-cell .g-recy:hover { color:#8a4f24;}
@media (max-width: 360px) { .g-bag-grid { grid-template-columns: repeat(3, minmax(0,1fr));} .g-bag-cell .g-pic { width:42px; height:42px;}} .home-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 10px 14px; max-width: var(--w-page); margin: 0 auto;} .home-pager .hpg-btn, .home-pager .hpg-disabled { border: 1px solid var(--c-border-2); border-radius: 999px; padding: 6px 18px; font-size: 13px; font-weight: 600; line-height: 1.4; background: var(--c-surface); color: #8a5a24; white-space: nowrap;} .home-pager .hpg-btn:active { background: #f3e6c4;} .home-pager .hpg-disabled { color: #b7a37e; background: #f6ecd2;} .home-pager .hpg-info { font-size: 13px; color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums;}
@media (max-width: 330px) { .home-pager { gap: 8px;} .home-pager .hpg-btn, .home-pager .hpg-disabled { padding: 5px 13px;}} .pv-box{margin:8px 0 14px;border:1px dashed var(--c-border-2);border-radius:12px;background:var(--c-surface-2);overflow:hidden} .pv-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:8px 12px;border-bottom:1px dashed var(--c-border);font-size:13px;color:var(--c-title);font-weight:600} .pv-head em{font-style:normal;font-size:11px;color:var(--c-muted);font-weight:400} .pv-body{padding:10px 12px 12px;max-height:340px;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:14px;line-height:1.75;color:var(--c-text);word-break:break-word} .pv-body p{margin:0} .pv-fig{margin:8px 0;text-align:center} .pv-fig img{max-width:100%;max-height:260px;width:auto;height:auto;object-fit:contain;border-radius:10px;display:inline-block}
@media (max-width:420px){.pv-body{max-height:300px;padding:9px 10px 10px;font-size:13.5px}} .pay-set{margin:10px 0 14px;border:1px dashed var(--c-border-2);border-radius:12px;background:var(--c-surface-2);overflow:hidden} .pay-set-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:9px 12px;border-bottom:1px dashed var(--c-border)} .pay-set-head b{font-size:13px;color:var(--c-title)} .pay-set-head em{font-style:normal;font-size:11px;color:var(--c-muted)} .pay-set-body{padding:10px 12px 12px} .pay-tabs{display:flex;gap:6px;flex-wrap:wrap} .pay-tab{flex:1 1 0;min-width:82px;padding:8px 10px;border:1px solid var(--c-border-2);border-radius:9px;background:#fffdf6;color:var(--c-text);font-size:12.5px;cursor:pointer;transition:all .15s} .pay-tab.on{background:linear-gradient(135deg,#c0392b,#a5322a);border-color:#a5322a;color:#fff;box-shadow:0 4px 12px rgba(192,57,43,.25)} .pay-row{display:flex;flex-wrap:wrap;gap:9px 12px;align-items:center;margin-top:10px} .pay-row.hide{display:none} .pay-f{display:flex;align-items:center;gap:6px;min-width:0} .pay-f label{font-size:12.5px;color:var(--c-muted);white-space:nowrap} .pay-f input[type=number]{width:66px;padding:7px 9px;border:1px solid var(--c-border-2);border-radius:8px;background:#fffdf6;color:var(--c-title);font-size:13px} .pay-f .pay-coin{font-size:12.5px;color:var(--c-muted);white-space:nowrap} .pay-f:first-child{flex:0 1 auto} .pay-f:last-child{flex:1 1 130px} .pay-f select{width:100%;max-width:124px;padding:7px 6px;border:1px solid var(--c-border-2);border-radius:8px;background:#fffdf6;color:var(--c-text);font-size:12.5px} .pay-tip{margin:10px 0 0;font-size:11.5px;line-height:1.7;color:var(--c-muted)} .ap{position:relative;margin:20px 0 8px;padding:20px 18px 16px;border-radius:16px;overflow:hidden; background:linear-gradient(158deg,#241809 0%,#3a2614 44%,#2b1c0f 72%,#1e1408 100%); border:1px solid rgba(214,178,116,.55); box-shadow:0 14px 34px rgba(60,32,10,.30),inset 0 1px 0 rgba(255,238,198,.16)} .ap-glow{position:absolute;left:-20%;right:-20%;top:-70px;height:170px;pointer-events:none; background:radial-gradient(58% 100% at 50% 100%,rgba(232,190,112,.30),rgba(232,190,112,0) 72%)} .ap-top{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center} .ap-seal{font-size:10.5px;letter-spacing:.2em;color:#f6dfae;border:1px solid rgba(240,214,160,.55);border-radius:3px;padding:2px 7px;background:rgba(255,220,150,.06)} .ap-kicker{font-size:10.5px;color:rgba(246,223,174,.60);letter-spacing:.03em} .ap-title{position:relative;margin:14px 0 7px;font-size:21px;font-weight:800;letter-spacing:.10em;color:#fdf0cf; text-shadow:0 2px 12px rgba(255,197,99,.22)} .ap-sub{position:relative;margin:0 0 16px;font-size:12.5px;line-height:1.8;color:rgba(255,240,209,.72)} .ap-price{position:relative;display:flex;align-items:baseline;gap:8px;margin:0 0 15px} .ap-num{font-size:36px;line-height:1;font-weight:800;color:#ffd89a;font-variant-numeric:tabular-nums; text-shadow:0 3px 16px rgba(255,186,80,.40)} .ap-coin{font-size:12.5px;letter-spacing:.08em;color:rgba(255,214,150,.82)} .ap-form{position:relative;margin:0} .ap-btn{display:block;width:100%;padding:13px 16px;border:0;border-radius:12px;cursor:pointer; font-size:15px;font-weight:800;letter-spacing:.08em;color:#2c1a08; background:linear-gradient(135deg,#f7d694 0%,#ddab55 48%,#c68c37 100%); box-shadow:0 10px 24px rgba(198,140,55,.38),inset 0 1px 0 rgba(255,248,220,.60)} .ap-btn:active{transform:translateY(1px);box-shadow:0 5px 14px rgba(198,140,55,.32)} .ap-foot{position:relative;margin:12px 0 0;font-size:10.5px;letter-spacing:.02em;color:rgba(255,236,198,.55)}
@media (max-width:420px){ .ap{padding:16px 14px 14px;border-radius:14px} .ap-title{font-size:19px} .ap-num{font-size:31px} .ap-btn{font-size:14px;padding:12px 14px} .pay-tab{min-width:0;font-size:12px;padding:7px 8px} .pay-row label{font-size:12px}}