:root {
  --u: clamp(18px, 3vh, 26px);

  --bg:        #F5F5F5;
  --surface:   #FFFFFF;
  --sidebar:   #F7F8FA;
  --ctxbar:    #FAFBFC;
  --line:      #E3E7EC;
  --line-ctl:  #DDE2E8;
  --line-mid:  #C7CEDA;
  --sel:       #EDF0F4;
  
  --surface-2: #F5F7FA;

  --primary:   #495467;
  --ink:       #1B222C;
  --ink-2:     #5A6472;
  --ink-3:     #8A95A5;
  --brand:     #F6C6AD;
  --link:      #0073E6;
  --ok:        #289018;
  --danger:    #DC253E;

  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
button { font: inherit; cursor: pointer; }

.topbar {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 8px 14px; position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--primary);
  font-weight: 700; font-size: 16px; flex: none; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand .ico { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1);
  image-rendering: pixelated; object-fit: contain; }
.wikisw { display: flex; align-items: center; gap: 8px; background: #F1F3F6;
  border: 1px solid var(--line-ctl); border-radius: 7px; padding: 4px 10px; color: #2A313C; flex: none; }
.wikisw .dot { width: 8px; height: 8px; border-radius: 50%; background: #3FAE6A; }
.wikisw .txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.wikisw .txt b { font-size: 13.5px; }
.wikisw .txt em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.caret { font-size: 10px; color: var(--ink-3); }

.wikiswwrap { position: relative; flex: none; }
.wikisw[aria-expanded="true"] { background: var(--sel); border-color: var(--line-mid); }

.wikimenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 248px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(20, 26, 36, .18); }
.wikimenu button { display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 8px 10px; border: none; border-radius: 7px;
  background: transparent; text-align: left; color: var(--ink); }
.wikimenu button:hover { background: var(--sel); }
.wikimenu button.on { background: var(--sel); }

.wikimenu button.on b::before { content: "●"; color: #3FAE6A; font-size: 9px;
  vertical-align: middle; margin-right: 5px; }
.wikimenu button b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.wikimenu button em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

.wikisep { height: 1px; margin: 4px 6px; background: var(--line); }
.wikimore { position: relative; }
.wikimenu .wikimore > button { flex-direction: row; align-items: center;
  justify-content: space-between; gap: 8px; width: 100%; }

.wikimore > button .arw { flex: none; width: 17px; height: 17px; margin-right: -2px;
  color: var(--ink-3); transition: transform .14s ease; }
.wikimore > button:hover .arw { color: var(--ink-2); }
.wikimore.on > button b::before { content: "●"; color: #3FAE6A; font-size: 9px;
  vertical-align: middle; margin-right: 5px; }

.wikisub { display: none; position: absolute; left: calc(100% + 12px); top: -5px; z-index: 61;
  flex-direction: column; gap: 2px; min-width: 248px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(20, 26, 36, .18); }
.wikisub::before { content: ""; position: absolute; left: -14px; top: 0; width: 14px; height: 100%; }
.wikimore.open > .wikisub { display: flex; }
.wikimore.open > button .arw { transform: rotate(90deg); }

@media (hover: hover) {
  .wikimore:hover > .wikisub { display: flex; }
  .wikimore:hover > button { background: var(--sel); }
  .wikimore:hover > button .arw { transform: rotate(90deg); }
}
.tbspacer { flex: 1; }

.pagetitle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--primary); white-space: nowrap;
  pointer-events: none; }
.pagetitle:empty { display: none; }
.pagetitle img { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4);
  image-rendering: auto; object-fit: contain; }

.pagetitle img.ptico { image-rendering: pixelated; }
.tbnav { display: flex; color: var(--ink-2); font-size: 13px;
  align-items: center; flex: none; margin-left: auto; }
.tbitems { display: flex; gap: 16px; align-items: center; }
.tbitems > span, .tbitems > a { cursor: pointer; color: var(--ink-2); }
.tbitems > span:hover, .tbitems > a:hover { color: var(--primary); }

.tbmore { display: none; }      

.tbitems .avatar { margin-left: 6px; }

.avatar { cursor: pointer; display: flex; align-items: center; justify-content: center;
  user-select: none; font-weight: 700; box-sizing: border-box;
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line-ctl);
  background: var(--surface-2); color: var(--ink-3); font-size: 15px; }
.avatar svg { width: 20px; height: 20px; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.avatar:hover { background: #DDE3EA; border-color: #C3CCD6; }

.avatar.signed { background: var(--brand); color: #5A3B28;
  border-color: color-mix(in srgb, var(--brand) 72%, #000); }

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.signed:hover { filter: brightness(1.05); background: var(--brand); }

.acctov .m3dovin { width: min(392px, 100%); }

.ntov .m3dovin { width: min(760px, 100%); }
.ntov .edtbody { min-height: 220px; max-height: 52vh; }

.acctov .m3dovhd { border-bottom: 0; padding-bottom: 0; min-height: 34px; }
.acctov .lyrbody { padding: 4px 26px 24px; }
.acct { display: flex; flex-direction: column; gap: 13px; }
.acthd { text-align: center; margin-bottom: 4px; }
.acthd b { display: block; font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.acthd em { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.actf { display: flex; flex-direction: column; gap: 5px; }

.acct [hidden] { display: none !important; }

.actf > span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.actf input { font: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--line-ctl); border-radius: 9px;
  background: var(--surface); color: var(--ink); }
.actf input::placeholder { color: #A8B2BE; }
.actf input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }

.actmsg { display: none; font-size: 12.5px; line-height: 1.6; color: #B4453C;
  background: #FDF1F0; border-radius: 8px; padding: 8px 10px; }
.actmsg.on { display: block; }
.actbtn { font: inherit; font-size: 15px; font-weight: 600; padding: 10px 0;
  background: var(--primary); color: #fff; border: 0; border-radius: 9px; cursor: pointer; }
.actbtn:hover { filter: brightness(1.06); }
.actbtn:disabled { opacity: .55; cursor: default; }
.actbtn.ghost { background: var(--surface); color: #B4453C;
  border: 1px solid var(--line-ctl); }
.actbtn.ghost:hover { background: #FDF1F0; filter: none; }
.actswap { display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.actlink { font: inherit; font-size: 13px; background: none; border: 0; padding: 0;
  color: var(--link); cursor: pointer; }
.actlink:hover { text-decoration: underline; }
.actlink.sub { margin-left: auto; color: var(--ink-3); }

.prof { gap: 14px; }

.profav { position: relative; width: 84px; height: 84px; margin: 2px auto 2px;
  border-radius: 50%; overflow: hidden; box-sizing: border-box;
  border: 1px solid var(--line-ctl); }
.acctav { display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden;
  border-radius: 50%; background: var(--brand); color: #5A3B28;
  font-family: inherit; font-weight: 700; line-height: 1; -webkit-appearance: none; }
.acctav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profav .acctav { width: 100%; height: 100%; font-size: 32px; }
.profav .avmask { position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,26,36,.62); color: #fff; font-size: 11.5px;
  opacity: 0; transition: opacity .14s; cursor: pointer; }
.profav:hover .avmask { opacity: 1; }

.profrow { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line); }

.profrow .k { flex: none; width: 58px; color: var(--ink-3); }
.profrow .v { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; }
.profrow .v.mail { font-weight: 400; word-break: break-all; }
.vbadge { flex: none; font-size: 11px; padding: 1px 7px; border-radius: 20px;
  background: #FDF1F0; color: #B4453C; }
.vbadge.ok { background: #E7F3EC; color: #2E7D46; }

.profedit { display: flex; align-items: center; gap: 8px; margin-top: -6px; }
.profedit input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--primary); border-radius: 8px;
  background: var(--surface); color: var(--ink); }
.profedit input:focus { outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.actbtn.tiny { flex: none; font-size: 13px; padding: 7px 14px; border-radius: 8px; }

.cropov .m3dovin { width: min(324px, 100%); }
.crop { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.cropstage { position: relative; width: 260px; height: 260px; margin: 0 auto;
  border-radius: 10px; overflow: hidden; background: #EEF1F4; touch-action: none; }
.cropstage canvas { display: block; cursor: grab; }
.cropstage canvas.grab { cursor: grabbing; }

.cropring.sq { border-radius: 12px; }
.cropring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(248,250,252,.78);
  border: 2px solid #fff; }
.croprow { display: flex; align-items: center; gap: 10px; }
.croprow .k { flex: none; font-size: 12.5px; color: var(--ink-3); }
.croprow input[type=range] { flex: 1; min-width: 0; accent-color: var(--primary); }
.cropft { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 720px) {
  .acctov { padding: 0; align-items: flex-end; }
  .acctov .m3dovin { width: 100%; height: auto; max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .acctov .lyrbody { padding: 4px 18px 18px; }
  
  .actf input, .profedit input { font-size: 16px; padding: 11px 12px; }
  .actbtn { padding: 12px 0; }
  .acthd b { font-size: 19px; }
  
  .cropov .m3dovin { width: 100%; }
  .cropstage { width: min(260px, calc(100vw - 76px));
    height: min(260px, calc(100vw - 76px)); }
  .profav { width: 76px; height: 76px; }
  .profav .acctav { font-size: 29px; }
}

.ctx { position: relative;
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  background: var(--ctxbar); border-bottom: 1px solid var(--line);
  padding: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.ctx > .act { flex: none; }

.ctxscroll { flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ctxscroll.atstart {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.ctxscroll:active { cursor: grabbing; }
.ctxscroll::-webkit-scrollbar { display: none; }

.ctxnav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-ctl);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font: 15px/1 inherit; padding: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); z-index: 2; }
.ctxnav:hover { background: var(--surface-2); color: var(--ink); }
.ctxnav.l { left: 96px; }        
.ctxnav.r { right: 6px; }
.ctxnav[hidden] { display: none; }

.ctx .plus { color: #A6B0BD; flex: none; }
.ctx .chipl { flex: none; white-space: nowrap; }

.layerbadge { background: #F6C6AD; color: #5A3B28; font-size: 11.5px; font-weight: 700;
  border-radius: 20px; padding: 2px 9px; flex: none;
  border: 0; font-family: inherit; cursor: pointer; line-height: 1.5; }
.layerbadge:hover { filter: brightness(1.04); }
.chipl { background: var(--surface); border: 1px solid var(--line-ctl);
  border-radius: 20px; padding: 2px 10px; color: #39414E; }
.chipl.base { border-color: var(--primary); font-weight: 700; }

.ctx .act { color: var(--link); background: none; cursor: pointer;
  border: 1px solid var(--link); border-radius: 20px; padding: 2px 10px;
  font: inherit; line-height: 1.5; }
.ctx .act:hover { background: var(--link); color: #fff; }

.lyrov .m3dovin { width: min(940px, 100%); }
.lyrov .m3dovhd b { font-weight: 700; }
.lyrov .m3dovhd b em { font-style: normal; font-weight: 400; font-size: 13px;
  color: var(--ink-3); margin-left: 8px; }

.lyrbody { padding: 12px 14px 10px; text-align: left; overflow-y: auto; }

.lyrov .m3dovin { height: min(780px, 92vh); }

.lyrov .m3dovin:has(.lyrview) { width: min(640px, 100%); height: min(560px, 92vh); }
.lyrov .lyrbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.lyrcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px; flex: 1; min-height: 0; }
.lyrcol { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.lyrct { font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 2px 4px 5px;
  display: flex; align-items: center; gap: 6px; min-height: 30px; }
.lyrct em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 0;
  font-size: 11px; }

.lyrct > .lyrq { margin-left: auto; flex: 0 1 190px; min-width: 0; }

.lyrct > .lyrbase { margin-left: auto; flex: none; padding: 0; font-weight: 400; }
.lyrdrop { border: 1px dashed var(--line-ctl); border-radius: 9px;
  padding: 4px; display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto; position: relative; }

.lyrdrop[data-side="on"] { gap: 10px; background: #FAFCFF; }
.lyrdrop[data-side="on"] .lyrrow { position: relative; }

.lyrrow.bnd { background: var(--surface-2); border-style: dashed; }

.lyrmv { position: relative; z-index: 1; flex: none;
  display: none; flex-direction: column; gap: 3px; }
.lyrmvb { font: inherit; font-size: 9px; line-height: 1; padding: 3px 5px; cursor: pointer;
  color: var(--ink-3); background: var(--bg-2, #F4F6F9);
  border: 1px solid var(--line-ctl, #DDE2E8); border-radius: 5px; }
.lyrmvb:hover { color: var(--primary); border-color: var(--primary); }
.lyrmvb:active { transform: translateY(1px); }

.lyrdrop:not([data-side="on"]) .lyrmv { opacity: .25; pointer-events: none; }
.lyrrow.bnd .lyrgrip { opacity: .75; font-size: 12px; }
.lyrrow.bnd:hover { border-color: var(--primary); }
.lyrrow.bnd:hover .lyrgrip { opacity: 1; color: var(--primary); }

.lyrdrop[data-side="on"] .lyrrow::before { content: ''; position: absolute;
  left: 0; right: 0; top: -6px; bottom: -6px; }

.lyrdrop.empty::before { content: attr(data-empty); position: absolute;
  left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none;
  text-align: center; color: var(--ink-3); font-size: 12px; }
.lyrdrop.overcol { border-color: var(--primary); background: #F5F8FF; }

.lyrrow { display: flex; align-items: center; gap: 7px; padding: 6px 7px;
  border: 1px solid var(--line-ctl); border-radius: 8px; background: var(--surface);
  cursor: grab; }
.lyrrow:hover { background: #F3F5F8; }
.lyrrow:active { cursor: grabbing; }

.lyrghost { flex: none; border: 2px dashed var(--primary); border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-sizing: border-box;
  
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 0 6px; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; color: var(--primary); }

.lyrghost.adj { border-color: #E3B341; color: #8A6D1F;
  background: color-mix(in srgb, #E3B341 12%, transparent); }
@media (prefers-reduced-motion: reduce) {
  
  .lyrrow { transition: none !important; }
}
.lyrbd { min-width: 0; }
.lyrbd b { display: block; color: #1B222C; font-weight: 600; }
.lyrbd em { display: block; font-style: normal; font-family: var(--mono);
  font-size: 11.5px; color: var(--ink-3); }

.lyrrow.view { cursor: default; }
.lyrrow.view:hover { background: var(--surface); }
.lyrview { display: flex; flex-direction: column; gap: 10px; }
.lyrvbase { font-size: 12.5px; color: var(--ink-3); }
.lyrvbase b { color: var(--ink); font-weight: 600; margin-left: 4px; }

.lyrvlist { display: flex; flex-direction: column; gap: 6px;
  max-height: 52vh; overflow-y: auto; }
.lyrempty { padding: 10px 8px; color: var(--ink-3); line-height: 1.8; }
.lyrfoot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 6px 2px; border-top: 1px solid var(--line); margin-top: 6px; }

.lyrmsg { flex: 1; min-width: 0; color: #B4453C; font-size: 12px; line-height: 1.6; }

.lyrmsg.ok { color: var(--ink-3); }
.lyracts { flex: none; display: flex; align-items: center; gap: 8px; }
.lyrapply { flex: none; background: var(--primary); color: #fff; border: 0;
  border-radius: 7px; padding: 5px 14px; font: inherit; cursor: pointer; }
.lyrapply:hover { filter: brightness(1.08); }

.lyrfavadd { flex: none; border: 1px solid var(--line-ctl); background: var(--surface);
  color: var(--ink); border-radius: 7px; padding: 5px 13px; font: inherit; cursor: pointer; }
.lyrfavadd:hover:not(:disabled) { background: var(--sel); border-color: var(--primary); }
.lyrfavadd:disabled { opacity: .5; cursor: not-allowed; }

.lyrfav { flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 0 9px; margin: 0 0 9px; border-bottom: 1px solid var(--line); }
.lyrfav > label { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-2); }

.lyrfav select { flex: 0 1 480px; min-width: 0; font: inherit; font-size: 13px;
  padding: 6px 9px; border: 1px solid var(--line-ctl); border-radius: 7px;
  background: var(--surface); color: var(--ink); }
.lyrfav select:focus { outline: none; border-color: var(--primary); }
.lyrfav select:disabled { opacity: .6; }

.lyrbase { flex: none; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 3px 6px; padding: 0; font-size: 11px; color: var(--ink-3); }
.lyrbase b { color: var(--ink-2); font-weight: 700; font-size: 12px; }

.lyrbase em { font-style: normal; font-size: 10.5px; padding: 0 7px; border-radius: 20px;
  background: #FDF6E3; color: #8A6D1F; white-space: nowrap; }

@media (max-width: 720px) {
  
  .lyrcols { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .lyrdrop { min-height: 64px; }

  .lyrov .m3dovin { height: 100%; }
  
  .lyrov .m3dovin:has(.lyrview) { height: min(620px, 92vh); }
  .lyrbody { padding: 10px 10px 8px; }
  
  .lyrfav > label { display: none; }
  .lyrfav { padding-bottom: 8px; margin-bottom: 8px; }
  .lyrfav select { flex: 1 1 auto; padding: 7px 9px; }
  .lyrbase { padding-bottom: 8px; }
  
  .lyrfavadd, .lyrapply { padding: 7px 14px; }
}

.shell { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: calc(100vh - 84px); }
.side { background: var(--sidebar); border-right: 1px solid var(--line);
  display: block; padding: 10px 0; height: fit-content;
  position: sticky; top: 44px; align-self: start; }
.side .nav { margin: 0; }
.nav { display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  color: var(--ink-2); font-size: 15px; border-left: 3px solid transparent; }
.nav .ico { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); flex: none;
  image-rendering: pixelated; object-fit: contain; }
.nav.on .ico, .nav:hover .ico { filter: none; }
.nav:hover { background: #F0F2F5; }
.nav.on { background: var(--sel); color: var(--primary); font-weight: 700; border-left-color: var(--primary); }

.side.detailnav .nav { padding: 8px 16px; line-height: 1.4; }
.side.detailnav .nav.sec { cursor: pointer; }
.main { min-width: 0; }

.fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--line); padding: 9px 14px; }
.fsel { background: var(--surface); border: 1px solid var(--line-mid); border-radius: 7px;
  padding: 5px 10px; font-size: 13px; color: #39414E; display: inline-flex;
  align-items: center; gap: 6px; white-space: nowrap; position: relative; }
.fsel.on { border-color: var(--primary); color: var(--ink); font-weight: 700; }

.fsel.tinted { border-color: var(--pc); border-width: 1.5px; color: var(--ink); }
.fsel.tinted .n { background: var(--pc); color: var(--pfg); }
.fsel .n { background: var(--primary); color: #fff; border-radius: 10px;
  font-size: 11px; padding: 0 6px; line-height: 16px; }
.spacer { flex: 1; }
.fsearch { width: 190px; flex: none; background: #F1F3F6; border: 1px solid var(--line-ctl);
  border-radius: 7px; padding: 5px 11px; font: inherit; font-size: 13px; color: var(--ink); outline: none; }
.fsearch::placeholder { color: #98A2AE; }
.fsearch:focus { border-color: #3D66CA; background: #fff; }
.fsel.dexdir { cursor: pointer; user-select: none; }
.fsel.dexdir:hover { border-color: var(--primary); }

.panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(27,34,44,.13); min-width: 260px; max-width: 460px; }
.panel .ph { padding: 7px 11px; font-size: 11.5px; color: var(--ink-3); border-bottom: 1px solid var(--sel); }
.panel .pb { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 11px; max-height: 260px; overflow: auto; }
.panel .pf { display: flex; justify-content: flex-end; gap: 7px; padding: 8px 11px; border-top: 1px solid var(--sel); }

.tsel { display: inline-flex; align-items: center; gap: 3px; font-size: 13px;
  border: 1.5px solid var(--tc); color: var(--tc); background: transparent;
  border-radius: 16px; padding: 2px 10px 2px 3px; }
.tsel::before { content: ""; width: 22px; height: 22px; border-radius: 50%;
  background-color: var(--tc); background-image: var(--ti);
  background-size: 20px 20px; background-repeat: no-repeat; background-position: center; }
.tsel.on { background: var(--tc); color: #fff; }
.psel { border: 1px solid var(--line-ctl); border-radius: 16px; padding: 3px 11px;
  font-size: 12.5px; color: var(--ink-2); background: var(--surface); }
.psel.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.psel.tinted { border-color: var(--pc); color: var(--pc); font-weight: 700; }
.psel.tinted.on { background: var(--pc); border-color: var(--pc); color: var(--pfg); }

.pnote { width: 100%; font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
  padding-top: 4px; border-top: 1px dashed var(--line); margin-top: 4px; }
.pnote:empty { display: none; }

.strow2 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
.strow2 .k { width: 42px; flex: none; color: var(--ink-2); }
.strow2 .psel { padding: 2px 9px; font-size: 12px; }
.strow2 input { width: 62px; border: 1px solid var(--line-ctl); border-radius: 5px;
  padding: 3px 6px; font: inherit; font-size: 13px; text-align: center; }
.strow2 .dash { color: var(--ink-3); }
.strow2 .lim { color: var(--ink-3); font-size: 11.5px; }
.sortbtn { margin-left: auto; width: 26px; height: 22px; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-ctl); border-radius: 5px;
  color: var(--ink-3); font-size: 12px; background: var(--surface); user-select: none; }
.sortbtn:hover { border-color: var(--primary); color: var(--primary); }
.sortbtn.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

.active { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 13px; color: var(--ink-2); }
.active .lead { color: var(--ink-3); }
.achip { display: inline-flex; align-items: center; gap: 6px; border-radius: 16px;
  padding: 2px 9px; background: var(--tc, #E7EBF1); color: #fff; font-size: 12.5px;
  cursor: pointer; }
.achip.plain { background: #E7EBF1; color: #39414E; }
.achip i { font-style: normal; opacity: .75; }
.clear { color: var(--link); }
.count { margin-left: auto; }
.count b { color: var(--ink); font-variant-numeric: tabular-nums; }

.tb { display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
  color: #fff; border-radius: 10px; padding: 1px 8px 1px 1px; line-height: 1.5; }
.tb::before { content: ""; width: 18px; height: 18px; flex: none;
  background-image: var(--ti); background-size: contain;
  background-repeat: no-repeat; background-position: center; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 9px; padding: 14px; }

.card { position: relative; background: var(--surface); border: 1px solid var(--line-ctl);
  border-radius: 9px; padding: 9px 7px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; text-align: center; color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease; }
.card:hover { transform: translateY(-2px); border-color: var(--tc, var(--primary));
  background: color-mix(in srgb, var(--tc, #999) 6%, var(--surface));
  box-shadow: 0 5px 16px color-mix(in srgb, var(--tc, #999) 30%, transparent); }
.card:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(30, 40, 55, .14); }
.card:focus-visible { outline: 2px solid var(--tc, var(--primary)); outline-offset: 2px; }

.lyrgrip { flex: none; width: 12px; color: var(--ink-3); font-size: 12px; line-height: 1;
  letter-spacing: -2px; user-select: none; }
.lyrrow.drag { opacity: .4; }

.noZh { font-style: normal; font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line-ctl); border-radius: 4px; padding: 0 4px; margin-left: 6px; }

.lyrcf { border-top: 1px solid var(--line-ctl); margin-top: 6px; padding: 8px 10px 4px;
  font-size: 12px; color: var(--ink-2); }
.lyrcf b { display: block; color: var(--ink); font-size: 12.5px; }
.lyrcf span { display: block; margin: 2px 0 4px; color: var(--ink-3); }
.lyrcf ul { list-style: none; margin: 0; padding: 0; max-height: 132px; overflow-y: auto; }
.lyrcf li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.lyrcf li em { font-style: normal; color: var(--primary); font-size: 11.5px; }
.lyrcf li.more { color: var(--ink-3); }

.card::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--tc, #999), var(--tc2, #999));
  transform: scaleX(0); transition: transform .18s ease; }
.card:hover::after { transform: scaleX(1); }
.card:hover .zh { color: color-mix(in srgb, var(--tc, #999) 55%, var(--ink)); }
.card .sp { position: relative; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #C9C4B8; transition: transform .16s ease; }
.card:hover .sp { transform: scale(1.07); }
.card .sp::before { content: ""; position: absolute; inset: -8%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc, #999) 34%, transparent) 0%, transparent 68%);
  opacity: 0; transition: opacity .16s ease; }
.card:hover .sp::before { opacity: 1; }
.card .sp img { position: relative; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.card .dex { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.card .zh { font-size: 13.5px; font-weight: 700; color: var(--ink);
  line-height: 1.3; word-break: break-word; transition: color .16s ease; }
.card .en { font-size: 10.5px; color: var(--ink-3); line-height: 1.3; word-break: break-all; }
.card .form { font-size: 11.5px; color: var(--primary); font-weight: 700; line-height: 1.3; }

.card .eggline { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }
.card .eggtag { font-size: 11px; border-radius: 4px; padding: 1px 6px; line-height: 1.5; }

.card .stline { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }
.card .sttag { font-size: 11px; color: #222; border-radius: 4px; padding: 1px 6px;
  line-height: 1.5; font-variant-numeric: tabular-nums; }

.card .evline { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }
.card .evline.none { color: var(--ink-3); font-size: 11px; }
.card .evtag { font-size: 11px; color: #222; border-radius: 4px; padding: 1px 6px; line-height: 1.5; }

.card .types { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }

.empty { padding: 60px 14px; text-align: center; color: var(--ink-3); }
.loading { padding: 60px 14px; text-align: center; color: var(--ink-3); }

.detail { padding: 14px; max-width: 1080px; }
.dhead { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.dhero { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 10px;
  background: #F8F8F3; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #C9C4B8; flex: none; image-rendering: pixelated; }
.dtitle { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dtitle h1 { margin: 0; font-size: 26px; }
.dtitle .dex { font-family: var(--mono); color: var(--ink-3); font-size: 15px; }
.dtitle .en { color: var(--ink-3); font-size: 14px; }
.forms { display: flex; gap: 4px; margin: 10px 0; flex-wrap: wrap; }
.formtab { border: 1px solid var(--line-mid); border-radius: 7px; padding: 4px 11px;
  font-size: 13px; color: var(--ink-2); background: var(--surface); }
.formtab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 10px; }
.kv dt { font-size: 11.5px; color: var(--ink-3); }
.kv dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; }

.sec { margin-top: 26px; }
.sec > h2 { font-size: 20px; margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid #A2A9B1; font-weight: 700; }

.statrow { display: flex; align-items: center; min-height: calc(var(--u) * 1.3); }
.statrow .lb { width: 96px; flex: none; display: flex; justify-content: space-between;
  padding: 0 6px; font-size: 14px; font-weight: 700; align-self: stretch; align-items: center; }
.statrow .track { flex: 1; padding-left: 3px; display: flex; align-items: center; }
.statrow .track i { display: block; height: 22px; box-sizing: border-box; }
.statbox { border: 1px solid var(--line-mid); border-radius: 9px; overflow: hidden; max-width: 420px; }
.stattotal { min-height: calc(var(--u) * 1.3); display: flex; align-items: center;
  padding: 0 6px; font-size: 14px; font-weight: 700; background: #E7EBF1; }

table.dt { border-collapse: separate; border-spacing: 0; background: var(--surface);
  font-size: 14px; width: 100%; max-width: 720px;
  border: 1px solid var(--line-mid); border-radius: 9px; overflow: hidden; }
table.dt th { background: #E7E7D8; font-weight: 700; padding: 0 10px;
  height: calc(var(--u) * 1.5); line-height: 1; text-align: center;
  border-right: 1px solid #D4D9C9; border-bottom: 1px solid var(--line-mid); }
table.dt th:last-child { border-right: none; }
table.dt td { border-right: 1px solid var(--line); border-top: 1px solid var(--line);
  padding: 0 10px; height: calc(var(--u) * 1.3); text-align: center; }
table.dt td:last-child { border-right: none; }
table.dt tr:first-child td { border-top: none; }

.mtabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.mtab { border: 1px solid var(--line-ctl); border-radius: 16px; padding: 3px 11px;
  font-size: 12.5px; color: var(--ink-2); background: var(--surface); }
.mtab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

.evorow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 9px;
  padding: 10px 14px; margin-bottom: 8px; }
.evorow .node { text-align: center; }
.evorow .node .sp { width: calc(var(--u) * 2); height: calc(var(--u) * 2);
  background: #F8F8F3; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; color: #C9C4B8; }
.evorow .cond { font-size: 13px; font-weight: 700; color: var(--ink-2); }

.back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2);
  font-size: 13px; padding: 10px 14px 0; }

@media (max-width: 720px) {

  
  .topbar { flex-wrap: wrap; padding: 6px 10px; gap: 8px; }
  
  .brand { display: block; flex: 0 1 auto; font-size: 15px; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .brand .ico { display: inline-block; vertical-align: middle;
    width: 24px; height: 24px; margin-right: 6px; }
  
  body.nods .wikiswwrap,
  body.nods .layerbadge,
  body.nods .ctx { display: none; }
  
  body.nods .brand { flex: 0 1 auto; text-overflow: clip; }

  .wikisw { padding: 3px 8px; gap: 6px; min-width: 0; flex: 0 1 auto; }
  .wikisw .txt { min-width: 0; overflow: hidden; }
  .wikisw .txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wikisw .txt em { display: none; }        
  
  .wikiswwrap { position: static; }
  .wikimenu { left: 10px; right: 10px; min-width: 0; }
  
  .wikisub { position: static; min-width: 0; margin: 2px 0 0 10px; padding: 2px 0 0 8px;
    border: none; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none;
    background: transparent; }
  .wikisub::before { display: none; }
  
  .wikimenu button { padding: 10px 12px; }
  .wikimore > button .arw { width: 19px; height: 19px; }
  .tbspacer { display: none; }

  
  .pagetitle { position: static; transform: none; order: 9; flex: 1 0 100%;
    justify-content: center; gap: 6px;
    margin: 6px -10px -6px; padding: 5px 10px;
    border-top: 1px solid var(--line); background: var(--surface);
    font-size: 17px; min-width: 0; overflow: hidden; }
  .pagetitle > span { overflow: hidden; text-overflow: ellipsis; }
  .pagetitle img { width: 26px; height: 26px; }
  .ctx { padding: 5px 10px; font-size: 12px; gap: 5px; }

  .shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  
  .side {
    display: flex; flex-direction: row; min-width: 0; height: auto; padding: 0;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40;
    border-right: none; border-bottom: none; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 8px rgba(20, 26, 36, .10);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .side::-webkit-scrollbar { display: none; }
  
  .nav { border-left: none; border-bottom: none; border-top: 3px solid transparent;
    white-space: nowrap; flex: none; scroll-snap-align: start; }
  .nav.on { border-left-color: transparent; border-top-color: var(--primary); }
  
  .nav:hover { background: transparent; }
  .nav.on:hover { background: var(--sel); }
  .navfoot { margin-top: 0; }
  
  .tbnav { position: relative; margin-left: auto; flex: none; }
  .tbmore { display: flex; align-items: center; justify-content: center;
    width: 32px; height: 28px; padding: 0;
    border: 1px solid var(--line-ctl); border-radius: 8px; background: var(--surface); }
  
  .tbbar, .tbbar::before, .tbbar::after {
    display: block; width: 14px; height: 1.6px; border-radius: 1px;
    background: currentColor; content: ""; }
  .tbbar { position: relative; color: var(--ink-2); }
  .tbbar::before { position: absolute; top: -4.4px; }
  .tbbar::after  { position: absolute; top: 4.4px; }
  .tbmore[aria-expanded="true"] { background: var(--sel); }
  .tbmore[aria-expanded="true"] .tbbar { color: var(--primary); }

  .tbitems { display: none; position: absolute; right: 0; top: calc(100% + 7px);
    flex-direction: column-reverse; align-items: stretch; gap: 2px; z-index: 5;
    min-width: 136px; padding: 5px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 8px 22px rgba(20, 26, 36, .18); }
  .tbnav.on .tbitems { display: flex; }
  .tbitems > a, .tbitems > span { padding: 9px 11px; border-radius: 7px;
    font-size: 14px; color: var(--ink); }
  .tbitems > a:active, .tbitems > span:active { background: var(--sel); }

  
  .tbitems .avatar { align-self: center; width: 34px; height: 34px;
    border-radius: 50%; margin: 2px 0 6px; padding: 0; }
  .tbitems .avatar svg { width: 21px; height: 21px; }

  .side:not(.detailnav) { overflow-x: hidden; }
  .side:not(.detailnav) .nav { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 4px; }
  
  .side.detailnav .nav { padding: 8px 10px; font-size: 13.5px; }
  .side.detailnav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  
  .shell:has(> .side:not(.detailnav)) { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .shell:has(> .side.detailnav) { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }

  .fbar { padding: 7px 10px; gap: 6px; }
  .fsel { padding: 6px 10px; }
  
  .fbar .fsearch { min-width: 0; flex: 1 1 100%; }
  .fbar .spacer { display: none; }
  
  .fbar { position: relative; }
  .fbar .fsel { position: static; }
  .panel { left: 10px; right: 10px; width: auto; min-width: 0; max-width: none;
    top: calc(100% + 6px); }
  .panel .pb { max-height: 45vh; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; padding: 10px; }
  .mvgrid, .igrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 10px; }
  .active { padding: 6px 10px; }

  input, select, textarea,
  .fsearch, .mpsearch, .panel input, .strow2 input, .ivev, .cmdnum, .cmdcinp, .cmdtext {
    font-size: 16px;
  }
  .fsearch, .mpsearch { min-height: 40px; }
  a.nav { min-height: 40px; }
}

@media (max-width: 400px) {
  
  .brand { font-size: 14px; flex: 1 1 0; }
  .wikisw .txt b { font-size: 12.5px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .panel { left: 8px; right: 8px; }
}

.mcount { padding: 12px 14px 0; font-size: 13px; color: var(--ink-2); }
.mcount b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 9px; padding: 12px 14px; }
.mcard2 { position: relative; background: var(--surface); border: 1px solid var(--line-ctl);
  border-left: 4px solid var(--tc, #999); border-radius: 8px; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 3px; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background .15s ease; }

.mcard2:hover { transform: translateY(-2px); border-color: var(--tc, #999);
  background: color-mix(in srgb, var(--tc, #999) 7%, var(--surface));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tc, #999) 28%, transparent); }
.mcard2:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(30,40,55,.14); }
.mcard2:focus-visible { outline: 2px solid var(--tc, #999); outline-offset: 2px; }

.mcard2:hover > b { color: color-mix(in srgb, var(--tc, #999) 65%, var(--ink)); }
.mcard2:hover > em { color: var(--ink-2); }
.mcard2 > b { font-size: 15px; font-weight: 700; color: var(--ink); transition: color .15s ease; }
.mcard2 > em { font-style: normal; font-size: 11px; color: var(--ink-3); transition: color .15s ease; }
.mrow2 { display: flex; gap: 5px; align-items: center; margin-top: 3px; }
.mrow2 .tb { font-size: 12px; padding: 1px 8px 1px 1px; }
.mrow2 .tb::before { width: 18px; height: 18px; }
.mcat { border: 1px solid currentColor; border-radius: 10px; padding: 1px 8px;
  font-size: 12px; min-width: 44px; text-align: center; background: transparent; }
.mnum { display: flex; gap: 5px; align-items: baseline; font-family: var(--mono);
  font-size: 13px; color: #39414E; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mnum i { font-style: normal; font-family: var(--font); font-size: 10.5px;
  color: var(--ink-3); margin-left: 5px; }
.mnum i:first-child { margin-left: 0; }

.usabody { padding: 12px 14px 32px; }

.usagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 10px; }
.usech { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: .5px; }
.usech:first-child { margin-top: 0; }
.usech::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--gc); }
.usech > i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-3);
  background: var(--sel); border-radius: 9px; padding: 0 7px; line-height: 17px; }
.ucard { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line-ctl);
  border-left: 4px solid var(--gc); border-radius: 9px; color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background .15s ease; }
.ucard:hover { transform: translateY(-2px); border-color: var(--gc);
  background: color-mix(in srgb, var(--gc) 6%, var(--surface));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--gc) 26%, transparent); }
.ucard:active { transform: translateY(0); }
.ucard:focus-visible { outline: 2px solid var(--gc); outline-offset: 2px; }

.uico { width: 46px; height: 46px; flex: none; border-radius: 9px;
  background: color-mix(in srgb, var(--gc) 12%, #F1F3F6);
  display: flex; align-items: center; justify-content: center; }
.uico img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.utxt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.utxt b { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.utxt em { font-style: normal; font-size: 12px; color: var(--ink-3); line-height: 1.35; }

.ucard.todo { background: #FAFBFC; }
.ucard.todo .uico, .ucard.todo .utxt b { opacity: .62; }
.ucard.todo .utxt em { opacity: .8; }
.utag { position: absolute; top: 7px; right: 8px; font-size: 10.5px; color: var(--ink-3);
  background: var(--sel); border-radius: 8px; padding: 1px 7px; line-height: 15px; }

.usaholder { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 76px 16px; text-align: center; }
.usaholder img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated;
  opacity: .7; margin-bottom: 4px; }
.usaholder b { font-size: 19px; color: var(--ink); }
.usaholder em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.usaholder .note { margin-top: 10px; font-size: 13px; color: var(--ink-3);
  background: var(--sel); border-radius: 14px; padding: 3px 14px; }
.usaholder .back { margin-top: 16px; font-size: 14px; }

.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 9px; padding: 12px 14px; }
.icard { background: var(--surface); border: 1px solid var(--line-ctl);
  border-left: 4px solid var(--tc, #999); border-radius: 8px; padding: 7px 10px;
  min-height: 54px; display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background .15s ease; }
.icard:hover { transform: translateY(-2px); border-color: var(--tc, #999);
  background: color-mix(in srgb, var(--tc, #999) 7%, var(--surface));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tc, #999) 28%, transparent); }

.iico { width: 38px; height: 38px; flex: none; border-radius: 7px; background: #F1F3F6;
  display: flex; align-items: center; justify-content: center; }
.icard:hover .iico { background: #fff; }
.iico img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.itxt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.itxt b { font-weight: 700; color: var(--ink); line-height: 1.25; }
.itxt em { font-style: normal; font-size: 10.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bbsbar { display: flex; align-items: center; gap: 10px; padding: 10px 2px 12px; }
.bbslead { color: var(--ink-3); font-size: 13px; }
.bbsbar .actbtn { margin-left: auto; }

.bbslist { background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; }
.bbsrow { display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.bbsrow:last-child { border-bottom: 0; }
.bbsrow:hover { background: var(--sel); }
.bbsmid { flex: 1; min-width: 0; }
.bbsmid b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bbsmid em { display: flex; align-items: center; gap: 10px; font-style: normal;
  font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.bbsn { display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12px; color: var(--ink-3); }
.bbsnicon { width: 13px; height: 13px; fill: currentColor; opacity: .75; }

.bbsav { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  box-sizing: border-box; border: 1px solid var(--line-ctl);
  background: var(--brand); color: #5A3B28;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; }
.bbsav img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bbspage { display: flex; gap: 6px; justify-content: center; padding: 16px 0 4px; flex-wrap: wrap; }
.bbspage .pg { font-size: 13px; padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--line-ctl); background: var(--surface);
  color: var(--ink-2); text-decoration: none; }
.bbspage .pg:hover { border-color: var(--primary); color: var(--primary); }
.bbspage .pg.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.edt { display: flex; flex-direction: column; }
.edtbar { display: flex; gap: 5px; flex-wrap: wrap; padding: 6px 7px;
  background: var(--surface-2); border: 1px solid var(--line-ctl);
  border-bottom: 0; border-radius: 9px 9px 0 0; }

.edtb { font: inherit; font-size: 12.5px; line-height: 1; padding: 6px 11px 6px 9px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-ctl); border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; }
.edtb svg { width: 16px; height: 16px; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.edtb .lbl { line-height: 1; }
.edtb:hover { border-color: var(--primary); color: var(--primary); }
.edtb.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.edtbody { min-height: 132px; max-height: 46vh; overflow-y: auto;
  padding: 10px 12px; font-size: 14px; line-height: 1.85; color: var(--ink);
  border: 1px solid var(--line-ctl); border-radius: 0 0 9px 9px;
  background: var(--surface); outline: none; word-break: break-word; }
.edtbody:focus { border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.edtbody.over { border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }

.edtbody { text-align: left; }
.edtbody.empty[data-ph]::before { content: attr(data-ph); color: #A8B2BE; pointer-events: none; }
.edtbody img { max-width: 100%; max-height: 300px; border-radius: 8px;
  margin: 6px 0; border: 1px solid var(--line); }
.edtbody img.up { min-width: 90px; min-height: 60px; background: var(--surface-2); opacity: .5; }
.edtbody a { color: var(--link); }
.edttip { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }
.edttip.bad { color: #B4453C; }

.mdp { margin: 0 0 10px; line-height: 1.85; word-break: break-word; }
.mdp:last-child { margin-bottom: 0; }
.mdq { margin: 0 0 10px; padding: 7px 12px; border-left: 3px solid var(--line-ctl);
  background: var(--surface-2); color: var(--ink-3); border-radius: 0 7px 7px 0;
  line-height: 1.8; }
.mdul { margin: 0 0 10px; padding-left: 22px; line-height: 1.85; }
.flbody code, .edtprev code { font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.flbody a, .edtprev a { color: var(--link); word-break: break-all; }

.mdimg { display: block; max-width: 100%; max-height: 420px; width: auto;
  border-radius: 8px; margin: 8px 0; border: 1px solid var(--line);
  object-fit: contain; cursor: zoom-in; }

@media (max-width: 720px) {
  .edtb { font-size: 13px; padding: 7px 10px; }
  .mdimg { max-height: 300px; }
}

body.bbsmode .side { display: none; }
body.bbsmode .ctx { display: none; }
body.bbsmode .shell { grid-template-columns: 1fr; }

body.bbsmode #main { max-width: 1200px; margin: 0 auto; width: 100%; }

.thhead { display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px 12px 0 0; border-bottom: 0; padding: 16px 20px; margin: 6px 0 0; }

.thback { flex: none; width: 32px; height: 32px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-ctl); border-radius: 9px;
  background: var(--surface); color: var(--ink-2); text-decoration: none; }
.thback svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thback:hover { border-color: var(--primary); color: var(--primary); background: var(--sel); }
.thtitle { min-width: 0; flex: 1; }
.thhead h1 { font-size: 20px; line-height: 1.4; margin: 0; color: var(--ink);
  font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.thstat { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

.thfloors { display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: 0 0 12px 12px; overflow: hidden; }

.floor { display: grid; grid-template-columns: 108px minmax(0, 1fr);
  column-gap: 18px; row-gap: 0;
  padding: 18px 20px; border-top: 1px solid var(--line); }
.floor:first-child { border-top: 0; }
.flleft { display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding-top: 2px; grid-column: 1; grid-row: 1; }
.flright { min-width: 0; display: flex; flex-direction: column;
  grid-column: 2; grid-row: 1; }

.flhd { display: none; }
.flname { font-size: 13px; font-weight: 600; color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flrole { font-size: 10.5px; line-height: 1.6; padding: 1px 7px; border-radius: 4px;
  font-weight: 600; border: 1px solid;
  background: #E7F3EC; border-color: #B9DDC8; color: #2E7D46; }   
.flrole[data-role="editor"] { background: #E7F0FB; border-color: #BFD3EE; color: #33559C; }  
.flrole[data-role="admin"] { background: #FBE9E7; border-color: #EEC3BE; color: #A8362F; }   
.flposts { font-size: 10.5px; color: var(--ink-3); }
.floor .bbsav.big { width: 60px; height: 60px; font-size: 25px; }
.flbadges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  justify-content: center; }

.flowner { flex: none; font-size: 10.5px; line-height: 1.7; padding: 0 7px;
  border-radius: 4px; background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); font-weight: 600; }
.flsp { flex: 1; }
.fltime, .flno { flex: none; font-size: 11.5px; color: var(--ink-3); }
.flno { margin-left: 10px; }

.flbody { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2);
  word-break: break-word; }
.flbody.gone { color: var(--ink-3); font-style: italic; font-size: 13px; }

.flsubs { grid-column: 2; grid-row: 2; margin-top: 10px; }
.flsub { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px;
  padding: 9px 0; border-top: 1px solid var(--line); }
.flsub:first-child { border-top: 1px solid var(--line); }
.flsub .bbsav.sm { width: 28px; height: 28px; font-size: 12.5px; }
.flsubc { min-width: 0; }
.flsubhd { display: flex; align-items: center; gap: 5px; }
.flsubhd b { font-size: 12.5px; color: var(--link); font-weight: 600; }
.flsubb { font-size: 13.5px; line-height: 1.8; color: var(--ink-2);
  margin-top: 3px; word-break: break-word; }
.flsubb .to { color: var(--ink-3); }
.flsubb .toname { color: var(--link); font-weight: 600; }
.flsubb .sc { margin-left: 2px; }

.flsubft { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.flsubft .fltime { font-size: 11px; color: var(--ink-3); }
.flact.sm { font-size: 11.5px; padding: 3px 7px; gap: 4px; }
.flact.sm svg { width: 14px; height: 14px; }
.flsubft .actlink.sub { font-size: 11.5px; }

.flft { display: flex; align-items: center; gap: 10px; padding-top: 12px; }

.flft { margin-top: auto; }

.flmeta, .flft .fltime { font-size: 11.5px; color: var(--ink-3); flex: none; }
.flft .fltime { margin-left: -4px; }
.flft .actlink { font-size: 12.5px; color: var(--ink-3); }
.flft .actlink:hover { color: var(--primary); }
.flft .flsp { flex: 1; }

.flact { font: inherit; font-size: 12.5px; line-height: 1; padding: 5px 8px;
  background: none; border: 0; border-radius: 7px; cursor: pointer;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.flact svg { width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.flact:hover { background: var(--sel); color: var(--primary); }

.flact.danger:hover { background: #FDF1F0; color: #B4453C; }
.flact:disabled { opacity: .5; cursor: default; }

.flact.on { color: var(--primary); font-weight: 600; }
.flact.on svg { fill: currentColor; stroke: currentColor; }
.flact .lbl { line-height: 1; }

.flsign { margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--line);
  font-size: 11px; line-height: 1.65; color: var(--ink-3);
  word-break: break-word; text-align: center; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; }

.flnew { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.flnew textarea { border-radius: 8px; }
.flnewft { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.threply { margin-top: 18px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; }
.threply .actbtn { align-self: flex-end; padding: 9px 26px; }

@media (max-width: 720px) {
  .thhead { border-radius: 0; border-left: 0; border-right: 0; padding: 14px 14px 12px; }
  .thhead h1 { font-size: 17.5px; }
  .thfloors { border-radius: 0; border-left: 0; border-right: 0; }
  
  .floor { grid-template-columns: 1fr; gap: 8px; padding: 13px 14px; }
  .flleft, .flright, .flsubs { grid-column: 1; grid-row: auto; }
  .flleft { flex-direction: row; align-items: center; gap: 8px; text-align: left; }
  .floor .bbsav.big { width: 34px; height: 34px; font-size: 15px; }
  .flposts { display: none; }
  .flbody { font-size: 15px; }
  .threply { border-radius: 0; border-left: 0; border-right: 0; }
  .threply .actbtn { align-self: stretch; }
  
  .floor .bbsav { width: 36px; height: 36px; font-size: 15px; }
}

.profrow .v.sig { font-weight: 400; white-space: pre-wrap; word-break: break-word;
  line-height: 1.7; }
.profrow .v.sig .none { font-style: normal; color: var(--ink-3); }
.profedit.col { flex-direction: column; align-items: stretch; gap: 8px; }
.profedit textarea { font: inherit; font-size: 13.5px; line-height: 1.7; padding: 8px 10px;
  border: 1px solid var(--primary); border-radius: 8px;
  background: var(--surface); color: var(--ink); resize: vertical; }
.profedit textarea:focus { outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.profsigft { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.sigmsg { font-size: 12px; color: #B4453C; margin-right: auto; }

.profadm { display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--surface-2); border-radius: 9px; }
.profadm .k { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.profadm .k em { font-style: normal; font-weight: 400; color: var(--ink-3);
  font-size: 11.5px; margin-left: 6px; }
.admgo { display: flex; align-items: center; gap: 10px; }
.admgo span { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.admgo .actbtn { flex: none; }

.flowner.mini { font-size: 9.5px; padding: 0 4px; margin-left: 4px; }

.bbsfilter { display: flex; flex-direction: column; gap: 7px; padding: 12px 2px 4px; }
.bbsfrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bbsflab { flex: none; width: 30px; font-size: 12px; color: var(--ink-3); }
.bbschip { font: inherit; font-size: 12.5px; line-height: 1; padding: 6px 12px;
  border: 1px solid var(--line-ctl); border-radius: 20px;
  background: var(--surface); color: var(--ink-2);
  text-decoration: none; cursor: pointer; }
.bbschip:hover { border-color: var(--primary); color: var(--primary); }
.bbschip.on { background: var(--primary); border-color: var(--primary); color: #fff;
  font-weight: 600; }

.thtags { display: inline-flex; align-items: center; gap: 4px; margin-right: 7px;
  vertical-align: middle; }
.thtag { flex: none; font-size: 11px; line-height: 1.7; padding: 0 7px;
  border-radius: 4px; font-weight: 600; white-space: nowrap; }

.thtag.zone { background: #1268C3; color: #fff; }                          
.thtag.zone[data-zone="pixelmon"] { background: #A8362F; }                 
.thtag.zone[data-zone="cobblemon"] { background: #2E7D46; }                
.thtag.zone[data-zone="other"] { background: #6E56CF; }                    

.thtag.kind { background: #E8F4F6; color: #0F6B78; border: 1px solid #BBDDE3; }

.thtag.kind[data-kind="notice"] { background: #FBE9E7; border-color: #EEC3BE; color: #A8362F; }
.thtag.kind[data-kind="fix"] { background: #FDF6E3; border-color: #E8D9A8; color: #8A6D1F; }

.bbstitle { display: block; }
.bbstitle b { font-size: 14.5px; font-weight: 600; color: var(--ink); }

.bbsmid .bbstitle b { white-space: normal; overflow: visible; }
.thhead h1 .thtags { margin-right: 8px; }

.ntpick { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .bbsflab { width: 26px; font-size: 11.5px; }
  
  .bbschip { display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; font-size: 13px; padding: 0 14px; }
}

.bilibox { position: relative; width: 100%; max-width: 640px; margin: 10px 0;
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #000; border: 1px solid var(--line); }
.bilibox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bilibox.edit { user-select: none; max-width: 420px; }
.bilibox.edit iframe { pointer-events: none; }

.bilibox.edit:hover { border-color: var(--primary); }

.bilidel { position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  background: rgba(20,26,36,.62); color: #fff;
  opacity: 0; transition: opacity .12s, background .12s; pointer-events: auto; }
.bilibox.edit:hover .bilidel, .bilidel:focus-visible { opacity: 1; }
.bilidel:hover { background: #B4453C; }

@media (max-width: 720px) {
  
  body.bbsmode #main { max-width: none; padding-left: 0; padding-right: 0; }

  .bbslist { border-radius: 0; border-left: 0; border-right: 0; }
  .bbsrow { padding: 12px 14px; gap: 10px; }
  .bbsbar { padding: 10px 14px 12px; }
  .bbsfilter { padding: 12px 14px 4px; }
  
  .bbsfrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -ms-overflow-style: none; padding-bottom: 2px; }
  .bbsfrow::-webkit-scrollbar { display: none; }
  .bbsfrow .bbschip { flex: none; }

  .bbsmid .bbstitle b { font-size: 14px; }
  .thtag { font-size: 10.5px; padding: 0 6px; }

  .flleft { justify-content: flex-start; }
  .flsign { display: none; }
  .flbadges { justify-content: flex-start; }
  .flname { font-size: 13.5px; }

  .flft { flex-wrap: wrap; row-gap: 4px; padding-top: 10px; }
  .flact { padding: 6px 9px; font-size: 13px; }
  .flact svg { width: 17px; height: 17px; }

  .flsubs { margin-top: 8px; }
  .flsub { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 0; }
  .flsub .bbsav.sm { width: 26px; height: 26px; font-size: 11.5px; }
  .flsubb { font-size: 14px; }
  .flsubft { flex-wrap: wrap; row-gap: 2px; }

  .thhead { gap: 10px; }
  .thback { width: 38px; height: 38px; }

  .edtbody { min-height: 108px; max-height: 38vh; font-size: 16px; }
  .edtbar { padding: 5px 6px; }

  .bilibox { max-width: none; border-radius: 8px; }
  .bilibox.edit { max-width: none; }

  .flbody .mdimg { max-height: 260px; }
}

.srvlist { display: flex; flex-direction: column; gap: 10px; }

.srvrow2 { display: flex; align-items: stretch; gap: 14px; min-height: 100px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; }
.srvrow2:hover { border-color: var(--primary); }

.srvrow2.down { background: var(--surface-2); }
.srvrow2.down .srvicon { filter: grayscale(1); opacity: .55; }
.srvrow2.down .srvhd b, .srvrow2.down .srvsum { color: var(--ink-3); }
.srvrow2.down .srvkind { background: var(--surface-2); color: var(--ink-3); }

.srvicon { flex: none; align-self: center; width: 56px; height: 56px; border-radius: 8px;
  image-rendering: pixelated; background: var(--surface-2);
  border: 1px solid var(--line); object-fit: cover; }
.srvicon.ph { display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--ink-3); image-rendering: auto; }
.srvmain { flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 5px; }
.srvsum { font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srvmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.srvbase { --bs: #5A6675; --bs-soft: #EDEFF2;
  display: inline-flex; align-items: stretch; overflow: hidden;
  font-size: 11.5px; line-height: 1.75; border-radius: 5px; }
.srvbase[data-mod="pixelmon"]  { --bs: #A8362F; --bs-soft: #FBEBEA; }
.srvbase[data-mod="cobblemon"] { --bs: #2E7D46; --bs-soft: #E7F3EC; }
.srvbase b { font-weight: 600; padding: 0 7px; background: var(--bs); color: #fff; }
.srvbase i { font-style: normal; padding: 0 7px;
  background: var(--bs-soft); color: var(--bs); }
.srvplus { font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: var(--primary-weak, #FDF1F0); border-radius: 20px; padding: 2px 9px; }
.srvopen { font-size: 11.5px; color: var(--ink-3); }

.srvarrow { font-style: normal; margin-left: 4px; opacity: .85; }

.srvside { flex: none; align-self: stretch; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between; gap: 10px; }
.srvacts { flex: none; display: flex; align-items: center; gap: 8px; }

.srvapply { font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; white-space: nowrap;
  cursor: pointer; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--line-ctl); background: var(--surface); color: var(--ink-2);
  transition: border-color .12s, color .12s, background .12s; }
.srvapply:hover { border-color: var(--ink-2); color: var(--ink);
  background: var(--surface-2); }

.srvapply.solid { border-color: #1268C3; background: #1268C3; color: #fff; }
.srvapply.solid:hover { border-color: #0F5AAB; background: #0F5AAB; color: #fff; }

.srvapply:disabled {
  border-color: var(--line); background: var(--surface-2); color: #B2BAC6;
  cursor: not-allowed; }
.srvapply:disabled:hover {
  border-color: var(--line); background: var(--surface-2); color: #B2BAC6; }
.srvapply:disabled .lyricon { opacity: .6; }

.srvapply.solid:hover .lyricon { transform: translateX(2px); }
.srvapply .lyricon { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
  transition: transform .12s; }

.srvtip { margin-top: 14px; text-align: center;
  font-size: 12.5px; color: var(--ink-3); }

.srvtip a:hover { text-decoration: underline; }

.srvhd { display: flex; align-items: center; gap: 8px; }
.srvhd b { font-size: 15px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.srvkind { flex: none; font-size: 10.5px; line-height: 1.7; padding: 0 7px;
  border-radius: 4px; font-weight: 600;
  background: #E7F3EC; color: #2E7D46; }
.srvkind[data-kind="commercial"] { background: #FDF2E3; color: #8A5A14; }

.thhead h1 .srvkind { margin-left: 8px; vertical-align: 3px; }

.srvon { flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-2); }
.srvon .dot { width: 7px; height: 7px; border-radius: 50%; background: #34A853;
  box-shadow: 0 0 0 3px rgba(52,168,83,.16); }

.srvon.off { color: #8A5A14; }
.srvon.off .dot { background: #E0A33E; box-shadow: none; }
.srvon.dead { color: var(--ink-3); }
.srvon.dead .dot { background: #C2C9D2; }

.srvcopy { font: inherit; font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 12.5px; padding: 4px 11px; cursor: pointer;
  border: 1px solid var(--line-ctl); border-radius: 7px;
  background: var(--surface-2); color: var(--ink); }
.srvcopy:hover { border-color: var(--primary); color: var(--primary); }
.srvcopy.ok { border-color: #2E7D46; color: #2E7D46; background: #E7F3EC; }

.srvinfo { background: var(--surface); border: 1px solid var(--line);
  border-top: 0; padding: 4px 20px 12px; }
.srvrow { display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 13.5px; }

.srvrow .k { flex: none; width: 62px; color: var(--ink-3); font-size: 12.5px; }
.srvrow .v { min-width: 0; color: var(--ink-2); word-break: break-word; }
.srvbody { background: var(--surface); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 16px 20px; font-size: 14.5px; line-height: 1.85;
  color: var(--ink-2); }

.srvbody:has(+ .pklog) { border-radius: 0; }
.srvown { display: flex; align-items: center; gap: 14px; justify-content: flex-end;
  padding: 12px 2px; }

.srvchart {
  --ch-line:    #3B6698;  
  --ch-fill:    #4E7CB0;  
  --ch-grid:    #EDF1F5;  
  --ch-down:    #E8EDF3;  
  --ch-hatch:   #D3DAE4;  
  --ch-hatchbg: #FAFBFD;
  background: var(--surface); border: 1px solid var(--line); border-top: 0;
  padding: 12px 16px 10px;
}

.srvcht { display: flex; align-items: center; gap: 0 14px; flex-wrap: wrap;
  margin-bottom: 10px; }

.srvchtitle, .srvsecth { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

.srvchstat { display: flex; align-items: baseline; gap: 16px;
  padding-left: 14px; border-left: 1px solid var(--line, #E3E7EC); }
.srvchstat i { display: inline-flex; align-items: baseline; gap: 5px; font-style: normal; }
.srvchstat em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.srvchstat b { font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 13px; font-weight: 700; color: var(--ink); }
.srvchempty { font-size: 12.5px; color: var(--ink-3); padding: 18px 0; text-align: center; }

.srvchwrap { position: relative; }
.srvchsvg { display: block; }

.srvchart .grid { stroke: var(--ch-grid, #EDF1F5); stroke-width: 1;
  shape-rendering: crispEdges; }
.srvchart .grid.base { stroke: var(--line-ctl, #DDE2E8); }
.srvchart .axis { font-size: 10.5px; fill: var(--ink-3, #8A95A5);
  font-family: var(--mono, ui-monospace, Consolas, monospace); }

.srvchart .down { fill: var(--ch-down, #E8EDF3); }

.srvchart .gapbg { fill: var(--ch-hatchbg, #FAFBFD); }
.srvchart .gapln { stroke: var(--ch-hatch, #D3DAE4); stroke-width: 1; }
.srvchart .gapedge { stroke: var(--ch-hatch, #D3DAE4); stroke-width: 1;
  shape-rendering: crispEdges; }
.srvchart .gaptx { font-size: 11px; fill: var(--ink-3, #8A95A5); }
.srvchart .gaptxbg { fill: var(--ch-hatchbg, #FAFBFD); }

.srvchart .area { stroke: none; }

.srvchart stop.g0 { stop-color: var(--ch-fill, #4E7CB0); stop-opacity: .30; }
.srvchart stop.g1 { stop-color: var(--ch-fill, #4E7CB0); stop-opacity: .13; }
.srvchart stop.g2 { stop-color: var(--ch-fill, #4E7CB0); stop-opacity: .02; }
.srvchart .line { fill: none; stroke: var(--ch-line, #3B6698); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }

.srvchart .dot { fill: var(--surface, #FFFFFF); stroke: var(--ch-line, #3B6698);
  stroke-width: 1.5; }
.srvchart .dot.na { stroke: var(--ink-3, #8A95A5); }

.srvchart .dot.edge { fill: var(--ch-line, #3B6698); }

.srvchart .catch { fill: transparent; cursor: crosshair; }
.srvchart .hot { opacity: 0; transition: opacity .1s; pointer-events: none; }
.srvchart .hot.on { opacity: 1; }
.srvchart .cross { stroke: var(--line-mid, #C7CEDA); stroke-width: 1; stroke-dasharray: 3 4; }
.srvchart .hdot { fill: var(--ch-line, #3B6698); stroke: var(--surface, #FFFFFF);
  stroke-width: 2.5; }

.srvchart .hot.nodot .hdot { display: none; }
.srvchtip { position: absolute; top: 4px; z-index: 2; display: none;
  pointer-events: none; white-space: nowrap;
  background: #1B222C; color: #fff; border-radius: 7px; padding: 5px 9px;
  font-size: 11.5px; line-height: 1.5; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.srvchtip.on { display: flex; align-items: baseline; gap: 7px; }
.srvchtip b { font-family: var(--mono, ui-monospace, Consolas, monospace); font-weight: 600; }
.srvchtip span { color: #C9D2DE; }
.srvchtip em { font-style: normal; color: #8B97A7; }
.srvchart { padding-left: 14px; padding-right: 14px;
    border-left: 0; border-right: 0; border-radius: 0; }
.srvcht { gap: 0 10px; }

.datef { position: relative; display: block; }
.datef input { font-weight: 400; }
.datef input { width: 100%; padding-right: 38px; }

.datebtn { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0 8px 8px 0; background: none;
  color: var(--ink-3); cursor: pointer; }
.datebtn:hover { color: var(--primary); background: var(--surface-2); }
.datebtn .lyricon { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

.dpop { position: fixed; z-index: 1200; width: 252px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line-ctl); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20,28,40,.16); user-select: none; }
.dpophd { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.dpopcap { flex: 1; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dpopnav { width: 24px; height: 24px; flex: none; font: inherit; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; }
.dpopnav:hover { background: var(--surface-2); color: var(--ink); }
.dpopwk, .dpopgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dpopwk { margin-bottom: 2px; }
.dpopwk span { text-align: center; font-size: 11px; color: var(--ink-3); line-height: 22px; }
.dpopd { height: 30px; font: inherit; font-size: 12.5px; cursor: pointer;
  border: 0; border-radius: 7px; background: none; color: var(--ink-2);
  font-family: var(--mono, ui-monospace, Consolas, monospace); }
.dpopd:hover { background: var(--surface-2); color: var(--ink); }

.dpopd.out { color: #C3CAD5; }
.dpopd.today { color: var(--primary); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line-mid); }
.dpopd.on { background: var(--primary); color: #fff; font-weight: 700; box-shadow: none; }
.dpopft { display: flex; align-items: center; margin-top: 6px;
  padding-top: 7px; border-top: 1px solid var(--line); }
.dpopft-b { font: inherit; font-size: 12.5px; border: 0; background: none;
  padding: 2px 4px; color: var(--link); cursor: pointer; }
.dpopft-b:hover { text-decoration: underline; }

.svlayers { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svlsum { min-width: 0; flex: 1; font-size: 12.5px; color: var(--ink-3);
  word-break: break-all; }
.svlayers .actbtn { flex: none; }

.actf > span .opt { font-style: normal; font-weight: 400; color: var(--ink-3);
  font-size: 11.5px; margin-left: 6px; }
.actf select { font: inherit; font-size: 14px; padding: 9px 10px;
  border: 1px solid var(--line-ctl); border-radius: 9px;
  background: var(--surface); color: var(--ink); }

@media (max-width: 720px) {
  .srvlist { padding: 0 14px; }
  .srvtip { padding: 0 14px; }
  
  .srvrow2 { flex-wrap: wrap; align-items: center; min-height: 0;
    border-radius: 10px; padding: 12px 14px; gap: 10px 12px; }
  .srvicon { width: 56px; height: 56px; }
  
  .srvhd { align-items: flex-start; }
  .srvhd b { font-size: 16px; white-space: normal; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  
  .srvsum { white-space: normal; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  
  .srvbase b, .srvbase i { white-space: nowrap; }
  
  .srvside { flex: 1 0 100%; align-self: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: 8px 10px; }
  .srvside .srvacts { flex: 1 1 auto; justify-content: flex-end; }
  
  .srvacts { flex-wrap: wrap; row-gap: 8px; }
  
  .srvapply { height: 40px; }
  
  .bbsbar .actbtn.tiny, .svlayers .actbtn.tiny,
  .pklogh .actbtn.tiny, .pkitop .actbtn.tiny, .srvown .actbtn.tiny {
    min-height: 40px; padding: 0 16px; }
  .srvinfo, .srvbody, .srvchart { border-left: 0; border-right: 0; border-radius: 0;
    padding-left: 14px; padding-right: 14px; }
  
  .srvrow { gap: 10px; }
  .srvrow .k { width: 54px; }
  .srvrow .v { flex: 1; }
  
  .srvrow:has(> .v > .srvacts) { flex-direction: column; align-items: stretch; gap: 6px; }
  .srvrow:has(> .v > .srvacts) .k { width: auto; }
  .srvcopy { min-height: 38px; padding: 4px 12px; }

  .lyrdrop[data-side="on"] .lyrmv { display: inline-flex; }
  
  .lyrmvb { font-size: 11px; padding: 6px 9px; }
  .srvown { padding: 12px 14px; }
  
  .actf select { font-size: 16px; padding: 11px 10px; }
}

.pkver { flex: none; font-size: 11px; line-height: 1.7; padding: 0 7px;
  border-radius: 4px; font-weight: 600; font-family: var(--mono, ui-monospace, Consolas, monospace);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-ctl); }
.pkver.big { font-size: 13px; line-height: 1.9; padding: 0 9px; color: var(--ink); }
.thhead h1 .pkver { margin-left: 8px; vertical-align: 3px; }

.thhead > .srvapply { flex: none; align-self: center; }
.srvupd { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

.pklog { background: var(--surface); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 14px 20px 16px; }
.pklogh { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pklogh .srvsecth { margin-bottom: 0; }
.pklogh .actbtn { margin-left: auto; }

.pkitem { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.pkitem:first-of-type { border-top: 0; padding-top: 2px; }
.pkitop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.pkitop .actlink.sub { margin-left: 0; }
.pkdate { font-size: 12px; color: var(--ink-3); }
.pknew { font-size: 10.5px; line-height: 1.7; padding: 0 7px; border-radius: 4px;
  font-weight: 600; background: #E7F3EC; color: #2E7D46; }
.pknotes { font-size: 14px; line-height: 1.85; color: var(--ink-2); margin: 8px 0 10px; }
.pkitem .srvmeta { margin-bottom: 4px; }
.pkitem .srvacts { margin-top: 10px; }

.pkicon { position: relative; display: inline-block; }
.pkicprev { position: relative; width: 76px; height: 76px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  overflow: hidden; cursor: pointer; font: inherit; font-size: 11.5px;
  background: var(--surface-2); border: 1px dashed var(--line-mid); color: var(--ink-3);
  transition: border-color .12s, color .12s; }
.pkicprev:hover { border-color: var(--primary); color: var(--primary); }
.pkicprev .lyricon { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pkicprev.has { border-style: solid; border-color: var(--line-ctl); padding: 0; }
.pkicprev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pkichint { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(20,26,36,.55); color: #fff;
  font-size: 11.5px; opacity: 0; transition: opacity .12s; }
.pkicprev:hover .pkichint, .pkicprev:focus-visible .pkichint { opacity: 1; }

.pkicdel { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
  border: 1px solid var(--line-ctl); border-radius: 50%;
  background: var(--surface); color: var(--ink-3); }
.pkicdel:hover { border-color: #B4453C; color: #B4453C; }
.pkicdel[hidden] { display: none; }

.actsep { font-size: 12px; font-weight: 700; color: var(--ink-3);
  padding-top: 6px; border-top: 1px solid var(--line); margin-top: 2px; }

@media (max-width: 720px) {
  .pklog { border-left: 0; border-right: 0; border-radius: 0; padding: 14px; }
  
  .thhead:has(> .srvapply) { flex-wrap: wrap; }
  .thhead:has(> .srvapply) .thtitle { flex: 1 1 200px; }
  .thhead > .srvapply { align-self: flex-start; margin-left: auto; }
}

.restag { flex: none; display: inline-block; font-size: 11px; line-height: 1.7;
  padding: 0 7px; border-radius: 4px; font-weight: 600; white-space: nowrap;
  background: #E8F4F6; color: #0F6B78; border: 1px solid #BBDDE3; }

.thhead h1 .restag { margin-left: 8px; vertical-align: 3px; }

.secdesc { font-size: 13px; color: var(--ink-3); margin: -2px 0 10px; line-height: 1.7; }
.ntinfo { display: flex; flex-direction: column; }
.ntinfo .ntr { padding: 7px 0; border-top: 1px solid var(--line); }
.ntinfo .ntr:first-child { border-top: 0; }

.ntinfo.wide .ntr .v { max-width: none; }
.nchead .shiny { font-size: 10.5px; line-height: 1.7; padding: 0 6px; border-radius: 4px;
  background: #FDF6E3; color: #8A6D1F; font-weight: 600; margin-left: 6px; }

.spawncard .sfield > .v > a,
.spawncard .sfield > .v > .reqgrp { display: flex; }

.reqgrp { align-items: center; flex-wrap: wrap; gap: 2px; }
.reqgrp em { font-style: normal; color: var(--ink-3); font-size: 11.5px; margin: 0 3px; }

.reqand { font-style: normal; color: var(--ink-2); font-size: 12.5px; margin: 0 3px; font-weight: 600; }

.reqwrap, .reqgrp { display: inline-flex; align-items: center; flex-wrap: wrap; }
.reqwrap { gap: 2px 4px; }

.evitem a.lnk:hover, .ntinfo a.lnk:hover { text-decoration: underline; }
.spawncard .evitem .itico { width: 18px; height: 18px; object-fit: cover;
  object-position: top center; margin-right: 4px; }

.spawncard a.lnk.withico { white-space: nowrap; }
.spawncard a.lnk.withico .pkico { width: 24px; height: 24px; object-fit: contain;
  image-rendering: pixelated; vertical-align: middle; margin-right: 3px; }

.mdpage > .fbar, .mdpage > .active { margin-left: -14px; margin-right: -14px; }
.mdpage > .fbar:first-child { margin-top: -4px; }

@media (max-width: 720px) { .mdpage > .fbar, .mdpage > .active { margin-left: -10px; margin-right: -10px; } }
@media (max-width: 400px) { .mdpage > .fbar, .mdpage > .active { margin-left: -8px; margin-right: -8px; } }
.nent[hidden], [data-sec][hidden] { display: none !important; }

.lootpool { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 10px; background: var(--surface); }
.lootpool:last-child { margin-bottom: 0; }
.lph { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.lph em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.lpe { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.lpe:first-of-type { border-top: 0; }

.lpp { flex: none; width: 46px; text-align: right; font-size: 12px; color: var(--ink-3);
  font-family: var(--mono, ui-monospace, Consolas, monospace); }
.lpi { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.secdesc b { font-weight: 600; color: var(--ink-2); }

.ntinfo.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.ntinfo.two .ntr { border-top: 1px solid var(--line); }

.ntinfo.two > .ntr:first-child { border-top: 0; }
.ntinfo.two:not(:has(> .ntr:first-child.wide)) > .ntr:nth-child(2) { border-top: 0; }
.ntinfo.two .ntr.wide { grid-column: 1 / -1; }
.ntinfo.two .ntr .v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }

.ntinfo .ntr > .k { width: 8.4em; }

@media (max-width: 720px) {
  .ntinfo.two { grid-template-columns: 1fr; }
  .ntinfo.two:not(:has(> .ntr:first-child.wide)) > .ntr:nth-child(2) {
    border-top: 1px solid var(--line); }
}

.lyrrow.lyrbad { border-color: #E0A0A0; background: #FDF4F3; }
.lyrdep { display: block; width: 100%; margin-top: 3px; font-size: 11px; color: #B4453C; }
.lyrapply:disabled { opacity: .5; cursor: not-allowed; }

.lyrrow { flex-wrap: wrap; }
.lyrbd { flex: 1 1 0; }

.lyrkind { flex: none; font-size: 10px; line-height: 16px; height: 16px; padding: 0 5px;
  border-radius: 4px; letter-spacing: .2px; }

.lyrkind.mod { font-family: var(--mono); }
.lyrkind.pak { font-size: 11px; padding: 0 4px; }
.lyrkind.mod { background: #EEF1F6; color: #5B6675; border: 1px solid #DDE3EC; }
.lyrkind.pak { background: #EAF3FF; color: #2F6BB5; border: 1px solid #CFE1F7; }

@keyframes lyrLand {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent);
         background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
  55%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
         background: var(--surface); }
}
.lyrrow.lyrland { position: relative; z-index: 3; border-color: var(--primary);
  animation: lyrLand 950ms cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  
  .lyrrow.lyrland { animation: none;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
}

.lyrnote { flex: none; margin-top: 8px; padding: 6px 9px; border-radius: 7px;
  font-size: 11.5px; line-height: 1.55;
  background: #FDF6E3; color: #7A6019; border: 1px solid #F0E2BE; }
.lyrnote.bad { background: #FDF4F3; color: #B4453C; border-color: #E0A0A0; }
.lyrnote[hidden] { display: none; }
@media (max-width: 720px) {
  
  .lyrnote { margin-top: 6px; padding: 5px 8px; font-size: 11px; }
}

.uhead { display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin: 10px 2px 2px; }

.uav { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  box-sizing: border-box; border: 1px solid var(--line-ctl);
  background: var(--brand); color: #5A3B28;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; line-height: 1; }
.uav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.unamerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uname { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink);
  line-height: 1.3; word-break: break-all; }
.umine { flex: none; font-size: 10.5px; line-height: 1.6; padding: 1px 7px; border-radius: 4px;
  background: var(--sel); color: var(--ink-2); border: 1px solid var(--line-ctl); }

.usig { font-size: 13px; color: var(--ink-2); line-height: 1.6;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.usig.none { color: var(--ink-3); font-style: italic; }

.ucontact { max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
@media (max-width: 720px) { .ucontact { max-width: 100%; } }

.umeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 12px; color: var(--ink-3); }
.umeta span + span::before { content: '·'; margin-right: 10px; color: var(--line-mid); }

.uacts { flex: none; align-self: flex-start; display: flex; flex-direction: column;
  align-items: flex-end; gap: 8px; }
.uactrow { display: flex; gap: 8px; }

.uacts > .actbtn.tiny { min-width: var(--uedw, auto); white-space: nowrap; }

.uchipn { font-style: normal; font-size: 11px; margin-left: 5px; opacity: .7; }
.bbschip.on .uchipn { opacity: .85; }

.upane { display: block; }

.uempty { padding: 46px 14px 52px; }
.uemptyt { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.uemptys { margin-top: 7px; font-size: 13px; color: var(--ink-3); line-height: 1.7; }
.uemptyact { margin-top: 16px; }

.uemptyact .actbtn { display: inline-block; padding-left: 18px; padding-right: 18px; }

.uexcerpt { margin-top: 4px; padding-left: 9px; border-left: 2px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.uprivate, .ubroken { flex: none; font-size: 10.5px; line-height: 1.7; padding: 0 7px;
  border-radius: 4px; font-weight: 600; white-space: nowrap; }
.uprivate { background: var(--sel); color: var(--ink-2); border: 1px solid var(--line-ctl); }
.ubroken { background: #FDF1F0; color: #B4453C; border: 1px solid #EEC3BE; }

.actf.row { flex-direction: row; align-items: center; gap: 9px; }
.actf.row input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0;
  accent-color: var(--primary); }
.actf.row > span { font-weight: 600; }

.favwhat { font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  background: var(--surface-2); border-radius: 9px; padding: 9px 11px; }
.favwhat b { color: var(--ink); font-weight: 600; word-break: break-word; }

.ulink { color: var(--ink-2); font-weight: 600; }
.ulink:hover { color: var(--link); text-decoration: underline; }

a.flname:hover { color: var(--link); text-decoration: underline; }
a.bbsav { text-decoration: none; }
a.bbsav:hover { border-color: var(--primary); }

.ulico { display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); image-rendering: auto; }
.ulico .lyricon { width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ulchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ulchip { font-size: 11px; line-height: 1.75; padding: 0 7px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap; }
.ulchip.more { background: none; border-color: transparent; color: var(--ink-3); }

.ulchip.bad { background: #FDF1F0; border-color: #EEC3BE; color: #B4453C;
  text-decoration: line-through; }

.srvrow2.down .ulchip.bad { opacity: 1; }

.srvapply.del:hover { border-color: #D9736A; color: #B4453C; background: #FDF4F3; }

@media (max-width: 720px) {
  
  .uhead { margin: 0; border-radius: 0; border-left: 0; border-right: 0;
    padding: 14px; gap: 12px; flex-wrap: wrap; }
  .uav { width: 56px; height: 56px; font-size: 24px; }
  .uname { font-size: 17px; }
  
  .uacts { flex: 1 0 100%; align-self: auto; align-items: stretch; }
  
  .uacts > .actbtn.tiny { width: auto; }
  
  .uactrow > .actbtn.tiny { flex: 1; }
  .uacts .actbtn.tiny { min-height: 40px; padding: 0 16px; }
  .uempty { padding: 40px 14px 44px; }
  
  .ulchip { font-size: 11.5px; }
}

.lyrtop { flex: none; padding: 0 2px 10px; }
.lyrtop:not(:has(> .lyrfav:not([hidden]))) { display: none; }
.lyrq { padding: 0; }

.lyrq input { width: 100%; font: inherit; font-size: 12px; padding: 4px 9px;
  border: 1px solid var(--line-ctl); border-radius: 7px; font-weight: 400;
  background: var(--surface); color: var(--ink); }
.lyrq input::placeholder { color: #A8B2BE; }
.lyrq input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }

.lyrrow.lyrhide { display: none !important; }

.admtabs { padding-bottom: 0; }
.admpane { display: block; }

.admsrow { flex-wrap: nowrap; }
.admq { flex: 1 1 auto; min-width: 0; max-width: 320px;
  font: inherit; font-size: 13.5px; padding: 7px 11px;
  border: 1px solid var(--line-ctl); border-radius: 8px;
  background: var(--surface); color: var(--ink); }
.admq::placeholder { color: #A8B2BE; }
.admq:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.admsrow .actbtn.tiny { flex: none; }
.admclr { flex: none; white-space: nowrap; }

.admrows { display: flex; flex-direction: column; gap: 8px; }
.admu2 { display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; }
.admu2:hover { border-color: var(--line-mid); }

.admav { text-decoration: none; }
.admav:hover { border-color: var(--primary); }
.admumid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admuline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.admuname { font-size: 14.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; word-break: break-all; }
.admuname:hover { color: var(--link); text-decoration: underline; }
.admumeta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px;
  font-size: 12px; color: var(--ink-3); }
.admumeta > span + span::before,
.admumeta > .admmail + span::before { content: '·'; margin-right: 9px; color: var(--line-mid); }

.admmail { font: inherit; font-size: 12px; line-height: inherit; padding: 0;
  border: 0; background: none; color: var(--ink-3); cursor: pointer;
  border-bottom: 1px dashed var(--line-mid); word-break: break-all; }
.admmail:hover { color: var(--ink-2); }
.admmail.on { color: var(--ink-2); border-bottom-color: transparent; }

.admuside { flex: none; display: flex; align-items: center; gap: 8px; }
.admuside select { font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line-ctl); border-radius: 8px;
  background: var(--surface); color: var(--ink); }
.admuside select:disabled { opacity: .55; cursor: not-allowed; }
.admself { flex: none; font-style: normal; font-size: 11.5px; color: var(--ink-3);
  white-space: nowrap; }

.admflash { flex: none; font-style: normal; font-size: 12px; color: #2E7D46;
  white-space: nowrap; }
.admflash.bad { color: #B4453C; }

.admc { padding-left: 16px; }
.admctag { background: var(--sel); color: var(--ink-2); }
.admdown { flex: none; font-size: 10.5px; line-height: 1.7; padding: 0 7px;
  border-radius: 4px; font-weight: 600; white-space: nowrap;
  background: #FDF1F0; color: #B4453C; border: 1px solid #EEC3BE; }
.admcmeta { font-size: 12px; color: var(--ink-3); gap: 4px 9px; }
.admcmeta > *:not(:first-child)::before { content: '·'; margin-right: 9px; color: var(--line-mid); }

.admwhy { margin-top: 5px; padding: 5px 9px; border-radius: 7px;
  background: #FDF4F3; border: 1px solid #F0DAD7;
  font-size: 12px; color: #8C4A43; line-height: 1.6; }

.srvrow2.down .admwhy { opacity: 1; }

.admsum { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 2px 4px; }
.admsc { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; }
.admsc b { display: block; font-size: 22px; font-weight: 700; color: var(--ink);
  line-height: 1.2; }
.admsc em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3);
  margin-top: 3px; }

.admro { margin: 10px 2px 0; padding: 10px 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }

.admtwrap { overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; }
.admtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.admtable th, .admtable td { text-align: left; padding: 8px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line); }
.admtable th { font-size: 12px; font-weight: 600; color: var(--ink-3);
  background: var(--surface-2); }
.admtable tbody tr:last-child td { border-bottom: 0; }
.admtable tbody tr:hover td { background: var(--sel); }
.admmono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

.admcov .m3dovin { width: min(400px, 100%); }
.admconf { gap: 12px; }
.admclead { font-size: 14.5px; color: var(--ink); line-height: 1.7; word-break: break-word; }

.admcwarn { padding: 9px 11px; border-radius: 8px;
  background: #FDF1F0; border: 1px solid #EEC3BE;
  font-size: 12.5px; color: #8C4A43; line-height: 1.7; }
.admcft { display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin-top: 2px; }

.actbtn.danger { background: #B4453C; }
.actbtn.danger:hover { filter: brightness(1.08); }

a.actbtn { display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; }

.actbtn.ghost2 { background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-ctl); }
.actbtn.ghost2:hover { background: var(--sel); color: var(--ink); filter: none; }

@media (max-width: 720px) {
  
  .admtabs, .admpane .bbsfilter { padding-left: 14px; padding-right: 14px; }
  .admpane .bbsbar { padding-left: 14px; padding-right: 14px; }
  .admrows { gap: 0; }
  
  .admu2 { flex-wrap: wrap; border-radius: 0; border-left: 0; border-right: 0;
    margin-top: -1px; padding: 12px 14px; gap: 10px; }
  .admuside { flex: 1 0 100%; }
  
  .admuside select { flex: 1; min-height: 40px; font-size: 16px; }
  .admflash, .admself { margin-left: auto; }

  .admc { padding-left: 14px; }
  .admsum { margin-left: 14px; margin-right: 14px; }
  .admro { margin-left: 14px; margin-right: 14px; }
  .admtwrap { border-radius: 0; border-left: 0; border-right: 0; }
  
  .admq { max-width: none; font-size: 16px; padding: 9px 12px; }
  
  .m3dov.admcov { align-items: flex-end; }
  .admcft { gap: 18px; }
  .admcft .actbtn.tiny { min-height: 42px; padding: 0 22px; }
}