:root {
  --face: #c0c0c0;
  --light: #dfdfdf;
  --shadow: #808080;
  --title1: #000080;
  --title2: #1084d0;
  --font: 13px "SimSun", "宋体", "Songti SC", "STSong", serif;
  --desk: #008080;          /* 桌面背景 */
  --sel-bg: var(--title1);  /* 选中、悬停的高亮 */
  --sel-fg: #fff;
  --notice-bg: #000;
  --notice-fg: #ffff00;
}
/* 主题：每个主题在 themes/ 里有一个文件，用 html[data-theme="…"] 覆盖这里的样式。默认就是 Win98 */

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* 不让 display:flex 之类的样式盖过 hidden */

body {
  margin: 0;
  height: 100vh;
  background: var(--desk);
  font: var(--font);
  color: #000;
}

/* ---- Win98 基础部件 ---- */
.window {
  background: var(--face);
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px #fff;
  padding: 3px;
}
.titlebar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, var(--title1), var(--title2));
  color: #fff; font-weight: bold;
  padding: 3px 4px; height: 22px;
}
.inset {
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px var(--shadow),
              inset -2px -2px var(--light), inset 2px 2px #0a0a0a;
}
button {
  font: var(--font);
  background: var(--face);
  border: none;
  padding: 4px 12px;
  min-width: 64px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  cursor: pointer;
}
button:active:not(:disabled) {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
              inset -2px -2px var(--light), inset 2px 2px var(--shadow);
}
button:disabled { color: var(--shadow); text-shadow: 1px 1px #fff; cursor: default; }
.titlebar .x { min-width: 0; width: 18px; height: 16px; padding: 0; font-weight: bold; line-height: 14px; }

input, select, textarea {
  font: var(--font);
  border: none;
  padding: 3px 4px;
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px var(--shadow),
              inset -2px -2px var(--light), inset 2px 2px #0a0a0a;
}
input[type=color] { padding: 2px; height: 24px; width: 60px; }
textarea { resize: vertical; }
fieldset { border: 1px solid var(--shadow); box-shadow: 1px 1px #fff; padding: 4px 6px 6px; margin: 0; }

/* ---- 首页 ---- */
body.lobby #win { display: none; }
body:not(.lobby) #lobby { display: none; }
/* 4:3 横向小窗口，居中；左栏是自己的资料和按钮，右栏是好友和聊天室列表 */
#lobby {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(520px, 42vw, 760px); aspect-ratio: 4 / 3;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  display: grid; grid-template-columns: 170px 1fr; grid-template-rows: auto 1fr auto; gap: 6px;
}
#lobby .titlebar { grid-column: 1 / -1; }
#lobby .me { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 4px 4px; min-height: 0; }
#lobby .me .avatar { width: 100%; }
#lobby .me .avatar .ph { font-size: 56px; }
#lobby .me .info { display: flex; flex-direction: column; gap: 4px; }
#lobby .me .nm { font-weight: bold; text-align: center; }
#lobby .me select { width: 100%; }
#lobby .groups { grid-column: 2; grid-row: 2 / 4; overflow-y: auto; padding: 3px; margin: 0 4px 4px 0; }
.gh { padding: 3px 4px; cursor: pointer; font-weight: bold; user-select: none; }
.grp ul { list-style: none; margin: 0 0 4px; padding: 0; }
.grp.closed ul { display: none; }
.row { display: flex; gap: 8px; padding: 4px 6px; cursor: pointer; align-items: center; }
.row:hover { background: var(--sel-bg); }
.row:hover * { color: var(--sel-fg) !important; }
.row .avatar { width: 36px; flex: none; }
.row .avatar .ph { font-size: 18px; }
.row .info { flex: 1; min-width: 0; }
.row .nm { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .pv { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .tm { font-size: 11px; color: #888; align-self: flex-start; }
.room-icon { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--title1); }
.lobby-bar { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 4px; padding: 0 2px 4px 4px; }

/* ---- 资料卡 ---- */
#dlg-card { width: 380px; }
.card-top { display: flex; gap: 12px; align-items: flex-start; }
.card-top .avatar { width: 120px; flex: none; cursor: default; }
.card-top .avatar .ph { font-size: 48px; }
.card-fields { border-collapse: collapse; flex: 1; }
.card-fields th { text-align: right; font-weight: normal; color: #444; padding: 4px 8px 4px 0; white-space: nowrap; vertical-align: top; }
.card-fields td { padding: 4px 0; word-break: break-all; }
.card-sig { min-height: 1.5em; word-break: break-word; }
#card-sig-hist summary { cursor: pointer; font-size: 12px; color: #444; margin-top: 4px; }
#card-sig-list { max-height: 160px; margin-top: 4px; }
#card-sig-list li { padding: 2px 4px; word-break: break-word; }
.sh-time { color: #888; font-size: 12px; margin-right: 8px; }
.sh-cur { color: #888; font-size: 12px; margin-left: 4px; }
.sig-new { display: inline-block; margin-left: 4px; padding: 0 3px; font-size: 10px; line-height: 14px; color: #fff; background: #e02020; border-radius: 3px; font-weight: bold; }
.empty { color: var(--shadow); }
.row .sig { font-weight: normal; color: #888; font-size: 12px; margin-left: 6px; }
.clickable, #lobby-me .avatar, #lobby-friends .avatar { cursor: pointer; }

/* ---- 空间 ---- */
.space-head { display: flex; gap: 10px; align-items: center; }
.space-head .avatar { width: 56px; flex: none; }
.space-head .avatar .ph { font-size: 28px; }
.space-head .nm { font-weight: bold; font-size: 15px; }
.visitors { font-size: 12px; color: #555; margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.visitors .vis { display: inline-flex; align-items: center; gap: 3px; }
.visitors .avatar { width: 18px; flex: none; }
.visitors .avatar .ph { font-size: 10px; }
.plikes { font-size: 12px; color: #c03060; margin-top: 2px; }
.post .pops a[data-like] { color: #c03060; }
#visit-wrap { display: inline-flex; gap: 4px; }
.space-sig { color: #666; font-size: 12px; margin-top: 2px; }
.feed { height: 340px; overflow-y: auto; padding: 4px 10px; }
.post { padding: 8px 0; border-bottom: 1px dashed var(--face); }
.post .ptime { color: var(--shadow); font-size: 12px; }
.post .ptext { margin: 3px 0; line-height: 1.6; word-break: break-word; }
.pdesc button { min-width: 0; padding: 1px 8px; font-size: 12px; margin-left: 6px; vertical-align: middle; }
.msg .pdesc { display: inline-block; padding: 4px 8px; font-size: 12px; color: #555; background: #f4f4f4; border: 1px dashed var(--shadow); }
.post .pdesc { display: inline-block; max-width: 280px; margin-top: 3px; padding: 6px 8px; font-size: 12px; color: #555; background: #f4f4f4; border: 1px dashed var(--shadow); }
.post .pops { font-size: 12px; text-align: right; }
.post .pops a { color: #00c; text-decoration: underline; cursor: pointer; }
.feed .empty { padding: 20px 0; text-align: center; }
#space-input, #space-btitle { width: 100%; }
/* 空间里的迷你播放器：屏幕是 Winamp 那种黑底绿字 */
.player { margin-left: auto; width: 310px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.pl-screen { display: flex; gap: 6px; padding: 3px 6px; background: #0b1a0b; color: #3cff5a; border: 1px solid #000; font: 12px "Courier New", monospace; overflow: hidden; }
.pl-title { flex: 1; overflow: hidden; white-space: nowrap; }
/* 一打开就能看到歌名，停一下再往左滚 */
.pl-title span { display: inline-block; padding-right: 100%; animation: plscroll 14s linear infinite; }
@keyframes plscroll { 0%, 15% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.pl-bar { display: flex; gap: 3px; align-items: center; }
.pl-bar button { min-width: 0; padding: 1px 6px; font-size: 12px; }
#player input[type=range] { padding: 0; border: none; box-shadow: none; background: transparent; outline: none; }
#pl-seek { flex: 1; min-width: 40px; }
#pl-vol { width: 56px; }
.pl-time { font-size: 11px; color: var(--shadow); }
#pl-note { margin-left: 8px; color: #c06000; }
.pl-panel { max-height: 190px; overflow-y: auto; padding: 4px 6px; }
#pl-songs { list-style: none; margin: 0 0 4px; padding: 0; font-size: 12px; }
#pl-songs li { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
#pl-songs .sn { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pl-songs li.cur .sn { font-weight: bold; color: var(--title1); }
#pl-songs .sf { color: var(--shadow); }
#pl-songs a { color: #00c; text-decoration: underline; cursor: pointer; }
#pl-songs:empty::before { content: "歌单还是空的"; color: var(--shadow); }
#space-btitle { margin-bottom: 4px; font-weight: bold; }
#space-compose .check { display: flex; align-items: center; gap: 4px; }
.blog .btitle { font-weight: bold; font-size: 14px; cursor: pointer; margin-top: 2px; }
.blog .btitle:hover { text-decoration: underline; }
.blog .bprev { color: #555; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog .blogtext p { margin: 6px 0; line-height: 1.75; text-indent: 2em; }
.blog .blogtext s { color: #888; }
.blog.private .btitle { color: #7a4b00; }
.post .pops a + a { margin-left: 10px; }
.cmts { margin-top: 6px; padding: 4px 8px; background: #f6f6f6; border-left: 3px solid var(--face); font-size: 12px; }
.cmt { margin: 3px 0; line-height: 1.5; word-break: break-word; }
.cmt .ctime { color: var(--shadow); margin-left: 4px; }
.cmt a { color: #c00; cursor: pointer; margin-left: 4px; display: none; }
.cmt:hover a { display: inline; }
.cbar { display: flex; gap: 4px; margin-top: 4px; }
.cbar .cin { flex: 1; min-width: 0; }
.cbar button { min-width: 0; padding: 2px 8px; }

/* ---- 主窗口 ---- */
#win {
  position: fixed; inset: 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.toolbar { display: flex; align-items: center; gap: 4px; padding: 2px; }
.toolbar .sep { width: 2px; height: 20px; margin: 0 6px; border-left: 1px solid var(--shadow); border-right: 1px solid #fff; }
#notice { background: var(--notice-bg); color: var(--notice-fg); padding: 3px 0; }

.main { flex: 1; display: flex; gap: 4px; min-height: 0; }
.logwrap { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabs { display: flex; gap: 2px; padding-left: 4px; }
.tab { min-width: 0; padding: 3px 14px; position: relative; top: 2px; }
.tab.sel { font-weight: bold; top: 0; padding-bottom: 5px; z-index: 1; }
#log.private { background: #fffbea; }
.side { overflow-y: auto; min-height: 0; }
#log {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  line-height: 1.5;
}
.side { width: 200px; display: flex; flex-direction: column; gap: 4px; }
.side fieldset { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.side fieldset:last-child { flex: 1; }
.list { list-style: none; margin: 0; padding: 3px; overflow-y: auto; }
.avatar { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar .ph { font-size: 56px; color: var(--face); }
.profile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.profile .pname { font-weight: bold; }
.profile .pstatus { font-size: 12px; color: #008000; }
#side-members { flex: 1; }
#members { flex: 1; min-height: 80px; }
#members li { display: flex; align-items: center; gap: 6px; padding: 3px 2px; }
#members .avatar { width: 32px; flex: none; }
#members .avatar .ph { font-size: 16px; }
#members .info { flex: 1; min-width: 0; }
#members .nm { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#members .pstatus { font-size: 11px; color: #008000; }
#members button { min-width: 0; padding: 2px 6px; font-size: 12px; flex: none; }
.msg.sysmsg { color: #888; font-size: 12px; }
.typing { color: #888; font-size: 12px; padding-top: 2px; }
.typing .dots i { font-style: normal; animation: typing-dot 1.2s infinite; }
.typing .dots i:nth-child(2) { animation-delay: .2s; }
.typing .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .15; } 30% { opacity: 1; } }
#group-members:empty::before { content: "还没有角色，先去“角色卡”里新建一个"; }
#chats { height: 320px; }
#chats li { gap: 8px; align-items: baseline; }
#chats li .ct { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#chats li .cm { color: var(--shadow); font-size: 12px; }
#chats li a { color: #00c; text-decoration: underline; font-size: 12px; }
#chats li.sel .cm, #chats li.sel a { color: #fff; }
.menuwrap { position: relative; }
.menu { position: absolute; bottom: calc(100% + 2px); left: 0; min-width: 230px; z-index: 10; }
.mi { padding: 4px 20px; cursor: default; }
.mi:hover { background: var(--sel-bg); color: var(--sel-fg); }
.msep { margin: 3px 2px; border-top: 1px solid var(--shadow); border-bottom: 1px solid #fff; }
.buttons .grow { flex: 1; }
.brief { padding: 4px 6px; line-height: 1.5; font-size: 12px; min-height: 40px; }
.brief .muted { color: var(--shadow); }
.brief .memo-warn { color: #c00000; margin-top: 2px; }
.ev { display: flex; gap: 4px; margin-bottom: 4px; }
.ev input[type=date] { width: 140px; }
.ev .evtext { flex: 1; }
.ev button { min-width: 0; padding: 2px 8px; }
.list li { padding: 1px 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list li:hover { text-decoration: underline; }
.list li.sel { background: var(--sel-bg); color: var(--sel-fg) !important; }
.list li.me { cursor: default; text-decoration: none; }

/* ---- 消息 ---- */
.msg { margin: 2px 0; word-break: break-word; }
.msg .time { color: var(--shadow); }
.msg .text i { color: #666; }
.msg .ops { display: none; font-size: 12px; margin-left: 6px; }
.msg:hover .ops { display: inline; }
.msg .ops a { color: #00c; text-decoration: underline; cursor: pointer; margin-right: 4px; }
.msg textarea.edit { display: block; width: 100%; min-height: 80px; margin: 4px 0; }
.msg.typing .text::after { content: "▌"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* 聊天和说说里的图片：左对齐的小缩略图，点击放大 */
.pic { display: block; max-width: 220px; max-height: 220px; width: auto; height: auto; margin: 4px 0 2px; border: 1px solid var(--shadow); cursor: zoom-in; object-fit: contain; }
.picwrap { display: flex; align-items: flex-start; gap: 6px; }
.reroll { min-width: 0; width: 26px; height: 24px; padding: 0; margin-top: 4px; font-size: 14px; line-height: 1; }
dialog.lightbox { padding: 0; border: none; background: transparent; box-shadow: none; max-width: 96vw; max-height: 96vh; overflow: visible; }
#lightbox::backdrop { background: rgba(0, 0, 0, .78); }  /* 用 id，压过各主题的 dialog::backdrop */
#lightbox, #lightbox:focus, #lightbox:focus-visible { outline: none; }
dialog.lightbox img { display: block; max-width: 92vw; max-height: 88vh; box-shadow: 0 8px 30px rgba(0, 0, 0, .6); cursor: zoom-out; }
dialog.lightbox .lb-cap { color: #eee; text-align: center; font-size: 13px; margin-top: 8px; }
.pics { display: flex; gap: 6px; flex-wrap: wrap; }
.pics .pp { position: relative; }
.pics .pp img { height: 64px; display: block; border: 1px solid var(--shadow); }
.pics .pp button { position: absolute; top: -6px; right: -6px; min-width: 0; padding: 0 5px; font-size: 11px; }
#input.drop { outline: 2px dashed var(--title1); }
.msg .think { color: #666; background: #f4f4f4; border-left: 3px solid #c0c0c0; padding: 2px 8px; margin: 4px 0; font-size: 12px; }
.sys { color: #cc0000; }
.offline-sep { text-align: center; color: var(--shadow); font-size: 12px; margin: 8px 0 4px; }
.msg.shake-msg { color: #c06000; font-weight: bold; }
#win.shaking { animation: winshake .55s linear; }
@keyframes winshake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-9px, 3px); } 20% { transform: translate(8px, -4px); }
  30% { transform: translate(-7px, -3px); } 40% { transform: translate(7px, 4px); }
  50% { transform: translate(-6px, 2px); } 60% { transform: translate(5px, -3px); }
  70% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -2px); }
  90% { transform: translate(-2px, 1px); }
}
.err { color: #cc0000; font-weight: bold; }

/* ---- 输入区 ---- */
.inputbar { display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.who { color: #000080; }
#input { height: 70px; width: 100%; }
.buttons { display: flex; gap: 6px; justify-content: flex-end; }
.statusbar {
  padding: 2px 6px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px var(--shadow);
}

/* ---- 对话框 ---- */
dialog { border: none; padding: 3px; width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
dialog.wide { width: 760px; }
dialog.xwide { width: 960px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.checks:empty::before { content: "还没有世界书"; color: var(--shadow); }
dialog::backdrop { background: rgba(0, 0, 0, .25); }
dialog .body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: calc(100vh - 80px); }
dialog .split { flex-direction: row; align-items: flex-start; }
dialog label { display: flex; flex-direction: column; gap: 2px; }
dialog label.check { flex-direction: row; align-items: center; gap: 6px; }
dialog .inline { display: flex; gap: 4px; }
dialog .inline input { flex: 1; }
.listcol { width: 180px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.listcol select { width: 100%; }
.split form { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.hint { margin: 0; color: #444; font-size: 12px; }
.result { min-height: 40px; max-height: 140px; overflow-y: auto; padding: 6px; white-space: pre-wrap; word-break: break-all; }
.result:empty { display: none; }

@media (max-width: 640px) {
  #lobby { width: calc(100vw - 32px); aspect-ratio: auto; height: calc(100vh - 32px); grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  #lobby .me { grid-row: 2; flex-direction: row; align-items: center; }
  #lobby .me .avatar { width: 52px; flex: none; }
  #lobby .me .avatar .ph { font-size: 26px; }
  #lobby .me .info { flex: 1; }
  #lobby .groups { grid-column: 1; grid-row: 3; margin: 0 4px; }
  #lobby .lobby-bar { grid-row: 4; flex-direction: row; flex-wrap: wrap; }
  .side { display: none; }
  dialog .split { flex-direction: column; }
  .listcol { width: 100% !important; }
}
#dlg-world .listcol + .listcol { width: 240px; }