:root{--dark:#15161c;--dark2:#26283a;--gold:#f0b90b;--purple:#6b1e91;--purple2:#4a1364;--blue:#2f6690;--bg:#e9e6ee;--card:#fff;--border:#cfcbd6;--text:#1c1e21;--sub:#6b7280;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme=xanh]{--purple:#1d5fa8;--purple2:#123f73;--gold:#ffb300;--blue:#1d5fa8;--bg:#e4ebf3;--dark:#0e2a47;--dark2:#1b4670;--border:#c3d0de}
:root[data-theme=hong]{--purple:#c2185b;--purple2:#8e0e3f;--gold:#ffc107;--blue:#c2185b;--bg:#f4e6ec;--dark:#3a1226;--dark2:#5c1d3d;--border:#dcc3cf}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*{box-sizing:border-box}
body{margin:0;min-height:100%;color:var(--text);font:13px Tahoma,Verdana,Arial,sans-serif;
  background:var(--bg) repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 2px,transparent 2px 6px)}
a{color:var(--blue);cursor:pointer;text-decoration:none}a:hover{text-decoration:underline}
button,select,input,textarea{font-family:inherit;font-size:12px}
.hidden{display:none!important}

header{background:linear-gradient(180deg,var(--dark2),var(--dark));border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px)}
.headbar{display:flex;align-items:center;gap:10px;padding:6px 12px;max-width:940px;margin:0 auto;flex-wrap:wrap}
.logo{font:bold 22px Georgia,serif;color:#fff;letter-spacing:-1px;cursor:pointer;text-shadow:1px 1px 0 #000}
.logo span{color:var(--gold)}
.search{flex:1;min-width:130px;max-width:210px}
.search input{width:100%;padding:5px 8px;border-radius:12px;border:1px solid #111;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
nav.tabs{display:flex;gap:2px;overflow-x:auto;max-width:100%}
nav.tabs button{background:none;border:0;color:#d0d2dc;padding:9px 10px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-9px}
nav.tabs button:hover{color:#fff}
nav.tabs button.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:bold}
.headicons{display:flex;gap:8px;margin-left:auto;align-items:center}
.xu{color:var(--gold);font-weight:bold;white-space:nowrap}
.icon-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:3px;padding:4px 8px;position:relative}
.badge{position:absolute;top:-6px;right:-6px;background:#e0245e;color:#fff;border-radius:8px;font-size:9px;padding:1px 5px;font-weight:bold}
.dropdown{display:none;position:absolute;right:0;top:32px;background:#fff;border:1px solid var(--border);width:270px;box-shadow:2px 3px 8px rgba(0,0,0,.35);max-height:320px;overflow-y:auto;color:var(--text)}
.dropdown.open{display:block}
.dropdown h4{margin:0;padding:7px 10px;background:linear-gradient(#fff,#ece9f1);border-bottom:1px solid var(--border);font-size:12px}
.notif-item{padding:7px 10px;border-bottom:1px solid #eee;font-size:11px}
.notif-item.unread{background:#fff7d6}
.userchip{display:flex;align-items:center;gap:6px;color:#fff}

.wrap{max-width:940px;margin:0 auto;display:flex;gap:12px;padding:12px;align-items:flex-start}
.col-left{width:205px;flex-shrink:0}
.col-center{flex:1;min-width:0}
@media(max-width:760px){.wrap{flex-direction:column}.col-left{width:100%;order:2}.col-center{width:100%;order:1}}

.box{background:var(--card);border:1px solid var(--border);border-radius:3px;box-shadow:1px 1px 0 rgba(0,0,0,.08);margin-bottom:12px;overflow:hidden}
.box h3{margin:0;padding:7px 10px;background:linear-gradient(#fff,#ebe7f0);border-bottom:1px solid var(--border);font-size:12px;color:var(--purple2)}
.box .body{padding:9px 10px}
.btn{display:inline-block;border:1px solid #a9a6b3;background:linear-gradient(#fff,#e2dfe8);border-radius:3px;padding:4px 9px;color:#333;cursor:pointer}
.btn:hover{background:linear-gradient(#fff,#d6d2df)}
.btn.p{background:linear-gradient(var(--purple),var(--purple2));border-color:var(--purple2);color:#fff;font-weight:bold}
.btn.p:hover{filter:brightness(1.15)}
input,textarea,select{border:1px solid var(--border);border-radius:3px;padding:5px 6px;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold);outline-offset:-1px}

.avatar{border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;flex-shrink:0;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
.avatar img{width:100%;height:100%;object-fit:cover}
.profile-card{text-align:center;padding:14px 10px}
.profile-card .avatar{width:96px;height:96px;font-size:30px;margin:0 auto 6px}
.stars{color:var(--gold);letter-spacing:2px}
.profile-name{font-weight:bold;font-size:15px;margin:3px 0}
.mood-line{color:var(--sub);font-size:11px;margin-bottom:8px;min-height:14px}
.profile-btns{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.tools{display:flex;flex-direction:column;gap:6px}
.tools label{font-size:11px;color:var(--sub);display:flex;flex-direction:column;gap:3px}
.tools .btn{text-align:left}
.info-row{display:flex;padding:3px 0;font-size:11px;border-bottom:1px dotted #ddd}
.info-row b{margin-left:auto}
.empty-note{color:var(--sub);padding:10px;font-size:12px}

.status-line{font-style:italic;background:#fffbe6;border:1px dashed #d8c36a;border-radius:3px;padding:8px 10px}
.status-time{color:var(--sub);font-size:10px;margin-top:3px}
.status-edit{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.status-edit input{flex:1;min-width:120px}
.composer .titlein{width:100%;margin-bottom:6px;font-weight:bold}
.composer textarea{width:100%;min-height:54px;resize:vertical}
.composer-actions{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.composer-actions .p{margin-left:auto}
.emoji-panel{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px;padding:4px;background:#f6f4f9;border:1px solid var(--border);border-radius:3px}
.emoji-panel button{border:0;background:none;font-size:18px;cursor:pointer;border-radius:3px}.emoji-panel button:hover{background:#fff1b8}
.preview-media img,.preview-media video{max-width:100%;max-height:180px;margin-top:6px;border:3px solid #fff;box-shadow:0 0 0 1px var(--border)}

.post{border-bottom:1px solid #eee;padding:11px}
.post:last-child{border-bottom:0}
.post-head{display:flex;gap:8px;align-items:center}
.post-head .avatar{width:38px;height:38px;font-size:14px}
.post-name{font-weight:bold;color:var(--purple2)}
.post-badge{background:var(--purple);color:#fff;font-size:9px;padding:1px 5px;border-radius:2px;margin-left:6px;font-weight:normal}
.post-time{color:var(--sub);font-size:10px}
.post-title{font-weight:bold;font-size:14px;margin-top:6px;color:var(--purple2)}
.post-text{margin:5px 0;white-space:pre-wrap;word-break:break-word}
.post-media img,.post-media video{max-width:100%;max-height:420px;border:3px solid #fff;box-shadow:0 0 0 1px var(--border);margin:4px 0;cursor:pointer}
.post-actions{display:flex;gap:12px;border-top:1px dotted var(--border);margin-top:6px;padding-top:6px;flex-wrap:wrap}
.post-actions button{background:none;border:0;color:var(--sub);font-weight:bold;padding:0}
.post-actions button:hover{color:var(--blue);text-decoration:underline}
.post-actions .liked{color:var(--blue)}
.comment-box{margin-top:6px;display:flex;gap:6px}.comment-box input{flex:1}
.comment-box button{border:0;background:none;color:var(--blue);font-weight:bold}
.comment{font-size:12px;background:#f3f1f6;border-left:3px solid var(--gold);padding:4px 8px;margin-top:4px}
.comment b{color:var(--purple2)}.comment .cx{float:right;color:#aaa;cursor:pointer}
.edit-box textarea{width:100%;margin-top:4px}

.new-group{display:flex;gap:6px;padding:9px 10px;border-bottom:1px solid var(--border);background:#faf9fc}.new-group input{flex:1}
.row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid #f0eef3}
.row:last-child{border-bottom:0}.row .avatar{width:34px;height:34px;font-size:12px}
.row .grow{flex:1}.row .nm{font-weight:bold;color:var(--purple2)}.row .sub{font-size:10px;color:var(--sub)}
.row.click{cursor:pointer}.row.click:hover{background:#faf6e6}
.dot{width:9px;height:9px;border-radius:50%;background:#bbb;flex-shrink:0}.dot.on{background:#42b72a}

#photoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:10px}
#photoGrid .ph{aspect-ratio:1;background:#000 center/cover;border:3px solid #fff;box-shadow:0 0 0 1px var(--border);cursor:pointer;position:relative;overflow:hidden}
#photoGrid .ph img,#photoGrid .ph video{width:100%;height:100%;object-fit:cover}
#photoGrid .ph i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-style:normal}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;border:6px solid #fff}

.chat-dock{position:fixed;bottom:0;right:8px;display:flex;gap:8px;align-items:flex-end;z-index:60;max-width:96vw;padding-bottom:env(safe-area-inset-bottom,0px)}
.chat-win,.chat-list{width:260px;max-width:92vw;background:#fff;border:1px solid #888;border-bottom:0;border-radius:4px 4px 0 0;box-shadow:0 -2px 6px rgba(0,0,0,.2);flex-shrink:0}
.chead{background:linear-gradient(var(--purple),var(--purple2));color:#fff;padding:6px 10px;font-weight:bold;display:flex;justify-content:space-between;border-radius:3px 3px 0 0;cursor:pointer}
.chat-win .chead span.x{cursor:pointer}
.chat-body{height:260px;overflow-y:auto;padding:8px;background:#f7f6fa}
.chat-list .lst{max-height:260px;overflow-y:auto}
.cmsg{margin-bottom:5px;max-width:82%;padding:4px 8px;border-radius:8px;word-break:break-word}
.cmsg.me{background:var(--blue);color:#fff;margin-left:auto}.cmsg.them{background:#e4e2ea}
.chat-input{display:flex;border-top:1px solid var(--border)}.chat-input input{flex:1;border:0;border-radius:0}

footer{text-align:center;color:var(--sub);font-size:11px;padding:16px 10px 70px}
.visits{margin-bottom:8px}
.visits b{display:inline-block;background:#111;color:#7CFC00;font:bold 13px 'Courier New',monospace;padding:1px 5px;margin:0 1px;border-radius:2px;border:1px solid #444}
::selection{background:var(--purple);color:#fff}
.who{cursor:pointer;font-weight:bold;color:var(--purple2)}
#cVis{padding:4px}