/* 组队大厅样式 */



/* 设计令牌 */

:root{

  --blue:#1f9fff;

  --c-alert:#dc2626;--c-alert-2:#dc2626;--c-alert-deep:#b91c1c;--c-alert-soft:rgba(239,68,68,.12);

  --c-brand:#111111;--c-brand-2:#111111;--c-brand-3:#111111;--c-brand-deep:#111111;

  --c-brand-edge:rgba(0,0,0,.4);--c-brand-soft:rgba(0,0,0,.12);

  --c-link:#111111;

  --c-ok:#16a34a;--c-ok-soft:rgba(22,163,74,.12);

  --c-warn:#eab308;--c-warn-soft:rgba(234,179,8,.14);

  --edge:rgba(0,0,0,.08);--edge-2:rgba(0,0,0,.14);--edge-3:rgba(0,0,0,.26);

  --fill-0:#111111;--fill-2:#e8e8e8;

  --font-code:ui-monospace,'Cascadia Code',Consolas,Menlo,monospace;

  --font-serif:'Noto Serif SC','Songti SC',serif;

  --font-ui:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei UI','Microsoft YaHei',system-ui,sans-serif;

  --font-zh:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei UI','Microsoft YaHei',system-ui,sans-serif;

  --gx:clamp(18px, 3.5vw, 48px);

  --hover-bg:rgba(0,0,0,.04);

  --mesh-line:transparent;

  --page-bg:#ffffff;--page-w:1280px;

  --s0:#ffffff;--s1:#ffffff;--s2:#fafafa;--s3:#f5f5f5;--s4:#eeeeee;

  --shell-bg:#ffffff;

  --t-on-brand:#ffffff;

  --t0:#111111;--t1:#333333;--t2:rgba(0,0,0,.55);--t3:rgba(0,0,0,.38);

  --topnav-bg:rgba(255,255,255,.96);

  --hy-accent:#111111;--hy-accent-2:#333333;

  --sf-cyan:#1f9fff;--sf-indigo:#1f9fff;--sf-glow:rgba(0,0,0,.08);

  --game-orange:#111111;--game-blue:#1f9fff;

}



/* 基础重置 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;color-scheme:light}

html,body{

  background:var(--s0);color:var(--t0);

  font-family:var(--font-ui);font-size:15px;line-height:1.55;

  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;

}

body{overflow-x:hidden;min-height:100vh}

a{color:inherit;text-decoration:none}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

img,svg{display:block;max-width:100%}

::selection{background:var(--c-brand);color:#fff}



.cn{font-family:var(--font-zh)}

.mono{font-family:var(--font-code);font-weight:400;letter-spacing:.02em}

.up{text-transform:uppercase;letter-spacing:.18em}

.muted{color:var(--t1)}

.faint{color:var(--t2)}

.dim{color:var(--t3)}

.meter-num{font-variant-numeric:tabular-nums}



/* 顶栏状态条 */

.site-status{

  position:sticky;top:0;z-index:60;

  background:var(--shell-bg);border-bottom:1px solid var(--edge);

  height:30px;

  display:flex;align-items:center;

  padding:0 var(--gx);

  font-family:var(--font-code);font-size:11px;letter-spacing:.04em;color:var(--t1);

  white-space:nowrap;overflow:hidden;

}

.site-status > * + *{margin-left:24px}

.site-status .sep{color:var(--t3)}

.site-status .ver{color:var(--t0)}

.site-status .num{color:var(--t0);font-variant-numeric:tabular-nums}

.site-status .dot{

  display:inline-block;width:8px;height:8px;border-radius:50%;

  background:var(--c-ok);box-shadow:0 0 0 0 rgba(90,155,106,.5);

  animation:pulse 2.4s ease-in-out infinite;

  vertical-align:middle;margin-right:6px;transform:translateY(-1px);

}

.site-status .spacer{flex:1 1 auto;margin-left:24px;border-bottom:1px dashed var(--edge);height:1px}

.site-status .logout{

  font-family:var(--font-code);font-size:11px;color:var(--t1);

  padding:4px 10px;border:1px solid var(--edge);

  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;

  transition:all .25s;

}

.site-status .logout:hover{color:var(--t0);border-color:var(--edge-3);background:rgba(50,50,50,.045)}



/* 主导航 */

.nav{

  position:sticky;top:30px;z-index:55;

  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);

  border-bottom:1px solid var(--edge);

}

.chrome-nav{

  display:flex;align-items:center;justify-content:space-between;

  padding:14px var(--gx);max-width:var(--page-w);margin:0 auto;

}

.mark{display:flex;align-items:center;gap:12px;min-width:max-content}

.brand-mark-link{

  width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;

  transition:transform .2s, filter .2s;

}

.brand-mark-link:hover{transform:translateY(-1px);filter:saturate(1.08)}

.brand-mark{

  width:46px;height:46px;object-fit:contain;

  filter:drop-shadow(0 0 8px rgba(0,0,0,.14));

}

.brand-title{

  font-family:var(--font-serif);font-weight:600;letter-spacing:.02em;font-size:16px;

  display:inline-flex;align-items:baseline;gap:.18em;

  color:var(--t0);

  transition:color .2s;

}

.brand-title:hover{color:var(--c-brand-3)}

.brand-title .en{font-family:var(--font-ui);font-weight:600;letter-spacing:.04em;font-size:15px}

.nav-menu{display:flex;align-items:center;gap:6px;font-family:var(--font-code);font-size:12px}

.nav-menu a{

  position:relative;padding:8px 14px;color:var(--t1);

  letter-spacing:.1em;text-transform:uppercase;transition:color .25s;

}

.nav-menu a:hover{color:var(--t0)}

.nav-menu a.active{color:var(--t0)}

.nav-menu a.active::before,

.nav-menu a:hover::before{transform:scaleX(1)}

.nav-menu a::before{

  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;

  background:var(--c-brand);transform:scaleX(0);transform-origin:left;transition:transform .35s;

}

.nav-toggle{

  display:none;width:36px;height:36px;border:1px solid var(--edge);

  align-items:center;justify-content:center;cursor:pointer;color:var(--t1);

}



/* 按钮 */

.btn{

  font-family:var(--font-code);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;

  padding:16px 26px;border:1px solid var(--t0);color:var(--t0);

  background:transparent;cursor:pointer;position:relative;overflow:hidden;

  transition:color .25s;display:inline-flex;align-items:center;gap:10px;

}

.btn:hover{background:var(--t0);color:var(--s0)}

.btn.primary{border-color:#111;color:#fff;background:#111}

.btn.primary:hover{background:transparent;color:#111}

.btn.ghost{border-color:var(--edge-3);color:var(--t1)}

.btn.ghost:hover{color:#111;border-color:#111;background:var(--hover-bg)}

.btn.sm{padding:11px 18px;font-size:11px}

.btn .arr{width:14px;height:1px;background:currentColor;position:relative}

.btn .arr::before,.btn .arr::after{content:"";position:absolute;right:0;width:5px;height:1.5px;background:currentColor}

.btn .arr::before{top:-2px;transform:rotate(35deg);transform-origin:right}

.btn .arr::after{top:2px;transform:rotate(-35deg);transform-origin:right}



/* 内容区块 */

.block{padding:clamp(18px,2vw,28px) var(--gx) clamp(32px,4vw,56px);position:relative;border-bottom:1px solid var(--edge)}

.block.tight{padding:clamp(16px,2vw,24px) var(--gx) clamp(28px,3.2vw,44px)}

.block-inner{max-width:var(--page-w);margin:0 auto;width:100%}

.section-eyebrow{

  display:flex;align-items:center;gap:12px;

  font-family:var(--font-code);font-size:10px;color:var(--t2);letter-spacing:.2em;

  margin-bottom:10px;

}

.section-eyebrow::before{content:"";width:18px;height:1px;background:var(--c-link)}

.block-title{font-family:var(--font-zh);font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.3}

.block-title .accent{color:var(--c-brand)}



/* ── LOBBY 组队大厅顶栏 ── */

.hub-panel .kit-banner.team-lobby-banner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:12px 20px;

  padding:14px 20px;

  background:

    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(0,0,0,.04), transparent 55%),

    linear-gradient(180deg,#f7f7f7 0%,#fff 100%);

  border-bottom:1px solid #111;

}

.team-lobby-banner .tlb-main{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:10px 14px;

  min-width:0;

}

.team-lobby-banner .tlb-eyebrow{

  font-family:var(--font-code);

  font-size:10px;

  font-weight:700;

  letter-spacing:.16em;

  color:rgba(0,0,0,.5);

  text-transform:uppercase;

  gap:8px;

}

.team-lobby-banner .tlb-eyebrow .dot{

  width:7px;height:7px;

  border-radius:50%;

  background:#111;

  box-shadow:none;

  animation:none;

  flex-shrink:0;

}

.team-lobby-banner .tlb-copy{

  display:inline-flex;

  align-items:baseline;

  flex-wrap:wrap;

  gap:6px 8px;

  min-width:0;

}

.team-lobby-banner .tlb-title{

  font-family:var(--font-zh);

  font-size:16px;

  font-weight:600;

  color:#111;

  letter-spacing:.02em;

  line-height:1.2;

}

.team-lobby-banner .tlb-sep{

  color:rgba(0,0,0,.28);

  font-weight:600;

}

.team-lobby-banner .tlb-sub{

  font-family:var(--font-zh);

  font-size:14px;

  font-weight:500;

  color:rgba(0,0,0,.55);

  letter-spacing:.01em;

}

.team-lobby-banner .tlb-note{

  display:inline-flex;

  align-items:center;

  gap:4px;

  padding:6px 12px;

  font-family:var(--font-zh);

  font-size:12.5px;

  color:rgba(0,0,0,.55);

  background:#fff;

  border:1px solid #111;

  border-radius:999px;

  line-height:1.3;

  white-space:nowrap;

}

.team-lobby-banner .tlb-note strong{

  color:#111;

  font-weight:800;

  font-variant-numeric:tabular-nums;

}

@media (max-width:640px){

  .hub-panel .kit-banner.team-lobby-banner{

    padding:12px 14px;

    gap:10px;

  }

  .team-lobby-banner .tlb-title{font-size:15px}

  .team-lobby-banner .tlb-sub{font-size:13px}

  .team-lobby-banner .tlb-note{

    width:100%;

    justify-content:center;

    white-space:normal;

    text-align:center;

    border-radius:12px;

  }

}



/* ????????????????????????????????????????????????????????

   SUBPAGE HERO

   ????????????????????????????????????????????????????????*/

.page-hero{

  padding: clamp(28px,3vw,44px) var(--gx) clamp(20px,2.5vw,32px);

  border-bottom:1px solid var(--edge);

  position:relative;

  background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(0,0,0,.06), transparent 60%);

}

.leaf-spotlight-inner{max-width:var(--page-w);margin:0 auto;width:100%}

.page-crumbs{

  font-family:var(--font-code);font-size:11px;color:var(--t2);letter-spacing:.16em;text-transform:uppercase;

  margin-bottom:14px;display:flex;gap:10px;flex-wrap:wrap;

}

.page-crumbs a{color:var(--t1);transition:color .2s}

.page-crumbs a:hover{color:var(--t0)}

.page-crumbs .sep{color:var(--t3)}

.page-crumbs .now{color:var(--c-brand-3)}

.leaf-h{

  display:grid;grid-template-columns: auto 1fr;gap:24px;align-items:center;

}

.leaf-h h1{

  display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;

  font-family:var(--font-ui);font-weight:700;font-size:clamp(22px,2.6vw,32px);

  line-height:1.15;letter-spacing:0;margin:0;

}

.leaf-h h1 br{display:none}

.leaf-h h1 .zh{font-family:var(--font-zh);font-weight:500}

.leaf-h h1 .accent{color:var(--c-brand)}

.leaf-h .stat{

  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0;

  font-family:var(--font-code);font-size:11px;color:var(--t1);letter-spacing:.06em;

  line-height:1.5;text-align:right;

}

.leaf-h .stat > span{display:inline-flex;align-items:baseline;white-space:nowrap}

.leaf-h .stat > span:not(:last-child)::after{

  content:"�";margin:0 10px;color:var(--t3);

}

.leaf-h .stat .v{color:var(--t0)}





/* ????????????????????????????????????????????????????????

   ???? banner

   ????????????????????????????????????????????????????????*/

.raid-world-banner{

  position:relative;overflow:hidden;

  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;

  align-items:center;

  padding:20px 26px;

  border:1px solid var(--c-alert);background:rgba(0,0,0,.06);

  color:inherit;text-decoration:none;

  transition:background .25s, transform .25s;

}

.raid-world-banner:hover{background:rgba(0,0,0,.12)}

.wrb-bg{

  position:absolute;inset:0;pointer-events:none;

  background: radial-gradient(circle at 100% 50%, rgba(0,0,0,.18), transparent 60%);

}

.wrb-tag{

  display:inline-flex;align-items:center;gap:10px;

  font-family:var(--font-code);font-size:10.5px;color:var(--c-alert);

  letter-spacing:.2em;text-transform:uppercase;font-weight:600;

  padding:6px 12px;border:1px solid var(--c-alert);

  white-space:nowrap;

  position:relative;z-index:2;

}

.wrb-tag .dot{

  width:6px;height:6px;border-radius:50%;background:var(--c-alert);

  box-shadow:0 0 0 0 rgba(0,0,0,.5);animation:pulse 2.4s ease-in-out infinite;

}

.wrb-body{position:relative;z-index:2;min-width:0}

.wrb-body h3{

  font-family:var(--font-zh);font-weight:500;font-size:18px;color:var(--t0);

  letter-spacing:.02em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;

}

.wrb-body h3 .wrb-pct{font-family:var(--font-code);font-size:14px;color:var(--c-alert)}

.wrb-body h3 .wrb-pct strong{font-family:var(--font-ui);font-weight:700;font-size:18px}

.wrb-body h3 .wrb-deadline{font-family:var(--font-code);font-size:12px;color:var(--t2)}

.wrb-body p{

  font-family:var(--font-zh);font-size:13px;color:var(--t1);line-height:1.7;

  margin-top:4px;

}

.wrb-body p strong{color:var(--t0);font-weight:500}

.wrb-progress{

  width:100%;height:5px;background:var(--s2);border:1px solid var(--edge);

  margin-top:10px;overflow:hidden;

}

.wrb-progress span{

  display:block;height:100%;background:linear-gradient(90deg, var(--c-alert), var(--c-alert-deep));

  transition:width .8s ease;

}

.wrb-cta{

  position:relative;z-index:2;

  display:inline-flex;align-items:center;gap:10px;

  font-family:var(--font-zh);font-weight:500;font-size:14px;color:#111;

  padding:12px 20px;border:1px solid #111;background:transparent;

  white-space:nowrap;flex-shrink:0;

  transition:background .2s,border-color .2s,color .2s;

}

.raid-world-banner:hover .wrb-cta{background:#111;border-color:#111;color:#fff}

.wrb-arr{font-family:var(--font-ui);font-weight:600;font-size:16px}



/* ????????????????????????????????????????????????????????

   ????? � TAB ??

   ????????????????????????????????????????????????????????*/

.duty-nav{

  position:sticky;top:0;z-index:30;

  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);

  border-top:1px solid var(--edge-2);border-bottom:1px solid var(--edge-2);

}

.quest-chrome-nav{

  max-width:var(--page-w);margin:0 auto;padding:0 var(--gx);

  display:flex;gap:8px;align-items:center;height:54px;overflow-x:auto;

}

.duty-nav a{

  display:flex;align-items:center;gap:10px;padding:8px 14px;

  font-family:var(--font-code);font-size:11px;color:var(--t2);letter-spacing:.16em;text-transform:uppercase;

  white-space:nowrap;transition:color .2s;border-bottom:2px solid transparent;

}

.duty-nav a:hover{color:var(--t0)}

.duty-nav a.active{color:var(--c-brand-3);border-bottom-color:var(--c-brand)}

.duty-nav a .n{font-size:10px;color:var(--t3);font-weight:600}

.fas.n{font-weight:900 !important}

.duty-nav a.active .n{color:var(--c-brand-3)}

.duty-nav-gap{flex:1}

.duty-nav.duty-sect-bar a.active{

  color:var(--t0);background:rgba(0,0,0,.08);

}



/* ????????????????????????????????????????????????????????

   Tab Panel ??

   ????????????????????????????????????????????????????????*/

.duty-panels-section .duty-panel{display:none}

.duty-panels-section .duty-panel.is-active{display:block}

.duty-panels-section .dutyp-head{

  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;

  flex-wrap:wrap;margin-bottom:16px;

}

.duty-panels-section .dutyp-head h2{margin-top:4px}

.duty-panels-section .dutyp-desc{

  font-family:var(--font-zh);font-size:13.5px;color:var(--t1);line-height:1.7;

  margin-top:6px;max-width:62ch;

}

.duty-panels-section .dutyp-desc strong{color:var(--t0);font-weight:500}



/* 组队列表卡片 */

.team-grid{

  display:grid;

  grid-template-columns:repeat(3, minmax(0, 1fr));

  gap:18px;

}

@media (max-width:1080px){.team-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}

@media (max-width:680px){.team-grid{grid-template-columns:1fr}}



.team-card{

  background:#fff;

  border:1px solid #111;

  border-radius:14px;

  padding:18px 18px 16px;

  display:flex;

  flex-direction:column;

  gap:12px;

  box-shadow:0 8px 22px rgba(0,0,0,.04);

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;

  position:relative;

  overflow:hidden;

  cursor:pointer;

  min-height:100%;

}

.team-card:hover{

  transform:translateY(-2px);

  box-shadow:0 12px 28px rgba(0,0,0,.08);

}



.team-card-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;

}

.team-card-cat{

  display:inline-flex;

  align-items:center;

  height:22px;

  padding:0 8px;

  border:1px solid #e0e0e0;

  border-radius:999px;

  background:#f7f7f7;

  color:#555;

  font-size:11px;

  font-weight:700;

  line-height:1;

}

.team-status{

  display:inline-flex;

  align-items:center;

  height:22px;

  padding:0 8px;

  border:1px solid #ddd;

  border-radius:999px;

  font-family:var(--font-zh);

  font-size:11px;

  font-weight:700;

  letter-spacing:0;

  text-transform:none;

  line-height:1;

}

.team-status.recruiting{

  color:#166534;

  border-color:#bbf7d0;

  background:#f0fdf4;

}

.team-status.full{

  color:#92400e;

  border-color:#fde68a;

  background:#fffbeb;

}

.team-status.ended{

  color:#666;

  border-color:#e5e5e5;

  background:#f5f5f5;

}



.team-card-title{

  margin:0;

  color:#111;

  font-family:var(--font-zh);

  font-size:17px;

  font-weight:600;

  line-height:1.4;

  letter-spacing:-.01em;

  display:-webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient:vertical;

  overflow:hidden;

}



.team-card-by{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

}

.team-card-author{

  display:flex;

  align-items:center;

  gap:8px;

  min-width:0;

}

.team-card-avatar{

  width:28px;

  height:28px;

  border:1.5px solid #111;

  border-radius:50%;

  background:#f5f5f5;

  color:#333;

  display:grid;

  place-items:center;

  font-size:12px;

  font-weight:700;

  flex:0 0 auto;

  position:relative;

  overflow:hidden;

}

.team-card-avatar.has-avf{

  overflow:visible;

  border-color:transparent;

  background:transparent;

  z-index:2;

}

.team-card-by,

.team-card-author{

  overflow:visible;

}

.team-card-author-text{

  display:flex;

  flex-direction:column;

  gap:1px;

  min-width:0;

}

.team-card-author-text strong{

  color:#111;

  font-size:13px;

  font-weight:700;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

.team-card-author-text em{

  color:#999;

  font-size:11px;

  font-style:normal;

}

.team-card-members{

  display:inline-flex;

  align-items:center;

  gap:4px;

  height:24px;

  padding:0 8px;

  border:1px solid #ececec;

  border-radius:999px;

  background:#fafafa;

  color:#666;

  font-size:12px;

  font-weight:600;

  flex:0 0 auto;

}

.team-card-members svg{opacity:.7}

.team-card-members b{color:#111;font-weight:800}

.team-card-members i{font-style:normal;color:#bbb;margin:0 1px}



.team-card-desc{

  margin:0;

  padding:12px 12px;

  border:1px solid #efefef;

  border-radius:10px;

  background:linear-gradient(180deg, #fafafa 0%, #fff 100%);

  color:#555;

  font-family:var(--font-zh);

  font-size:13px;

  line-height:1.65;

  display:-webkit-box;

  -webkit-line-clamp:3;

  -webkit-box-orient:vertical;

  overflow:hidden;

  min-height:4.2em;

}



.team-card-foot{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:12px;

  margin-top:auto;

  padding-top:12px;

  border-top:1px solid #efefef;

}

.team-card-meta{

  display:flex;

  flex-wrap:wrap;

  gap:6px 10px;

  min-width:0;

  color:#888;

  font-size:11px;

  line-height:1.4;

}

.team-card-meta span{

  display:inline-flex;

  align-items:center;

  gap:4px;

  max-width:100%;

}

.team-card-meta svg{

  flex:0 0 auto;

  opacity:.65;

}

.team-card-time{color:#aaa}



.team-card-join{

  flex:0 0 auto;

  min-width:72px;

  height:32px;

  padding:0 14px;

  border:1px solid #111;

  border-radius:8px;

  background:#111;

  color:#fff;

  font-size:12px;

  font-weight:700;

  letter-spacing:.02em;

  cursor:pointer;

  transition:background .15s, border-color .15s, transform .15s;

}

.team-card:hover .team-card-join:not(.is-disabled):not(:disabled){

  background:#222;

  border-color:#222;

}

.team-card-join:active:not(.is-disabled):not(:disabled){

  transform:translateY(1px);

}

.team-card-join.is-disabled,

.team-card-join:disabled{

  background:#f5f5f5;

  border-color:#ddd;

  color:#999;

  cursor:not-allowed;

}

.team-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.team-card-chat{
  flex:0 0 auto;
  min-width:64px;
  height:32px;
  padding:0 12px;
  border:1px solid #111;
  border-radius:8px;
  background:#fff;
  color:#111;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.team-card-chat:hover{
  background:#111;
  border-color:#111;
  color:#fff;
}
.team-card-chat:active{
  transform:translateY(1px);
}

.team-card-join.is-joined,
.team-card-join.is-joined:disabled{
  background:#e8f5ee;
  border-color:#7bc49a;
  color:#1f7a4c;
  opacity:1;
  cursor:default;
  font-weight:700;
}

.duty-panels-section .dutyp-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.duty-panels-section .dutyp-head-actions .btn.ghost{
  border:1px solid #111;
  background:transparent;
  color:#111;
}
.duty-panels-section .dutyp-head-actions .btn.ghost:hover{
  background:#111;
  color:#fff;
}

#my-teams-modal .my-teams-panel{
  width:min(640px, 94vw);
  max-height:min(82vh, 720px);
  display:flex;
  flex-direction:column;
}
#my-teams-modal .my-teams-body{
  overflow:auto;
  padding:8px 4px 4px;
}
.my-teams-tabs{
  display:flex;
  gap:8px;
  margin:0 0 14px;
  padding:4px;
  background:#f3f3f3;
  border-radius:12px;
}
.my-teams-tab{
  flex:1;
  border:0;
  background:transparent;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  font-weight:700;
  color:#666;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.my-teams-tab em{
  font-style:normal;
  margin-left:6px;
  color:#111;
  font-weight:800;
}
.my-teams-tab.is-on{
  background:#fff;
  color:#111;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.my-teams-panel-list{min-height:120px;}
.my-teams-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:12px;
  padding:4px 0 8px;
}
.my-teams-page-btn{
  border:1px solid #ddd;
  background:#fff;
  border-radius:8px;
  padding:6px 14px;
  font-size:13px;
  cursor:pointer;
  color:#333;
}
.my-teams-page-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.my-teams-page-info{
  font-size:13px;
  color:#666;
  min-width:52px;
  text-align:center;
}
.my-teams-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border:1px solid #ececec;
  border-radius:12px;
  margin-bottom:8px;
  background:#fafafa;
}
.my-teams-row-main{
  flex:1;
  min-width:0;
  cursor:pointer;
}
.my-teams-row-main strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.my-teams-row-main span{
  font-size:12px;
  color:#777;
}
.my-teams-row-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.my-teams-loading,
.my-teams-empty,
.my-teams-empty-inline{
  padding:28px 12px;
  text-align:center;
  color:#888;
  font-size:13px;
}
.my-teams-empty-inline{
  padding:14px 8px;
  border:1px dashed #e5e5e5;
  border-radius:10px;
}



/* 创建位卡片 */

.empty-slot{

  border:1px dashed #cfcfcf !important;

  background:linear-gradient(180deg, #fafafa 0%, #fff 100%) !important;

  box-shadow:none !important;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:8px;

  min-height:220px;

  text-align:center;

  padding:28px 20px;

}

.empty-slot:hover{

  border-color:#111 !important;

  background:#fff !important;

  box-shadow:0 12px 28px rgba(0,0,0,.06) !important;

}

.vacant-plus{

  width:44px;

  height:44px;

  border:1.5px solid #ddd;

  border-radius:50%;

  display:grid;

  place-items:center;

  font-family:var(--font-zh);

  font-size:26px;

  font-weight:300;

  color:#999;

  line-height:1;

  transition:border-color .18s, color .18s, background .18s;

}

.empty-slot:hover .vacant-plus{

  border-color:#111;

  color:#111;

  background:#f5f5f5;

}

.vacant-text{

  font-family:var(--font-zh);

  font-size:15px;

  font-weight:700;

  color:#333;

}

.empty-slot:hover .vacant-text{color:#111}

.vacant-hint{

  font-family:var(--font-zh);

  font-size:12px;

  color:#999;

  letter-spacing:0;

  text-transform:none;

}



/* ????????????????????????????????????????????????????????

   ????

   ????????????????????????????????????????????????????????*/

.empty-state{

  text-align:center;padding:60px 20px;

  border:1px dashed var(--edge-2);

}

.empty-state-title{font-family:var(--font-zh);font-size:18px;color:var(--t1);margin-bottom:8px}

.empty-state-description{font-family:var(--font-zh);font-size:13px;color:var(--t2);margin-bottom:18px}

.empty-state-button{

  font-family:var(--font-code);font-size:11px;letter-spacing:.14em;text-transform:uppercase;

  padding:10px 20px;border:1px solid var(--c-brand);color:var(--c-brand-3);

  background:transparent;cursor:pointer;transition:all .2s;

}

.empty-state-button:hover{background:var(--c-brand);color:#fff}



/* ????????????????????????????????????????????????????????

   ????

   ????????????????????????????????????????????????????????*/

.coin{

  display:inline-flex;align-items:center;gap:6px;

  font-family:var(--font-code);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.04em;

}

.coin .ic{

  display:inline-grid;place-items:center;width:20px;height:20px;

  border:1px solid currentColor;font-size:9px;

}

.coin .n{font-weight:500}

.coin.tok-dirt{color:#b5894a}

.coin.tok-stone{color:#9aa0a6}

.coin.tok-brick{color:var(--c-brand-3)}

.tok-eq{

  font-family:var(--font-code);font-size:10px;color:var(--t2);letter-spacing:.06em;

  margin-left:8px;

}



/* ????????????????????????????????????????????????????????

   ????

   ????????????????????????????????????????????????????????*/

.page-nav{

  margin-top:28px;

  display:flex;align-items:center;justify-content:space-between;

  gap:14px;flex-wrap:wrap;

  padding-top:18px;border-top:1px solid var(--edge);

}

.page-nav:empty{display:none}

.pg-left,.pg-right{display:flex;gap:8px;align-items:center}

.pager-btn{

  font-family:var(--font-code);font-size:11px;font-weight:700;

  letter-spacing:.08em;text-transform:none;

  color:#555;background:#fff;

  border:1px solid #ddd;border-radius:999px;

  padding:8px 16px;cursor:pointer;

  transition:all .2s;

  text-decoration:none;display:inline-flex;

}

.pager-btn:hover:not(:disabled):not(.disabled){

  color:#fff;border-color:#111;

  background:#111;box-shadow:0 4px 12px rgba(0,0,0,.1);

}

.pager-btn:disabled,.pager-btn.disabled{opacity:.32;cursor:not-allowed;pointer-events:none}

.pager-pages{display:flex;gap:6px;align-items:center}

.pager-num{

  font-family:var(--font-code);font-size:13px;font-weight:700;

  font-variant-numeric:tabular-nums;

  color:#555;background:#fff;

  border:1px solid #ddd;border-radius:999px;

  width:36px;height:36px;

  display:grid;place-items:center;

  cursor:pointer;transition:all .2s;

  text-decoration:none;

}

.pager-num:hover{color:#111;border-color:#111}

.pager-num.is-active{color:#fff;border-color:#111;background:#111;box-shadow:0 3px 0 rgba(0,0,0,.18)}

.pager-gap{font-family:var(--font-code);color:var(--t2);font-size:13px;padding:0 4px}



/* ????????????????????????????????????????????????????????

   Modal

   ????????????????????????????????????????????????????????*/

.dialog{

  display:none;position:fixed;inset:0;z-index:200;

  background:rgba(17,17,17,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);

  align-items:center;justify-content:center;padding:20px;

}

.dialog.show{display:flex}

.modal-content{

  background:var(--s1,#fff);border:1px solid var(--edge-2);

  max-width:580px;width:100%;max-height:85vh;overflow-y:auto;

  padding:0;

  border-radius:18px;

  box-shadow:0 24px 64px rgba(0,0,0,.18), 0 2px 0 rgba(255,255,255,.6) inset;

}

.dialog-header{

  display:flex;justify-content:space-between;align-items:flex-start;

  padding:18px 22px;border-bottom:1px solid var(--edge);

  background:linear-gradient(180deg,#fafafa 0%,#fff 100%);

  border-radius:18px 18px 0 0;

}

.dialog-title{

  font-family:var(--font-zh);font-size:18px;font-weight:700;color:var(--t0);

  margin:0;

}

.dialog-close{

  font-size:22px;color:var(--t2);cursor:pointer;width:36px;height:36px;

  display:grid;place-items:center;border:1px solid var(--edge);border-radius:999px;

  background:#fff;transition:all .2s;flex-shrink:0;line-height:1;

}

.dialog-close:hover{color:var(--t0);border-color:var(--edge-3);background:#f5f5f5}

.dialog form{padding:22px}

.dialog .form-group{margin-bottom:14px}

.dialog .form-label{

  display:block;font-family:var(--font-code);font-size:10px;color:var(--t2);

  letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;

}

.dialog .form-input,

.dialog .form-textarea{

  width:100%;padding:11px 13px;

  background:var(--s0,#fff);border:1px solid var(--edge-2);color:var(--t0);

  font-family:var(--font-zh);font-size:13.5px;line-height:1.6;

  border-radius:12px;

  transition:border-color .2s, box-shadow .2s;

}

.dialog .form-input:focus,

.dialog .form-textarea:focus{

  outline:none;border-color:#111;

  box-shadow:0 0 0 3px rgba(0,0,0,.06);

}

.dialog .form-textarea{min-height:100px;resize:vertical}

.dialog .form-actions{

  display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:14px;

  border-top:1px solid var(--edge);

}

.dialog .btn-secondary{

  font-family:var(--font-zh);font-size:13px;font-weight:600;padding:11px 18px;

  border:1px solid var(--edge-2);color:var(--t1);background:#fff;

  cursor:pointer;transition:all .2s;border-radius:12px;

}

.dialog .btn-secondary:hover{border-color:#111;color:#111}

.dialog .btn-primary{

  font-family:var(--font-zh);font-size:13px;font-weight:700;padding:11px 20px;

  border:1px solid #111;color:#fff;background:#111;

  cursor:pointer;transition:all .2s;border-radius:12px;

  box-shadow:0 3px 0 rgba(0,0,0,.18);

}

.dialog .btn-primary:hover{background:#333;border-color:#333;transform:translateY(1px);box-shadow:0 2px 0 rgba(0,0,0,.18)}



/* ── 创建组队弹窗 · 黑白硬阴影 ─────────────────────────────── */

#create-modal.create-team-dialog{
  padding:clamp(16px,3vw,28px);
  align-items:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#create-modal .create-team-panel{
  max-width:560px;
  max-height:min(85vh, 720px);
  border:1px solid #111;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  animation:createTeamIn .22s ease both;
  box-shadow:8px 8px 0 #111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@keyframes createTeamIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

#create-modal .create-team-head{
  gap:14px;
  padding:20px 22px 16px;
  background:#fff;
  border-bottom:1px solid #e8e8e8;
  border-radius:10px 10px 0 0;
  flex-shrink:0;
}

#create-modal .create-team-head-copy{min-width:0;flex:1;}

#create-modal .create-team-eyebrow{
  display:inline-block;
  font-family:Consolas,'Courier New',monospace;
  font-size:11px;font-weight:700;
  letter-spacing:.16em;color:#111;opacity:.4;margin-bottom:6px;
}

#create-modal .create-team-head .dialog-title{
  font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#111;
}

#create-modal .create-team-lead{
  margin:6px 0 0;max-width:44ch;
  font-family:var(--font-zh);font-size:12px;line-height:1.55;color:#666;
}

#create-modal .create-team-head .dialog-close{
  width:32px;height:32px;
  border:1px solid #d8d8d8;border-radius:8px;
  background:#fff;color:#111;opacity:.75;
}

#create-modal .create-team-head .dialog-close:hover{
  opacity:1;border-color:#111;background:#111;color:#fff;
}

#create-modal .create-team-form{
  padding:8px 22px 22px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

#create-modal .create-team-section{
  padding:14px 0 4px;
  border-top:1px dashed #e0e0e0;
}

#create-modal .create-team-section:first-of-type{
  border-top:0;padding-top:10px;
}

#create-modal .create-team-section-title{
  margin:0 0 12px;
  font-family:var(--font-zh);font-size:13px;font-weight:700;color:#111;
}

#create-modal .create-team-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}

#create-modal .form-group{margin-bottom:12px}

#create-modal .form-label{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-zh);font-size:12px;font-weight:700;
  letter-spacing:0;text-transform:none;color:#111;margin-bottom:7px;
}

#create-modal .form-input,
#create-modal .form-textarea,
#create-modal .form-select,
#create-modal input[type="text"],
#create-modal input[type="number"],
#create-modal input[type="date"],
#create-modal input[type="datetime-local"],
#create-modal textarea,
#create-modal select{
  width:100%;
  padding:10px 12px;
  background:#fff;
  border:1px solid #111;
  border-radius:8px;
  color:#111;
  font-family:var(--font-zh);font-size:13px;line-height:1.5;
  outline:none;box-sizing:border-box;
  transition:box-shadow .15s;
}

#create-modal .form-input:focus,
#create-modal .form-textarea:focus,
#create-modal .form-select:focus,
#create-modal input:focus,
#create-modal textarea:focus,
#create-modal select:focus{
  border-color:#111;
  box-shadow:2px 2px 0 #111;
}

#create-modal .form-hint{
  font-family:Consolas,'Courier New',monospace;
  font-size:10px;font-weight:500;
  letter-spacing:.04em;color:#111;
  padding:2px 7px;border-radius:8px;background:#f5f5f5;
  border:1px solid #111;
}

#create-modal .form-hint.req{
  color:#111;background:#f5f5f5;border-color:#111;
}

#create-modal .create-team-actions{
  margin-top:8px;padding-top:16px;
  border-top:1px solid #e8e8e8;
  gap:10px;
}

#create-modal .create-team-actions .btn-secondary{
  border:1px solid #111 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#111 !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

#create-modal .create-team-actions .btn-secondary:hover{
  background:#111 !important;color:#fff !important;
}

#create-modal .create-team-actions .btn-primary{
  min-width:120px;
  border:1px solid #111 !important;
  border-radius:8px !important;
  background:#111 !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

#create-modal .create-team-actions .btn-primary:hover{
  background:#000 !important;border-color:#000 !important;
  transform:none;box-shadow:none !important;
}

@media (max-width:560px){
  #create-modal .create-team-panel{box-shadow:5px 5px 0 #111;}
  #create-modal .create-team-grid{grid-template-columns:1fr;}
  #create-modal .create-team-head,
  #create-modal .create-team-form{padding-left:16px;padding-right:16px;}
  #create-modal .create-team-actions{flex-direction:column-reverse;}
  #create-modal .create-team-actions .btn-secondary,
  #create-modal .create-team-actions .btn-primary{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  #create-modal .create-team-panel{animation:none;}
}



/* ── 组队详情弹窗 · 黑白硬阴影 ─────────────────────────────── */

#team-detail-modal.team-detail-dialog{
  padding:clamp(20px,4vw,36px);
  align-items:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:auto;
}

#team-detail-modal .team-detail-panel,
#team-detail-modal .modal-content.team-detail-panel{
  max-width:520px !important;
  max-height:min(85vh, 720px);
  border:1px solid #111 !important;
  border-radius:10px !important;
  overflow:hidden;
  overflow-y:hidden;
  display:flex;
  flex-direction:column;
  background:#fff !important;
  animation:teamDetailIn .22s ease both;
  box-shadow:8px 8px 0 #111 !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@keyframes teamDetailIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

#team-detail-modal .team-detail-head{
  gap:14px;
  padding:20px 22px 16px;
  background:#fff;
  border-bottom:1px solid #e8e8e8;
  border-radius:10px 10px 0 0;
  flex-shrink:0;
}

#team-detail-modal .team-detail-head-copy{min-width:0;flex:1;}

#team-detail-modal .team-detail-eyebrow{
  display:inline-block;
  font-family:Consolas,'Courier New',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:#111;
  opacity:.4;
  margin-bottom:6px;
}

#team-detail-modal .team-detail-head .dialog-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
  color:#111;
}

#team-detail-modal .team-detail-lead{
  margin:6px 0 0;
  max-width:42ch;
  font-size:12px;
  line-height:1.55;
  color:#666;
}

#team-detail-modal .dialog-close{
  width:32px;
  height:32px;
  border:1px solid #d8d8d8;
  border-radius:8px;
  background:#fff;
  color:#111;
  opacity:.7;
}

#team-detail-modal .dialog-close:hover{
  opacity:1;
  border-color:#111;
  background:#111;
  color:#fff;
}

#team-detail-modal .team-detail-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

#team-detail-modal .team-detail-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 22px 8px;
}

#team-detail-modal .team-detail-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:8px 0 6px;
}

#team-detail-modal .team-detail-title{
  margin:0;
  flex:1;
  min-width:0;
  font-size:18px;
  font-weight:800;
  color:#111;
  line-height:1.35;
  letter-spacing:-.01em;
}

#team-detail-modal .team-status{
  border-radius:6px;
  letter-spacing:.04em;
  flex-shrink:0;
  height:auto;
  min-height:22px;
  padding:3px 8px;
  font-family:Consolas,'Courier New',monospace;
  font-size:10px;
  font-weight:700;
  border:1px solid #111;
  background:#fff;
  color:#111;
}

#team-detail-modal .team-status.recruiting{
  background:#111;
  color:#fff;
  border-color:#111;
}

#team-detail-modal .team-status.full{
  background:#f4f4f4;
  color:#111;
  border-color:#111;
}

#team-detail-modal .team-status.ended{
  background:#fff;
  color:#888;
  border-color:#ccc;
}

#team-detail-modal .team-detail-section{
  padding:14px 0 6px;
  border-top:1px solid #eee;
  margin-bottom:0;
}

#team-detail-modal .team-detail-section:first-of-type,
#team-detail-modal .team-detail-hero + .team-detail-section{
  border-top:0;
  padding-top:8px;
}

#team-detail-modal .team-detail-section-title{
  margin:0 0 10px;
  font-size:12px;
  font-weight:800;
  color:#111;
  letter-spacing:.04em;
}

#team-detail-modal .team-detail-description{
  margin:0;
  font-size:13px;
  color:#444;
  line-height:1.75;
  white-space:pre-wrap;
}

#team-detail-modal .team-detail-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
}

#team-detail-modal .team-detail-info-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:10px 12px;
  font-size:13px;
  border:1px solid #111;
  border-radius:8px;
  background:#fff;
}

#team-detail-modal .team-detail-info-label{
  width:auto;
  flex-shrink:0;
  color:#888;
  font-size:11px;
  line-height:1.3;
}

#team-detail-modal .team-detail-info-value{
  color:#111;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.4;
}

#team-detail-modal .team-detail-contact{
  padding:12px 14px;
  background:#fafafa;
  border:1px solid #111;
  border-radius:8px;
}

#team-detail-modal .team-detail-contact .team-detail-section-title{margin-bottom:8px}

#team-detail-modal .team-detail-contact-hidden,
#team-detail-modal .team-detail-contact-info{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#555;
}

#team-detail-modal .team-detail-contact-info{
  color:#111;
  font-family:Consolas,'Courier New',monospace;
  font-size:13px;
}

#team-detail-modal .team-detail-members-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:0;
  border-bottom:none;
  letter-spacing:0;
  text-transform:none;
}

#team-detail-modal .team-detail-members-title .team-detail-section-title{margin:0}

#team-detail-modal .team-detail-members-count{
  font-family:Consolas,'Courier New',monospace;
  font-size:11px;
  font-weight:700;
  color:#111;
  padding:3px 8px;
  border:1px solid #111;
  border-radius:6px;
  background:#fff;
}

#team-detail-modal .team-detail-members-list{display:flex;flex-wrap:wrap;gap:8px}

#team-detail-modal .team-detail-member-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid #111;
  border-radius:8px;
  background:#fff;
}

#team-detail-modal .team-detail-member-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #ddd;
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
  display:block;
}

#team-detail-modal .team-detail-member-avatar.has-avf{
  overflow:visible;
  border-color:transparent;
  background:transparent;
  z-index:2;
}

#team-detail-modal .team-detail-member-card{
  overflow:visible;
}

#team-detail-modal .team-detail-member-name{
  font-size:13px;
  color:#111;
  font-weight:700;
}

#team-detail-modal .team-detail-member-role{
  font-size:11px;
  color:#888;
  letter-spacing:0;
}

#team-detail-modal .team-detail-member-role.leader{
  color:#111;
  font-weight:800;
}

#team-detail-modal .team-detail-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin:0;
  padding:14px 22px 18px;
  border-top:1px solid #e8e8e8;
  background:#fff;
  flex-shrink:0;
}

#team-detail-modal .team-detail-actions .btn-primary,
#team-detail-modal .team-detail-actions .btn-secondary,
#team-detail-modal .team-detail-actions .btn-danger,
#team-detail-modal .team-detail-actions .btn-chat{
  min-width:100px;
  border-radius:8px;
  box-shadow:none;
  transform:none;
}

#team-detail-modal .team-detail-actions .btn-chat{
  background:#fff;
  border:1px solid #111;
  color:#111;
  font-weight:800;
  cursor:pointer;
  padding:8px 16px;
  font-size:13px;
}

#team-detail-modal .team-detail-actions .btn-chat:hover{
  background:#111;
  color:#fff;
}

#team-detail-modal .team-detail-actions .btn-primary{
  background:#111;
  border-color:#111;
  color:#fff;
  font-weight:800;
}

#team-detail-modal .team-detail-actions .btn-primary:hover{
  background:#000;
  border-color:#000;
  transform:none;
  box-shadow:none;
}

#team-detail-modal .team-detail-actions .btn-secondary{
  border:1px solid #111;
  color:#111;
  background:#fff;
  font-weight:700;
}

#team-detail-modal .team-detail-actions .btn-secondary:hover{
  background:#111;
  color:#fff;
}

#team-detail-modal .team-detail-actions .btn-primary.disabled,
#team-detail-modal .team-detail-actions .btn-primary:disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

#team-detail-modal .btn-danger,
.dialog .btn-danger{
  font-size:13px;
  font-weight:800;
  padding:11px 20px;
  border:1px solid #111;
  color:#111;
  background:#fff;
  cursor:pointer;
  transition:background .15s, color .15s;
  border-radius:8px;
}

#team-detail-modal .btn-danger:hover,
.dialog .btn-danger:hover{
  background:#111;
  border-color:#111;
  color:#fff;
}

/* 活动周期 */
#team-detail-modal .team-detail-timeline{
  margin:0;
  padding:14px 0 4px;
  background:transparent;
  border:0;
  border-radius:0;
}

#team-detail-modal .team-detail-timeline-body{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
  padding:12px;
  border:1px solid #111;
  border-radius:8px;
  background:#fafafa;
}

#team-detail-modal .team-detail-timeline-body.single .team-date-node{max-width:140px}

#team-detail-modal .team-date-node{
  flex:1;
  max-width:120px;
  padding:12px 10px 10px;
  background:#fff;
  border:1px solid #111;
  border-radius:8px;
  box-shadow:none;
  text-align:center;
}

#team-detail-modal .team-date-node.end{background:#fff}

#team-detail-modal .team-date-day{
  font-family:Consolas,'Courier New',monospace;
  font-size:26px;
  font-weight:800;
  color:#111;
  line-height:1;
}

#team-detail-modal .team-date-md{
  font-size:12px;
  color:#555;
  margin-top:6px;
  font-weight:600;
}

#team-detail-modal .team-date-y{
  font-family:Consolas,'Courier New',monospace;
  font-size:11px;
  color:#999;
  margin-top:2px;
}

#team-detail-modal .team-date-tag{
  display:inline-block;
  margin-top:10px;
  font-size:10px;
  font-weight:700;
  padding:3px 10px;
  border-radius:6px;
  border:1px solid #111;
  color:#111;
  background:#fff;
}

#team-detail-modal .team-date-tag.start{
  color:#fff;
  background:#111;
  border-color:#111;
}

#team-detail-modal .team-date-tag.end{
  color:#111;
  background:#fff;
  border-color:#111;
}

#team-detail-modal .team-date-bridge{
  width:56px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}

#team-detail-modal .team-date-bridge-line{
  flex:1;
  width:1px;
  min-height:10px;
  background:#111;
  border-radius:0;
  opacity:.25;
}

#team-detail-modal .team-date-bridge-pill{
  margin:6px 0;
  padding:4px 10px;
  background:#fff;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  color:#111;
  white-space:nowrap;
  box-shadow:none;
  border:1px solid #111;
}

@media (max-width:560px){
  #team-detail-modal .team-detail-panel,
  #team-detail-modal .modal-content.team-detail-panel{
    box-shadow:5px 5px 0 #111 !important;
  }
  #team-detail-modal .team-detail-head,
  #team-detail-modal .team-detail-scroll,
  #team-detail-modal .team-detail-actions{padding-left:16px;padding-right:16px;}
  #team-detail-modal .team-detail-actions{flex-direction:column-reverse;}
  #team-detail-modal .team-detail-actions .btn-secondary,
  #team-detail-modal .team-detail-actions .btn-primary,
  #team-detail-modal .team-detail-actions .btn-danger,
  #team-detail-modal .team-detail-actions .btn-chat{width:100%;min-width:0;}
  #team-detail-modal .team-detail-timeline-body{padding:10px 8px;}
  #team-detail-modal .team-date-bridge{width:40px;}
  #team-detail-modal .team-detail-info-grid{
    grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
    gap:6px;
  }
  #team-detail-modal .team-detail-info-row{padding:8px 10px;}
  #team-detail-modal .team-detail-info-value{font-size:12px;}
}

@media (prefers-reduced-motion:reduce){
  #team-detail-modal .team-detail-panel{animation:none;}
}



/* legacy detail helpers (list pages / fallback) */

.team-detail-content{padding:26px}

.team-detail-header{

  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;

  margin-bottom:20px;flex-wrap:wrap;

}

.team-detail-title{

  font-family:var(--font-zh);font-size:22px;font-weight:600;color:var(--t0);line-height:1.4;

}

.team-detail-section{margin-bottom:18px}

.team-detail-description{

  font-family:var(--font-zh);font-size:14px;color:var(--t1);line-height:1.8;

  white-space:pre-wrap;

}



/* ????????????????????????????????????????????????????????

   Toast

   ????????????????????????????????????????????????????????*/

.duty-toast{

  position:fixed;left:50%;bottom:24px;z-index:260;transform:translate(-50%,18px);

  max-width:min(560px,calc(100vw - 32px));padding:12px 16px;border:1px solid rgba(255,255,255,.14);

  background:#111;color:#fff;-webkit-text-fill-color:#fff;font-family:var(--font-zh);font-size:13px;line-height:1.6;

  box-shadow:0 18px 50px rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;

}

.duty-toast.show{opacity:1;transform:translate(-50%,0)}



/* ????????????????????????????????????????????????????????

   Loading Spinner

   ????????????????????????????????????????????????????????*/

.loading{display:flex;align-items:center;justify-content:center;padding:40px}

.loading-spinner{

  width:32px;height:32px;border:3px solid var(--edge-2);

  border-top-color:var(--c-brand-3);border-radius:50%;animation:spin .8s linear infinite;

}

.error-message{padding:40px;text-align:center;color:var(--t2);font-family:var(--font-zh);font-size:14px}



/* ????????????????????????????????????????????????????????

   FOOTER

   ????????????????????????????????????????????????????????*/

footer{background:var(--s1);padding: clamp(18px, 1.8vw, 28px) var(--gx) 18px;color:var(--t1)}

.sitefoot-inner{max-width:var(--page-w);margin:0 auto}

.sitefoot-bot{

  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;

  font-family:var(--font-code);font-size:11px;color:var(--t2);letter-spacing:.06em;

}

.sitefoot-bot .legal{font-family:var(--font-zh);font-size:12px;color:var(--t2);max-width:60ch;line-height:1.7}

.sitefoot-bot .stamp{display:inline-flex;align-items:center;gap:8px}

.sitefoot-bot .stamp .dot{width:8px;height:8px;border-radius:50%;background:var(--c-ok);animation:pulse 2.4s ease-in-out infinite}



/* ????????????????????????????????????????????????????????

   ??

   ????????????????????????????????????????????????????????*/

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

@keyframes pulseAmber{0%,100%{box-shadow:0 0 0 0 rgba(197,131,45,.5)}50%{box-shadow:0 0 0 6px rgba(197,131,45,0)}}

@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

@keyframes spin{to{transform:rotate(360deg)}}



/* ????????????????????????????????????????????????????????

   RESPONSIVE

   ????????????????????????????????????????????????????????*/

@media (max-width:1180px){

  .nav-menu{display:none}

  .nav.nav-expanded .nav-menu{

    display:flex;position:absolute;left:0;right:0;top:100%;

    flex-direction:column;align-items:stretch;gap:0;

    background:rgba(8,8,10,.96);border-bottom:1px solid var(--edge);

    padding:8px var(--gx) 14px;

  }

  .nav.nav-expanded .nav-menu a{padding:13px 0;border-bottom:1px solid var(--edge)}

  .nav.nav-expanded .nav-menu a::before{left:0;right:0;bottom:7px}

  .nav-toggle{display:flex}

}



@media (max-width:1080px){

  .team-grid{grid-template-columns:repeat(2,1fr)}

}



@media (max-width:760px){

  .site-status{font-size:10px}

  .site-status > * + *{margin-left:12px}

  .site-status .lat{display:none}

  .raid-world-banner{grid-template-columns:1fr;gap:14px;padding:18px}

  .wrb-cta{justify-content:center}

  .leaf-h{grid-template-columns:1fr}

  .leaf-h .stat{justify-content:flex-start}

  .leaf-h h1 br{display:inline}

  .team-grid{grid-template-columns:1fr}

  .page-nav{flex-direction:column;align-items:stretch;gap:10px}

  .pager-btn{text-align:center;justify-content:center}

  .pager-pages{justify-content:center;flex-wrap:wrap}

}



@media (max-width:560px){

  .team-card{padding:18px}

}



/* ????????????????????????????????????????????????????????

   VIP ????

   ????????????????????????????????????????????????????????*/

.vip-nickname{

  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);

  -webkit-background-clip: text;-webkit-text-fill-color: transparent;

  background-clip: text;

  animation: vip-gradient 3s ease infinite;

  background-size: 200% auto;

  font-weight: bold;

}

@keyframes vip-gradient{

  0%{background-position:0% center}

  50%{background-position:100% center}

  100%{background-position:0% center}

}



/* 组队之星侧栏 */

.page-intro-deck.is-star[data-star-kind="team"],

.page-intro-deck.is-star{

  --team-star-blue:#1f9fff;

  position:relative;

  isolation:isolate;

  gap:15px;

  padding:28px 24px 26px;

  border-left:1px solid rgba(0,0,0,.08);

  background:transparent;

  overflow:hidden;

  animation:teamStarIn .55s cubic-bezier(.22,1,.36,1) both;

}

@keyframes teamStarIn{

  from{opacity:0;transform:translateX(12px)}

  to{opacity:1;transform:translateX(0)}

}



/* 扫描线底纹 */

.page-intro-deck.is-star::after{

  content:"";

  position:absolute;inset:0;z-index:0;pointer-events:none;

  background:

    repeating-linear-gradient(

      0deg,

      transparent,

      transparent 3px,

      rgba(0,0,0,.015) 3px,

      rgba(0,0,0,.015) 4px

    );

  opacity:.7;mix-blend-mode:multiply;

}



/* 顶部能量条（transform 滑动，避免 background-position 不生效） */

.page-intro-deck.is-star::before{

  content:"";

  position:absolute;

  top:0;left:0;right:auto;

  height:3px;width:200%;

  z-index:3;pointer-events:none;

  background:repeating-linear-gradient(

    90deg,

    #111 0,

    #111 12%,

    #1f9fff 28%,

    #9ad8ff 36%,

    #fff 42%,

    #1f9fff 52%,

    #111 68%,

    #111 100%

  );

  background-size:50% 100%;

  opacity:1;

  transform:translateX(0);

  animation:teamStarBar 2s linear infinite;

  will-change:transform;

}

@keyframes teamStarBar{

  from{transform:translateX(0)}

  to{transform:translateX(-50%)}

}



/* 角落装饰角标 */

.page-intro-deck.is-star[data-star-kind="team"] .pid-label,

.page-intro-deck.is-star .pid-label{

  position:relative;z-index:1;

  padding:6px 12px 6px 9px;

  letter-spacing:.14em;

  color:#0a5f9e;

  background:linear-gradient(135deg,#f0f7ff 0%,#d9ebfa 100%);

  border:1px solid rgba(31,159,255,.3);

  box-shadow:0 2px 0 rgba(31,159,255,.14), 0 8px 18px rgba(31,159,255,.1);

  animation:teamStarBadgePulse 2.8s ease-in-out infinite;

}

@keyframes teamStarBadgePulse{

  0%,100%{box-shadow:0 2px 0 rgba(31,159,255,.14), 0 8px 18px rgba(31,159,255,.1)}

  50%{box-shadow:0 2px 0 rgba(31,159,255,.18), 0 10px 24px rgba(31,159,255,.18)}

}

.page-intro-deck.is-star[data-star-kind="team"] .pid-label-mark,

.page-intro-deck.is-star .pid-label-mark{

  background:linear-gradient(145deg,#5ec1ff,#1f9fff 45%,#0a6bb8);

  box-shadow:0 0 10px rgba(31,159,255,.4);

  animation:teamStarSpin 6s linear infinite;

}

@keyframes teamStarSpin{

  from{transform:rotate(0deg)}

  to{transform:rotate(360deg)}

}



.page-intro-deck.is-star .pid-player,

.page-intro-deck.is-star .pid-chips,

.page-intro-deck.is-star .pid-meter,

.page-intro-deck.is-star .pid-foot{

  position:relative;z-index:1;

}



/* 玩家卡片玻璃态 */

.page-intro-deck.is-star .pid-player{

  padding:14px;

  border-radius:16px;

  background:rgba(255,255,255,.78);

  border:1px solid rgba(255,255,255,.9);

  box-shadow:

    0 1px 0 rgba(255,255,255,.95) inset,

    0 10px 28px rgba(15,30,50,.08),

    0 0 0 1px rgba(31,159,255,.08);

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);

  transition:transform .25s ease, box-shadow .25s ease;

}

.page-intro-deck.is-star .pid-player:hover{

  transform:translateY(-2px);

  box-shadow:

    0 1px 0 rgba(255,255,255,.95) inset,

    0 16px 36px rgba(15,30,50,.12),

    0 0 0 1px rgba(31,159,255,.18);

}



.page-intro-deck.is-star .pid-nick{

  font-size:14px;font-weight:800;letter-spacing:0;

}

.page-intro-deck.is-star .pid-nick .pid-k{

  font-size:13px;font-weight:500;letter-spacing:0;

}

.page-intro-deck.is-star .pid-region{

  color:#0a6bb8;font-weight:600;letter-spacing:0;

}

.page-intro-deck.is-star .pid-region .pid-k,

.page-intro-deck.is-star .pid-talents .pid-k{

  font-weight:500;letter-spacing:0;

}



/* 头像光环 */

.page-intro-deck.is-star .pid-orb,

.page-intro-deck.is-star .pid-orb--avatar{

  width:82px;height:82px;

  border:3px solid #fff;

  position:relative;

  box-shadow:

    0 0 0 2px rgba(17,17,17,.1),

    0 0 0 5px rgba(31,159,255,.18),

    0 10px 0 rgba(0,0,0,.08),

    0 16px 32px rgba(31,159,255,.28);

  animation:teamStarOrbFloat 3.6s ease-in-out infinite;

}

@keyframes teamStarOrbFloat{

  0%,100%{transform:translateY(0)}

  50%{transform:translateY(-3px)}

}

.page-intro-deck.is-star .pid-orb::before,

.page-intro-deck.is-star .pid-orb--avatar::before{

  content:"";

  position:absolute;inset:-7px;border-radius:50%;z-index:-1;

  background:conic-gradient(from 0deg, transparent 0%, #1f9fff 22%, transparent 40%, #111 62%, transparent 78%, #1f9fff 100%);

  animation:teamStarRing 2.8s linear infinite;

  opacity:.85;

}

@keyframes teamStarRing{

  to{transform:rotate(360deg)}

}



/* 操作芯片（须压过 site-chrome 后加载的 color:#111，避免黑底黑字） */

.page-intro-deck.is-star .pid-chips li[data-act]{

  padding:8px 13px;

  border-radius:999px;

  background:rgba(255,255,255,.92);

  color:#111;

  border:1px solid rgba(0,0,0,.08);

  box-shadow:0 3px 0 rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.04);

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s, background .18s, color .18s;

}

.page-intro-deck.is-star .pid-chips li[data-act] .pid-lab{

  color:inherit;

}

body .page-intro-deck.is-star .pid-chips li[data-act]:hover{

  border-color:#111 !important;

  background:#111 !important;

  color:#fff !important;

  transform:translateY(-2px);

  box-shadow:0 5px 0 rgba(0,0,0,.12), 0 10px 18px rgba(0,0,0,.1);

}

body .page-intro-deck.is-star .pid-chips li[data-act]:hover .pid-lab,

body .page-intro-deck.is-star .pid-chips li[data-act]:hover .pid-ico,

body .page-intro-deck.is-star .pid-chips li[data-act]:hover .pid-ico svg{

  color:#fff !important;

  stroke:currentColor;

}

.page-intro-deck.is-star .pid-chips li[data-act]:active{

  transform:translateY(1px);

  box-shadow:0 1px 0 rgba(0,0,0,.08);

}

/* 非悬停时恢复图标原色 */

.page-intro-deck.is-star .pid-chips li[data-act="like"] .pid-ico{color:#e11d48}

.page-intro-deck.is-star .pid-chips li[data-act="gift"] .pid-ico{color:#0a6bb8}

.page-intro-deck.is-star .pid-chips li[data-act="friend"] .pid-ico{color:#111}



/* 热度条 */

.page-intro-deck.is-star .pid-meter{

  height:8px;

  background:rgba(0,0,0,.06);

  border:1px solid rgba(0,0,0,.06);

  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;

}

.page-intro-deck.is-star .pid-meter > i{

  position:relative;

  background:linear-gradient(90deg,#111 0%,#1a1a1a 28%,#1f9fff 72%,#7ec8ff 100%);

  background-size:160% 100%;

  animation:teamStarMeter 2.4s ease-in-out infinite;

  box-shadow:0 0 12px rgba(31,159,255,.45);

}

@keyframes teamStarMeter{

  0%,100%{background-position:0% 0;filter:brightness(1)}

  50%{background-position:100% 0;filter:brightness(1.12)}

}



.page-intro-deck.is-star .pid-foot{

  font-size:11px;letter-spacing:.1em;

}

.page-intro-deck.is-star .pid-foot strong{

  color:#0a6bb8;

  text-shadow:0 0 12px rgba(31,159,255,.35);

  font-variant-numeric:tabular-nums;

}



@media (prefers-reduced-motion:reduce){

  .page-intro-deck.is-star,

  .page-intro-deck.is-star::before,

  .page-intro-deck.is-star .pid-label,

  .page-intro-deck.is-star .pid-label-mark,

  .page-intro-deck.is-star .pid-orb,

  .page-intro-deck.is-star .pid-orb--avatar,

  .page-intro-deck.is-star .pid-orb::before,

  .page-intro-deck.is-star .pid-orb--avatar::before,

  .page-intro-deck.is-star .pid-meter > i{

    animation:none!important;

  }

}

@media (max-width:860px){

  .page-intro-deck.is-star .pid-orb::before,

  .page-intro-deck.is-star .pid-orb--avatar::before{inset:-5px}

}




/* page-intro stats readability + title links */
.page-intro-stats .k{
  color:#3a4a63;
  font-family:var(--font-zh,'Noto Sans SC','Microsoft YaHei',sans-serif);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:none;
}
.page-intro-stats .v{
  color:#1a2433;
  font-family:var(--font-zh,'Noto Sans SC','Microsoft YaHei',sans-serif);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
}
.page-intro-stats .v.r{color:#c23b2a;}
.page-intro-stats .v.g{color:#1a7a4c;}
.page-intro-stats .stat-post-link{
  display:inline-block;
  max-width:14em;
  overflow:hidden;
  text-decoration:none;
  text-overflow:ellipsis;
  vertical-align:bottom;
  white-space:nowrap;
}
.page-intro-stats .stat-post-link:hover{text-decoration:underline;}
.page-intro-stats a.v.g{color:#1a7a4c;}
.page-intro-stats a.v.r{color:#c23b2a;}

/* ── 队伍群聊仓库 ── */
#team-chat-modal.team-chat-dialog{
  z-index: 1200;
}
#team-chat-modal .team-chat-panel{
  width:min(920px, 96vw);
  max-height:min(84vh, 720px);
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border:1px solid #111;
  border-radius:10px;
  background:#fff;
  box-shadow:6px 6px 0 #111;
}
#team-chat-modal .team-chat-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px 12px;
  border-bottom:1px solid #e8e8e8;
}
#team-chat-modal .team-chat-eyebrow{
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  color:#888;
  font-weight:700;
  margin-bottom:4px;
}
#team-chat-modal .team-chat-head .dialog-title{
  margin:0;
  font-size:18px;
  font-weight:800;
}
#team-chat-modal .team-chat-lead{
  margin:4px 0 0;
  font-size:12px;
  color:#666;
}
#team-chat-modal .team-chat-body{
  display:flex;
  min-height:0;
  flex:1;
  height:520px;
  max-height:calc(84vh - 80px);
}
#team-chat-modal .team-chat-members{
  width:220px;
  flex-shrink:0;
  border-right:1px solid #eee;
  display:flex;
  flex-direction:column;
  background:#fafafa;
}
#team-chat-modal .team-chat-members-head{
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  border-bottom:1px solid #eee;
  color:#111;
}
#team-chat-modal .team-chat-members-list{
  overflow:auto;
  flex:1;
  padding:8px;
}
#team-chat-modal .team-chat-member-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:8px;
}
#team-chat-modal .team-chat-member-row:hover{background:#f0f0f0;}
#team-chat-modal .team-chat-member-av{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #ddd;
  flex-shrink:0;
}
#team-chat-modal .team-chat-member-meta{flex:1;min-width:0;}
#team-chat-modal .team-chat-member-name{
  font-size:13px;
  font-weight:700;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#team-chat-modal .team-chat-member-role{
  font-size:11px;
  color:#888;
}
#team-chat-modal .team-chat-member-role.leader{color:#111;font-weight:800;}
#team-chat-modal .team-chat-kick-btn{
  flex-shrink:0;
  border:1px solid #c23b2a;
  background:#fff;
  color:#c23b2a;
  font-size:11px;
  font-weight:700;
  border-radius:6px;
  padding:4px 8px;
  cursor:pointer;
}
#team-chat-modal .team-chat-kick-btn:hover{background:#c23b2a;color:#fff;}
#team-chat-modal .team-chat-members-empty{
  padding:16px 8px;
  text-align:center;
  color:#999;
  font-size:12px;
}
#team-chat-modal .team-chat-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
#team-chat-modal .team-chat-history{
  flex:1;
  overflow:auto;
  padding:14px 16px;
  background:#fff;
}
#team-chat-modal .team-chat-empty{
  text-align:center;
  color:#999;
  font-size:13px;
  padding:40px 12px;
}
#team-chat-modal .team-chat-msg{
  display:flex;
  gap:10px;
  margin-bottom:14px;
  align-items:flex-start;
}
#team-chat-modal .team-chat-msg.is-system{
  justify-content:center;
}
#team-chat-modal .team-chat-sys{
  font-size:12px;
  color:#888;
  background:#f5f5f5;
  border-radius:999px;
  padding:4px 12px;
}
#team-chat-modal .team-chat-msg-av{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #e5e5e5;
  flex-shrink:0;
}
#team-chat-modal .team-chat-msg-body{min-width:0;flex:1;}
#team-chat-modal .team-chat-msg-meta{
  display:flex;
  gap:8px;
  align-items:baseline;
  margin-bottom:4px;
}
#team-chat-modal .team-chat-msg-name{
  font-size:13px;
  font-weight:700;
  color:#111;
}
#team-chat-modal .team-chat-msg-time{
  font-size:11px;
  color:#aaa;
}
#team-chat-modal .team-chat-msg-text{
  font-size:14px;
  color:#333;
  line-height:1.55;
  word-break:break-word;
  white-space:pre-wrap;
}
#team-chat-modal .team-chat-composer{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid #e8e8e8;
  background:#fafafa;
}
#team-chat-modal .team-chat-input{
  flex:1;
  min-width:0;
  height:40px;
  border:1px solid #ddd;
  border-radius:8px;
  padding:0 12px;
  font-size:14px;
  outline:none;
}
#team-chat-modal .team-chat-input:focus{
  border-color:#111;
}
#team-chat-modal .team-chat-send{
  height:40px;
  min-width:88px;
  border-radius:8px;
  background:#111;
  border:1px solid #111;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
#team-chat-modal .team-chat-send:hover{background:#000;}
#team-chat-modal .team-chat-send:disabled{opacity:.5;cursor:not-allowed;}

@media (max-width:720px){
  #team-chat-modal .team-chat-body{
    flex-direction:column;
    height:auto;
    max-height:calc(90vh - 72px);
  }
  #team-chat-modal .team-chat-members{
    width:100%;
    max-height:140px;
    border-right:0;
    border-bottom:1px solid #eee;
  }
  #team-chat-modal .team-chat-history{min-height:240px;}
}