:root {
  --main-bg: #faf8f7;
  --header-bg: #fff;
  --primary: #fa425a;
  --accent: #fff4f7;
  --border: #f0f0f0;
  --radius: 16px;
  --shadow: 0 2px 10px rgba(0,0,0,0.07);
  --tab-text: #6c6c6c;
  --avatar-bg: #f3c4c4;
}
body { margin:0; background:var(--main-bg); font-family:'PingFang SC','Hiragino Sans GB',Arial,sans-serif; color:#222;}
.tl-header{background:var(--header-bg);position:sticky;top:0;z-index:10;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--border);box-shadow:var(--shadow);}
.tl-logo{color:var(--primary);font-weight:bold;font-size:1.5rem;letter-spacing:2px;}
.tl-header-nav{display:flex;align-items:center;gap:10px;} #user-panel{font-size:0.98rem;}
#user-panel a{color:var(--primary);margin:0 6px;text-decoration:none;}
#msg-icon img{width:28px;vertical-align:middle;cursor:pointer;}
.tl-tabbar{background:#fff;border-top:1px solid var(--border);position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;height:54px;}
.tl-tab{flex:1;text-align:center;color:var(--tab-text);font-size:1.08rem;line-height:54px;text-decoration:none;transition:color 0.16s;position:relative;}
.tl-tab.active,.tl-tab:hover{color:var(--primary);font-weight:bold;background:var(--accent);}
.tl-main{max-width:660px;margin:0 auto;padding:12px 0 66px 0;min-height:80vh;}
.tl-page{display:none;}.tl-page.active{display:block;}
@media (min-width:660px){.tl-main,.tl-header{border-left:1.5px solid #eee;border-right:1.5px solid #eee;}}
.tl-card{background:#fff;border:1px solid var(--border);transition:box-shadow .2s;position:relative; border-radius:16px; box-shadow:0 2px 12px #fa425a22; margin-bottom:18px; padding:10px;}
.tl-card-header { background: #fff4f7; border-radius: 10px 10px 0 0; padding: 10px 12px 7px 12px;display:flex;align-items:center;gap:8px; }
.tl-card-nickname { color: #fa425a; font-weight: bold; font-size: 1.08rem; letter-spacing: 1px; }
.tl-card-time { color: #b3b3b3; font-size: 0.93rem; margin-left: 8px;}
.tl-imgwall, .dynamic-images { margin: 8px 0 0 0; }
.tl-imgwall { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.tl-imgwall img { width:100%; border-radius:8px; }
.like-btn,.comment-btn,.join-btn{cursor:pointer;color:#fa425a;}
.join-btn[title]:hover::after, .like-btn[title]:hover::after { content: attr(title); position: absolute; left: 50%; top: -28px; transform: translateX(-50%); background: #222; color: #fff; padding: 2px 8px; border-radius: 6px; font-size: 0.92rem; white-space: nowrap; z-index: 99;}
.apply-list { background-color: #f8f8f8; padding: 10px;}
.tl-avatar{cursor:pointer;transition:box-shadow .2s}
.tl-avatar:hover{box-shadow:0 0 0 2px #b2b2b2;}
.tl-avatar img{width:32px;height:32px;border-radius:50%;border: 1.5px solid #b5b5b5;padding: 3px;}
.like-btn.liked img { filter:none; }
.like-btn-icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; background-size: contain; background-repeat: no-repeat;}
.like-btn.liked .like-btn-icon { background-image: url('/assets/like-red.svg');}
.like-btn.unliked .like-btn-icon {background-image: url('/assets/like.svg');}
.tl-card .tl-avatar{width:40px; height:40px; border-radius:50%;display:inline-block;vertical-align:middle;overflow:hidden;margin-right:10px;}
.tl-card .tl-card-title{font-weight:bold;font-size:1.11rem;margin-bottom:8px;}
.tl-card .tl-card-meta{font-size:0.99rem;color:#888;margin-bottom:5px;}
.tl-card .tl-card-content { background: #fff; border-radius: 0 0 12px 12px; padding: 13px 12px 12px 12px; font-size: 1.13rem; color: #373737; line-height: 1.7; font-family: 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif; }
.tl-card .tl-card-tags{font-size:0.92rem;margin-bottom:6px;}
.tl-tag{display:inline-block;background:var(--accent);color:var(--primary);border-radius:8px;padding:2px 8px;margin-right:5px;font-weight:500;}
.tl-card .tl-card-actions{display:flex;align-items:center;gap:16px;margin-top:8px;}
.tl-card .tl-card-actions span{color:#b3b3b3;cursor:pointer;font-size:1rem;transition:color .14s;}
.tl-card .tl-card-actions span.active,.tl-card .tl-card-actions span:hover{color:var(--primary);}
.tl-form label{display:block;font-size:0.97rem;margin-bottom:6px;color:#444;}
.tl-form input,.tl-form textarea,.tl-form select{width:100%;border:1px solid #ddd;border-radius:7px;padding:8px 10px;margin-bottom:13px;font-size:1rem;box-sizing:border-box;resize:none;transition:border 0.14s;background:#fafafc;}
.tl-form input:focus,.tl-form textarea:focus,.tl-form select:focus{outline:none;border-color:var(--primary);}
.tl-form button{width:100%;background:var(--primary);color:#fff;border:none;border-radius:9px;padding:11px 0;font-size:1.11rem;font-weight:bold;letter-spacing:1px;cursor:pointer;transition:background 0.13s;}
.tl-form button:hover{background:#e14b59;}
.del-btn{background:none;border:none;color:#b3b3b3;cursor:pointer;margin-left:auto;}
.tl-imgwall{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:6px 0;}
.tl-card-tags{margin:4px 0;}
.tl-tag{display:inline-block;background:#f5f5f5;color:#fa425a;border-radius:4px;padding:2px 7px;font-size:.92em;margin-right:4px;}
.app-status{position:absolute;right:-2px;bottom:-2px;font-size:1.1em;}
.tl-avatar{position:relative;}
.comment-list{max-height:180px;overflow:auto;}
.comment-item{padding:4px 0;border-bottom:1px solid #f0f0f0;}
#comment-modal textarea { width: 96%; min-height: 70px; border-radius: 10px; border: 1.5px solid #fa425a; padding: 10px; font-size: 1.08rem; margin-bottom: 12px; background: #fff4f7; resize: vertical;}
#comment-modal button { width: 100%; background: #fa425a; color: #fff; border: none; border-radius: 8px; padding: 10px 0; font-size: 1.08rem; font-weight: bold; cursor: pointer;}
@media (max-width:500px){.tl-main,.tl-form,.tl-card{margin-left:0;margin-right:0;}.tl-card{padding-left:8px;padding-right:8px;}}
@media (max-width:600px){.tl-header,.tl-main{padding-left:2vw;padding-right:2vw;}}
#tl-toast{display:none;position:fixed;z-index:9999;left:50%;top:14%;transform:translate(-50%,0);background:rgba(255,255,255,0.98);color:var(--primary);border-radius:27px;box-shadow:0 2px 8px rgba(0,0,0,0.08);padding:15px 34px;font-size:1.15rem;text-align:center;}
#tl-modal{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.23);z-index:1200;display:flex;align-items:center;justify-content:center;}
#tl-modal .tl-form label { font-weight: bold; color: #fa425a; }
#tl-modal .tl-form input, #tl-modal .tl-form select, #tl-modal .tl-form textarea { border: 1.5px solid #cdcdcd; border-radius: 8px; margin-bottom: 10px; font-size: 1.05rem; }
#tl-modal .tl-form button { background: #fa425a; color: #fff; border-radius: 8px; font-size: 1.12rem; font-weight: bold;}
.tl-modal-content{background:#fff;border-radius:18px;min-width:78vw;max-width:410px;padding:23px 19px 16px 19px;box-shadow:0 8px 32px rgba(0,0,0,0.12);}
.tl-modal-title{font-weight:bold;font-size:1.16rem;margin-bottom:16px;color:var(--primary);}
.tl-modal-content h3{margin:0 0 18px 0;font-size:1.18rem;font-weight:bold;color:#222;}
.tl-modal-content label{display:block;margin-bottom:8px;color:#666;font-size:1.02rem;}
.tl-modal-content input[type="text"],.tl-modal-content input[type="number"]{width:100%;padding:10px 12px;margin-bottom:16px;border:1px solid #e0e0e0;border-radius:7px;font-size:1.08rem;box-sizing:border-box;}
.tl-modal-content .modal-btns{display:flex;justify-content:flex-end;gap:14px;}
.tl-modal-content button{padding:8px 22px;border-radius:7px;border:none;font-size:1.05rem;cursor:pointer;background:#fa425a;color:#fff;font-weight:bold;transition:background 0.16s;}
.tl-modal-content button.cancel{background:#eee;color:#666;}
.tl-modal-content button:hover:not(.cancel){background:#e14b59;}
.tl-modal-content button.cancel:hover{background:#ddd;}
.tl-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0!important;display:flex;align-items:center;justify-content:center;background:#ececec!important;border:none;border-radius:50%!important;font-size:1.3rem;color:#555;cursor:pointer;transition:background 0.16s;}
.tl-modal-close:hover{background:#fa425a!important;color:#fff;}
#withdraw-amount{width:100%;padding:12px 16px;margin-bottom:18px;border:1.5px solid #fa425a;border-radius:8px;font-size:1.22rem;font-weight:bold;color:#fa425a;background:#fff8fa;box-sizing:border-box;transition:border 0.15s;}
#withdraw-amount:focus{outline:none;border-color:#e14b59;background:#fff;}
.tl-modal-content{position:relative;}
.tl-avatar-sm{width:24px;height:24px;border-radius:50%;background:var(--accent);object-fit:cover;display:inline-block;vertical-align:middle;margin-right:4px;}
.tl-btn {display: inline-block;padding: 10px 28px;font-size: 1.08rem;border-radius: 9px;border: none;background: var(--accent);color: var(--primary);font-weight: bold;cursor: pointer;transition: background 0.18s, color 0.18s;box-shadow: 0 1px 4px rgba(250,66,90,0.06);margin-bottom: 8px;}
.tl-btn-primary {background: var(--primary);color: #fff;}
.tl-btn:hover, .tl-btn-primary:hover {background: #e14b59;color: #fff;}
.mine-profile{background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,0.07);padding:24px 18px 18px 18px;margin:22px 12px 24px 12px;display:flex;align-items:center;gap:18px;border:1px solid #f0f0f0;}
.mine-profile .mine-avatar{width:72px;height:72px;border-radius:50%;background:#f3c4c4;object-fit:cover;box-shadow:0 2px 8px rgba(250,66,90,0.10);border:3px solid #fa425a;}
.mine-profile .mine-info{flex:1;}
.mine-profile .mine-name{font-size:1.28rem;font-weight:bold;color:#222;margin-bottom:7px;}
.mine-profile .mine-meta{font-size:1.02rem;color:#888;}
.mine-balance{font-size:1.18rem;color:#fa425a;font-weight:bold;margin:12px 0;}
#withdraw-btn{display:inline-block;padding:10px 32px;font-size:1.12rem;border-radius:10px;border:none;background:#fa425a;color:#fff;font-weight:bold;cursor:pointer;box-shadow:0 1px 4px rgba(250,66,90,0.08);transition:background 0.18s;}
#withdraw-btn:hover{background:#e14b59;}
#page-mine{max-width:420px;margin:0 auto;}
@media(max-width:500px){.mine-profile{margin-left:0;margin-right:0;padding-left:10px;padding-right:10px;}}
.tl-input{width:100%;padding:12px 16px;margin-bottom:14px;border:1.5px solid #1976d2;border-radius:8px;font-size:1.08rem;color:#1976d2;background:#f7faff;box-sizing:border-box;transition:border 0.15s;}
.tl-input:focus{outline:none;border-color:#1256a3;background:#fff;}
.withdraw-records-title{margin:22px 0 8px 0;font-size:1.05rem;font-weight:bold;color:#333;}
.withdraw-records{width:100%;border-collapse:collapse;background:#fafbfc;border-radius:7px;overflow:hidden;font-size:0.98rem;}
.withdraw-records th,.withdraw-records td{padding:7px 8px;text-align:center;}
.withdraw-records th{background:#f0f2f5;color:#666;}
.withdraw-records tr:nth-child(even){background:#f7f7f7;}
.withdraw-records tr:nth-child(odd){background:#fff;}
.withdraw-records td{color:#444;}
.withdraw-records td:last-child{font-weight:bold;}
.masonry { display: flex; gap: 12px; }
.masonry > div { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.dynamic-card { margin-bottom: 0 !important; }
.comment-item { padding: 7px 0; border-bottom: 1px solid #f0f0f0; font-size: 1rem; }
#comment-list { max-height: 260px; overflow-y: auto; margin-bottom: 10px; }
.icon-like:before { content: "👍"; margin-right: 2px; }
.icon-comment:before { content: "💬"; margin-right: 2px; }
.like-btn.active { color: var(--primary); font-weight: bold; }
.fab-post-btn {position: fixed;right: 24px;bottom: 80px;width: 56px;height: 56px;border-radius: 50%;background: var(--primary, #2d8cf0);color: #fff;font-size: 36px;border: none;box-shadow: 0 2px 8px rgba(0,0,0,0.18);z-index: 1001;cursor: pointer;transition: background 0.2s;}
.fab-post-btn:hover {background: #1976d2;}
.dynamic-list { display: flex; flex-direction: column; gap: 16px; margin: 16px 0;}
.dynamic-card { border: 1px solid #eee; border-radius: 8px; background: #fff; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.03);}
.img-viewer-mask { position: fixed; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,0.85); z-index: 2000; }
.img-viewer-content { position: fixed; left:0; top:0; right:0; bottom:0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2001; }
#img-viewer-img { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 2px 16px #0006; }
.img-viewer-close { position: absolute; right: 32px; top: 32px; font-size: 32px; background: none; border: none; color: #fff; cursor: pointer; }
.img-viewer-prev, .img-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; background: none; border: none; color: #fff; cursor: pointer; padding: 0 16px; }
.img-viewer-prev { left: 32px; }
.img-viewer-next { right: 32px; }
@media (max-width: 600px) { .img-viewer-close, .img-viewer-prev, .img-viewer-next { font-size: 24px; }}
.dynamic-img-thumb {max-width:100%; max-height: 200px; aspect-ratio:1/1;border-radius: 8px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.05); margin-bottom: 12px; cursor: pointer; transition: transform 0.2s;}}
.emoji-picker { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);}
.emoji-picker span { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", sans-serif; font-size: 28px; line-height: 1.2; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: pointer; margin: 2px; transition: transform 0.1s;}
.emoji-picker span:hover { transform: scale(1.2); background: #f0f0f0; border-radius: 4px;}
.mine-page{max-width:480px;margin:0 auto;padding:0 0 32px 0;background:#f7f8fa;min-height:100vh;}
.mine-header{display:flex;align-items:center;padding:32px 24px 16px 24px;background:#fff;border-bottom:1px solid #eee;}
.mine-avatar{width:72px;height:72px;border-radius:50%;border:2px solid #e0e0e0;background:#fafbfc;margin-right:20px;}
.mine-header-info{flex:1;}
.mine-name{font-size:22px;font-weight:bold;margin-bottom:8px;}
.mine-id{color:#888;font-size:14px;}
.mine-section{background:#fff;margin:18px 0 0 0;padding:20px 24px;border-radius:0;box-shadow:none;}
.mine-meta,.mine-balance{font-size:16px;margin-bottom:12px;}
.mine-btn{display:inline-block;padding:8px 28px;background:#2d8cf0;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;margin-top:8px;}
.mine-btn:hover{background:#1976d2;}