/* 共镜 UI 4.0 —— 观战页外观层，覆盖 er_radar.py 内置基础样式。
   组件规范取自 shadcn/ui（zinc 深色），图标为 Lucide（dock.js 注入）。
   电脑端：顶栏 + 左工具栏 + 按需展开的设置面板 + 右侧战况，中间是地图。
   手机端：顶栏 + 战况条 + 底部标签栏，设置 / 战况 / 地图都走底部抽屉。
   大面板一律实色、不用 backdrop-filter：地图每帧重绘时毛玻璃要整块重新合成，手机上最卡。
   ID / 类名与 er_radar.py、dock.js 的事件绑定一一对应，不能改名。 */

:root{
  --c-bg:#09090b;
  --c-card:#0f0f11;
  --c-muted:#18181b;
  --c-hover:#232327;
  --c-border:#27272a;
  --c-border-2:#3f3f46;
  --c-fg:#fafafa;
  --c-fg-2:#a1a1aa;
  --c-fg-3:#71717a;
  --c-brand:#f59e0b;
  --c-brand-hi:#fbbf24;
  --c-brand-ink:#1c1204;
  --c-brand-bg:rgba(245,158,11,.12);
  --c-brand-ln:rgba(245,158,11,.4);
  --c-ok:#22c55e;
  --c-danger:#f43f5e;
  --c-panel:rgba(12,12,14,.97);
  --c-shadow:0 12px 32px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
  --font-num:"DIN Alternate","Bahnschrift","SF Mono",ui-monospace,Consolas,monospace;

  --top-h:56px;
  --rail-w:52px;
  --tools-w:360px;
  --roster-w:320px;
  --panel-top:calc(var(--sat) + var(--top-h) + 12px);
  --dock-left:calc(var(--sal) + 12px + var(--rail-w) + 8px);

  --glass:var(--c-panel);
  --glass-solid:var(--c-card);
  --glass-hi:rgba(255,255,255,.04);
  --hair:var(--c-border);
  --hair-2:var(--c-border-2);
  --txt:var(--c-fg);
  --txt-2:var(--c-fg-2);
  --txt-3:var(--c-fg-3);
  --accent:var(--c-brand);
  --r-lg:12px;--r-md:10px;--r-sm:8px;
  --shadow:var(--c-shadow);
}
html,body{font-family:"Inter","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;background:var(--c-bg)}
body *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.glass{background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--c-shadow)}
#scrim-t{display:none}
#scrim-b{height:88px;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent)}
#nva-brand,#dock-handle,#roster-handle{display:none!important}
#veil{background:rgba(0,0,0,.6)}
.tnum{font-variant-numeric:tabular-nums}

/* 通用按钮基元 */
.gj-btn{
  height:36px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--c-border);border-radius:8px;background:var(--c-muted);color:var(--c-fg-2);
  font-size:13px;font-weight:550;cursor:pointer;transition:background .15s,color .15s,border-color .15s
}
.gj-btn:hover{background:var(--c-hover);color:var(--c-fg)}
.gj-btn svg,.gj-ic{width:16px;height:16px;flex:none}

/* ===================================================================== 顶栏 */
#gj-topbar{
  position:fixed;left:0;right:0;top:0;z-index:590;pointer-events:none;
  height:calc(var(--sat) + var(--top-h));background:var(--c-bg);border-bottom:1px solid var(--c-border)
}
#gj-brand{position:fixed;z-index:640;left:calc(var(--sal) + 16px);top:calc(var(--sat) + 10px);height:36px;display:flex;align-items:center;gap:10px;user-select:none}
.gj-mark{
  width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--c-brand);color:var(--c-brand-ink)
}
.gj-mark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.gj-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.gj-copy b{font-size:15px;line-height:1;font-weight:700;letter-spacing:.12em;color:var(--c-fg)}
.gj-copy small{font-size:11px;line-height:1;color:var(--c-fg-3);white-space:nowrap}
.gj-live{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:600;color:var(--c-fg-2);background:var(--c-muted);border:1px solid var(--c-border)
}
.gj-live i{width:6px;height:6px;border-radius:50%;background:var(--c-ok)}

html body #nva-back{
  top:calc(var(--sat) + 10px)!important;right:calc(var(--sar) + 16px)!important;z-index:650!important;
  height:36px!important;padding:0 12px 0 9px!important;border-radius:8px!important;
  background:var(--c-muted)!important;border:1px solid var(--c-border)!important;box-shadow:none!important;
  color:var(--c-fg-2)!important;font-size:13px!important;font-weight:550!important
}
html body #nva-back:hover{background:var(--c-hover)!important;color:var(--c-fg)!important}

/* 重连：平时是普通按钮，断线时琥珀色提醒 */
#btn-relink{
  position:fixed;z-index:645;left:calc(var(--sal) + 280px);top:calc(var(--sat) + 10px);bottom:auto;transform:none;
  height:36px;padding:0 12px 0 10px;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--c-border);border-radius:8px;background:var(--c-muted);color:var(--c-fg-2);
  font-size:13px;font-weight:550;line-height:1;box-shadow:none;cursor:pointer;transition:background .15s,color .15s
}
#btn-relink::before{
  content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E") center/contain no-repeat
}
#btn-relink:hover{background:var(--c-hover);color:var(--c-fg)}
#btn-relink.hot{color:var(--c-brand-hi);border-color:var(--c-brand-ln);background:var(--c-brand-bg)}
#btn-relink:disabled::before{animation:gj-spin 1s linear infinite}
@keyframes gj-spin{to{transform:rotate(360deg)}}

/* 战况计数：顶栏正中，点开向下展开详情 */
#island{
  top:calc(var(--sat) + 10px);left:50%;right:auto;transform:translateX(-50%);
  width:auto;min-width:0;max-width:none;z-index:900;overflow:hidden;
  background:var(--c-muted);border:1px solid var(--c-border);border-radius:8px;box-shadow:none;transition:border-color .15s
}
#island:hover{border-color:var(--c-border-2)}
#island:active{transform:translateX(-50%)}
#island.open{width:400px;border-radius:12px;background:var(--c-card);border-color:var(--c-border-2);box-shadow:var(--c-shadow)}
#isl-main{height:34px;min-height:0;box-sizing:border-box;padding:0 14px;gap:0;justify-content:center}
#isl-dot{width:7px;height:7px;margin-right:12px;background:var(--c-ok);animation:none;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
#island.replay #isl-dot{background:var(--c-brand);box-shadow:0 0 0 3px rgba(245,158,11,.18)}
#island.stale #isl-dot{background:var(--c-fg-3);box-shadow:none}
.isl-stat{gap:5px;padding:0 12px;border-right:1px solid var(--c-border)}
.isl-stat:first-of-type{padding-left:0}
.isl-stat b{font:700 16px/1 var(--font-num);color:var(--c-fg)}
.isl-stat i{font-size:12px;color:var(--c-fg-3)}
#isl-sep{display:none}
#isl-near{padding-left:12px;font-size:12px;color:var(--c-fg-3)}
#isl-near b{font:700 15px/1 var(--font-num);color:var(--c-danger)}
#isl-ext{gap:6px;padding:6px 10px 2px}
.isl-cell{background:var(--c-muted);border:1px solid var(--c-border);border-radius:8px;padding:9px 2px}
.isl-cell b{font:700 16px/1.15 var(--font-num)}
.isl-cell span{font-size:11px;color:var(--c-fg-3)}
.isl-cell.off b{color:var(--c-fg-3)}
#isl-foot{padding:10px 14px 8px;font-size:11px;color:var(--c-fg-3)}

/* 威胁罗盘：挂在战况条正下方，左右即自己朝向的左右 */
#threat{
  position:fixed;z-index:635;left:50%;transform:translateX(-50%);
  top:calc(var(--sat) + var(--top-h) + 52px);width:min(340px,calc(100vw - 760px));
  display:flex;flex-direction:column;gap:4px;padding:6px 12px 6px;
  background:var(--c-panel);border:1px solid var(--c-border);border-radius:10px;box-shadow:var(--c-shadow)
}
#threat[hidden]{display:none}
#th-comp{position:relative;height:26px;margin:0 10px}
.th-tick{position:absolute;top:0;width:1px;height:6px;background:var(--c-border-2)}
.th-tick.th-mid{height:9px;background:var(--c-fg-2)}
.th-lbl{position:absolute;top:8px;transform:translateX(-50%);font-size:10px;color:var(--c-fg-3);white-space:nowrap}
#th-pips{position:absolute;left:0;right:0;top:0;height:9px}
.th-pip{position:absolute;top:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;box-shadow:0 0 0 2px var(--c-bg)}
.th-pip.aim{box-shadow:0 0 0 2px var(--c-bg),0 0 0 3px #f43f5e}
#th-call{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
#th-dir{font-size:13px;font-weight:700;color:var(--c-fg);white-space:nowrap}
#th-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--c-fg-2)}
#th-aim{flex:none;height:18px;padding:0 7px;border-radius:999px;background:rgba(244,63,94,.14);border:1px solid rgba(244,63,94,.45);color:#fda4af;font-size:11px;font-weight:650;line-height:18px}
#th-aim[hidden]{display:none}
#th-more{flex:none;font-size:11.5px;color:var(--c-fg-3);white-space:nowrap}

/* 视图：2D / 3D 主分段（选中为亮底）+ 3D 工具图标 */
#viewswitch{
  top:calc(var(--sat) + 10px);right:calc(var(--sar) + 102px);left:auto;z-index:640;
  height:36px;box-sizing:border-box;padding:2px;gap:2px;display:flex;align-items:center;
  background:var(--c-muted);border:1px solid var(--c-border);border-radius:8px;box-shadow:none;transition:none
}
body.roster-hidden #viewswitch{right:calc(var(--sar) + 102px)}
#viewswitch .vs-seg{display:flex;align-items:center;gap:2px;padding:0;background:transparent;border-radius:0}
#viewswitch .vs{height:30px;min-width:44px;padding:0 12px;border-radius:6px;font:700 13px/1 var(--font-num);letter-spacing:.04em;color:var(--c-fg-2);box-shadow:none}
#viewswitch .vs:hover{color:var(--c-fg);background:var(--c-hover)}
#viewswitch .vs.on{background:var(--c-fg);color:var(--c-bg)}
#viewswitch .vs-ic{position:relative;width:30px;height:30px;border-radius:6px;background:transparent;color:var(--c-fg-2);box-shadow:none}
#viewswitch .vs-ic:hover{background:var(--c-hover);color:var(--c-fg)}
#viewswitch .vs-ic.on{background:var(--c-hover);color:var(--c-brand-hi);box-shadow:inset 0 0 0 1px var(--c-border-2)}
#viewswitch .vs-ic svg{width:16px;height:16px;stroke-width:2}
#viewswitch .vs-ic span{display:none}
body.mode3d #viewswitch #s-2d{margin-left:4px}
#viewswitch>#s-pip,#viewswitch>#s-follow{display:none}
body.mode3d #viewswitch>#s-pip{display:flex}

/* 悬停提示 */
[data-gj-tip]{position:relative}
[data-gj-tip]::after{
  content:attr(data-gj-tip);position:absolute;z-index:5;padding:5px 8px;border-radius:6px;
  background:var(--c-fg);color:var(--c-bg);font-size:12px;font-weight:550;line-height:1.2;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s,transform .12s
}
#viewswitch [data-gj-tip]::after{top:calc(100% + 8px);left:50%;transform:translate(-50%,-3px)}
#viewswitch [data-gj-tip]:hover::after{opacity:1;transform:translate(-50%,0)}
#gj-rail [data-gj-tip]::after{left:calc(100% + 10px);top:50%;transform:translate(-3px,-50%)}
#gj-rail [data-gj-tip]:hover::after{opacity:1;transform:translate(0,-50%)}

/* ===================================================================== 左工具栏（电脑端） */
#gj-rail{
  position:fixed;z-index:620;left:calc(var(--sal) + 12px);top:var(--panel-top);width:var(--rail-w);box-sizing:border-box;
  display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--c-panel);border:1px solid var(--c-border);
  border-radius:12px;box-shadow:var(--c-shadow)
}
#gj-rail button{
  width:38px;height:38px;padding:0;display:grid;place-items:center;border:0;border-radius:8px;
  background:transparent;color:var(--c-fg-2);cursor:pointer;transition:background .15s,color .15s
}
#gj-rail button:hover{background:var(--c-hover);color:var(--c-fg)}
#gj-rail button.on{background:var(--c-hover);color:var(--c-fg);box-shadow:inset 0 0 0 1px var(--c-border-2)}
#gj-rail button.on.is-toggle{color:var(--c-brand-hi)}
#gj-rail button svg{width:18px;height:18px}
#gj-rail hr{width:24px;height:1px;margin:4px auto;border:0;background:var(--c-border)}

/* ===================================================================== 面板通用 */
#dock,#roster{background:var(--c-panel);border:1px solid var(--c-border);border-radius:12px;color:var(--c-fg);box-shadow:var(--c-shadow)}
#dock>.pan-head,#roster>.pan-head{
  height:52px;box-sizing:border-box;padding:0 10px 0 14px;margin:0;gap:10px;align-items:center;
  border-bottom:1px solid var(--c-border);background:transparent
}
.pan-title{gap:8px;font-size:14px;font-weight:650;color:var(--c-fg);flex-wrap:nowrap;align-items:center;min-width:0}
.pan-title .sub,#pan-sub{flex-basis:auto!important;font-size:12px;font-weight:450;color:var(--c-fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pan-name{font-size:14px;font-weight:650;color:var(--c-fg)}
#uname:empty{display:none}
.pan-icon{width:28px;height:28px;border-radius:7px;flex:none;display:grid;place-items:center;color:var(--c-fg-2);background:var(--c-muted);border:1px solid var(--c-border)}
.pan-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--c-fg-3)}
.icon-btn:hover{background:var(--c-hover);color:var(--c-fg)}
.icon-btn svg{width:16px;height:16px}

/* ===================================================================== 设置面板 */
.dock-layout{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.dock-tabs{
  flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:10px 12px 0;padding:3px;
  background:var(--c-muted);border:1px solid var(--c-border);border-radius:9px
}
.dock-tabs button{
  height:32px;padding:0 4px;border:0;border-radius:6px;background:transparent;color:var(--c-fg-3);
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font-size:13px;font-weight:550;line-height:1;transition:background .15s,color .15s
}
.dock-tabs button svg{width:15px;height:15px;flex:none}
.dock-tabs button:hover{color:var(--c-fg)}
.dock-tabs button[aria-selected=true]{background:var(--c-bg);color:var(--c-fg);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px var(--c-border)}
.dock-tabs button:focus-visible,#dock input:focus-visible,#dock button:focus-visible{outline:2px solid var(--c-fg-2);outline-offset:2px}
.dock-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--c-border-2) transparent}
.dock-content::-webkit-scrollbar{width:8px}
.dock-content::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.dock-page{padding:16px 12px 24px}
.dock-page[hidden]{display:none!important}
.dock-page-head{margin:0 2px 16px}
.dock-page h2{margin:0 0 4px;font-size:15px;font-weight:650;color:var(--c-fg)}
.dock-page-head p{margin:0;font-size:12px;line-height:1.5;color:var(--c-fg-3)}
.dock-group{margin:0 0 18px}
.dock-group h3{margin:0 2px 8px;font-size:12px;font-weight:600;color:var(--c-fg-2)}

.dock-controls{background:var(--c-card);border:1px solid var(--c-border);border-radius:10px;padding:0 12px}
#dock .dock-controls .row{margin:0;padding:12px 0;border-radius:0;border-bottom:1px solid var(--c-border);gap:12px}
#dock .dock-controls .row:last-child{border-bottom:0}
#dock .dock-controls .row:hover{background:transparent}
#dock .dock-controls .row-btn{width:100%;margin:0;cursor:pointer}
#dock .row-col{min-width:0}
#dock .row-t{font-size:13px;font-weight:550;color:var(--c-fg)}
#dock .row-s{margin-top:3px;font-size:12px;line-height:1.45;color:var(--c-fg-3)}
#dock .row-go{color:var(--c-fg-3);font-size:18px}

/* 开关：两列卡片，整块可点 */
.dock-switches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#dock .dock-switches .row{
  margin:0;height:42px;box-sizing:border-box;padding:0 10px 0 12px;gap:8px;min-width:0;
  background:var(--c-card);border:1px solid var(--c-border);border-radius:9px;cursor:pointer;transition:background .15s,border-color .15s
}
#dock .dock-switches .row:hover{background:var(--c-muted)}
#dock .dock-switches .row:has(.sw.on){border-color:var(--c-border-2)}
#dock .dock-switches .row-col{flex:1;min-width:0}
#dock .dock-switches .row-t{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-fg-2)}
#dock .dock-switches .row:has(.sw.on) .row-t{color:var(--c-fg)}
#dock .dock-switches .row-s{display:none}

/* shadcn Switch */
#dock .sw{flex:none;width:36px;height:20px;margin:0;transform:none;border-radius:20px;background:var(--c-border-2);box-shadow:none;transition:background .2s}
#dock .sw::after{top:2px;left:2px;width:16px;height:16px;background:var(--c-fg);box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .2s cubic-bezier(.3,.7,.4,1)}
#dock .sw:active::after{width:16px}
#dock .sw.on{background:var(--c-fg)}
#dock .sw.on::after{transform:translateX(16px);background:var(--c-bg)}

/* shadcn Slider：dock.js 写 --p 作为已填充比例 */
#dock .dock-controls .sld{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;margin:0;padding:13px 0;border-bottom:1px solid var(--c-border)}
#dock .dock-controls .sld:last-child{border-bottom:0}
#dock .sld>span:first-child{grid-column:1;grid-row:1;font-size:13px!important;font-weight:550;color:var(--c-fg)!important;white-space:normal!important;line-height:1.4}
#dock .sld>.v{
  grid-column:2;grid-row:1;align-self:center;min-width:44px;box-sizing:border-box;padding:2px 7px;border-radius:6px;
  background:var(--c-muted);border:1px solid var(--c-border);text-align:center;font:600 12px/1.4 var(--font-num);color:var(--c-fg)
}
#dock .sld>.vs-seg{grid-column:1 / -1;grid-row:2}
#dock input[type=range]{
  grid-column:1 / -1;grid-row:2;-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:18px;margin:0;
  background:transparent;cursor:pointer;accent-color:var(--c-fg)
}
#dock input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--c-fg) 0 var(--p,50%),var(--c-border-2) var(--p,50%) 100%)}
#dock input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--c-bg);border:2px solid var(--c-fg);box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .12s}
#dock input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
#dock input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--c-border-2)}
#dock input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--c-fg)}
#dock input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--c-bg);border:2px solid var(--c-fg)}

/* shadcn Tabs 式分段选择 */
#dock .vs-seg,#dock .pick{
  display:flex;gap:2px;width:100%;box-sizing:border-box;margin:0;padding:3px;
  background:var(--c-muted);border:1px solid var(--c-border);border-radius:9px
}
#dock .vs,#dock .pick button{
  flex:1;min-width:0;height:30px;padding:0 4px;border:0;border-radius:6px;background:transparent;
  color:var(--c-fg-3);font-size:12.5px;font-weight:550;cursor:pointer;box-shadow:none;transition:background .15s,color .15s
}
#dock .vs:hover,#dock .pick button:hover{color:var(--c-fg)}
#dock .vs.on,#dock .pick button.on{background:var(--c-bg);color:var(--c-fg);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px var(--c-border)}
#dock .pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
#dock .pick button{font-size:12px;padding:0 2px}

#edge-seg{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px!important;padding:3px!important}
#edge-seg .vs{
  flex:none;width:100%;max-width:100%;min-width:0;padding:0 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600
}
#edge-lines .dock-note{font-size:12px!important;font-weight:550!important;line-height:1.45!important;color:var(--c-fg-3)!important}

/* 3D 人物模型：图形卡片 */
#model3dseg{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important;padding:0!important;background:transparent!important;border:0!important}
#model3dseg .vs{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--c-card);border:1px solid var(--c-border);border-radius:9px}
#model3dseg .vs:hover{background:var(--c-muted)}
#model3dseg .vs.on{background:var(--c-muted);border-color:var(--c-fg-2);box-shadow:none}
#model3dseg .vs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#model3dseg .vs span{font-size:12px}

/* 颜色 */
#dock .color-setting{margin:0!important;padding:12px 0!important;border:0!important;border-bottom:1px solid var(--c-border)!important;border-radius:0;background:transparent;box-shadow:none!important}
#dock .color-setting:last-child{border-bottom:0!important}
.color-swatch{display:flex;align-items:center;gap:8px;font:12px var(--font-num);color:var(--c-fg-2)}
.color-swatch input{width:34px;height:26px;padding:0;border:1px solid var(--c-border-2);border-radius:6px;background:transparent;cursor:pointer}
.color-swatch input::-webkit-color-swatch-wrapper{padding:2px}
.color-swatch input::-webkit-color-swatch{border:0;border-radius:4px}

/* 3D 快捷方案 */
.preset-grid{display:grid;grid-template-columns:1fr;gap:6px}
.preset-card{
  min-width:0;min-height:52px;padding:0 14px;border:1px solid var(--c-border);border-radius:10px;background:var(--c-card);
  display:flex;align-items:center;gap:12px;color:var(--c-fg-2);cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s,color .15s
}
.preset-card:hover{background:var(--c-muted);color:var(--c-fg)}
.preset-card.is-active{background:var(--c-muted);border-color:var(--c-fg-2);color:var(--c-fg)}
.preset-card svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.preset-card span{display:flex;min-width:0;max-width:100%;flex-direction:column;align-items:flex-start;gap:3px}
.preset-card b{font-size:12.5px;font-weight:600;white-space:nowrap}
.preset-card small{max-width:100%;font-size:11px;color:var(--c-fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-note{margin:4px 2px 0;font-size:12px;line-height:1.6;color:var(--c-fg-3)}

#dock #gateway-diagnostics{
  position:static!important;flex:none;max-width:none!important;max-height:160px;overflow:auto;margin:0;
  padding:10px 14px!important;border:0!important;border-top:1px solid var(--c-border)!important;border-radius:0 0 12px 12px!important;
  background:transparent!important;box-shadow:none!important;font-size:12px!important;color:var(--c-fg-3)
}
#dock #gateway-diagnostics summary{cursor:pointer;color:var(--c-fg-2)}

/* ===================================================================== 战况面板 */
#roster .pan-split{flex:1;min-height:0}
#roster .pan-sec.ops{flex:1.6 1 0}
#roster .pan-sec.loot{flex:1 1 0;border-top:1px solid var(--c-border)}
#roster .sec-head{padding:10px 12px 8px 14px;gap:8px}
.sec-t{font-size:13px;font-weight:600;color:var(--c-fg)}
.sec-t i,.grp-cnt{
  margin-left:5px;padding:1px 7px;border-radius:999px;background:var(--c-muted);border:1px solid var(--c-border);
  font:600 11px/1.5 var(--font-num);color:var(--c-fg-2)
}
.sortbar{gap:2px;padding:2px;background:var(--c-muted);border:1px solid var(--c-border);border-radius:7px}
.sortbar>span{display:none}
.mini-tab{height:24px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:var(--c-fg-3);font-size:12px;font-weight:550;cursor:pointer}
.mini-tab:hover{color:var(--c-fg)}
.mini-tab.on{background:var(--c-bg);color:var(--c-fg);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px var(--c-border)}
.pan-body{scrollbar-width:thin;scrollbar-color:var(--c-border-2) transparent}
.pan-body::-webkit-scrollbar{width:8px}
.pan-body::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.empty{margin:8px 12px;padding:28px 16px;border:1px dashed var(--c-border);border-radius:10px;font-size:12.5px;line-height:1.7;color:var(--c-fg-3)}
.empty svg{width:24px;height:24px;stroke:var(--c-fg-3);opacity:.7}

#roster .grp{margin:4px 8px 0;padding:8px 8px 6px;gap:8px;border-radius:7px}
#roster .grp:hover{background:var(--c-muted)}
#roster .grp-bar{width:3px;height:12px;border-radius:2px;box-shadow:none}
#roster .grp-name{font-size:12px;font-weight:600;color:var(--c-fg-2)}
#roster .grp-near{font-size:11.5px;color:var(--c-fg-3)}
#roster .grp.fold{opacity:.65}

#roster .op{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;column-gap:10px;
  min-height:56px;box-sizing:border-box;margin:0 8px 2px;padding:8px 10px;overflow:hidden;
  background:transparent;border:1px solid transparent;border-radius:9px;box-shadow:none;transition:background .12s
}
#roster .op:hover{background:var(--c-muted)}
#roster .op.sel{background:var(--c-muted);border-color:var(--c-border-2);box-shadow:inset 3px 0 var(--c-brand)}
#roster .op.expanded{align-items:start;overflow:visible}
#roster .op-av{grid-column:1;width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;font-size:12px;font-weight:700;border:0;box-shadow:0 0 0 2px var(--c-bg),0 0 0 3px var(--c,#555);align-self:center}
#roster .op-av img{border-radius:50%}
#roster .op-av.box{width:24px;height:24px;min-width:24px;margin:6px;border-radius:6px}
#roster .op-ring{inset:-4px;border-width:2px;border-radius:50%}
#roster .op-col{grid-column:2;display:grid;gap:3px;min-width:0;overflow:hidden}
#roster .op.expanded .op-col{overflow:visible}
#roster .op-n{display:block;min-width:0;font-size:13.5px;font-weight:600;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-fg)}
#roster .op-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#roster .op-n .hero{margin-left:6px;font-size:12px;font-weight:450;color:var(--c-fg-3)}
#roster .op-m{display:flex;align-items:center;gap:5px;height:16px;margin:0;font-size:11.5px;line-height:16px;color:var(--c-fg-3);white-space:nowrap;overflow:hidden}
#roster .op-m>*{flex:none}
#roster .op-m .bags,#roster .op-m .wp{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--c-fg-2)}
#roster .op-sep{font-style:normal;opacity:.35}
#roster .badge{font-size:10.5px;font-weight:650;line-height:16px;padding:0 6px;border-radius:5px}
.badge.bot-uncertain{color:#fcd34d;border:1px solid rgba(252,211,77,.35);background:rgba(252,211,77,.08)}
#roster .badge.bot-confirmed{color:#fcd34d;border:1px solid rgba(252,211,77,.45);background:rgba(252,211,77,.1)}
#roster .op-r{grid-column:3;min-width:48px;text-align:right;align-self:center}
#roster .op-d{font:700 15px/1.1 var(--font-num);white-space:nowrap;color:var(--c-fg)}
#roster .op-d .du{margin-left:1px;font-size:10.5px;color:var(--c-fg-3)}
#roster .op-z{margin-top:3px;font:11.5px/1 var(--font-num);white-space:nowrap}
#roster .op-hp{height:3px;margin-top:2px;border-radius:2px;background:var(--c-border)}
#roster .tip-r{font-size:11.5px;line-height:1.45}

.loot-row{margin:0 8px 2px;padding:8px 10px;gap:10px;border:1px solid transparent;border-radius:9px}
.loot-row:hover{background:var(--c-muted)}
.loot-row.sel{background:var(--c-muted);border-color:var(--c-border-2);box-shadow:inset 3px 0 var(--c-brand)}
.loot-thumb{background:var(--c-muted)}
.loot-n{font-size:13px;font-weight:600}
.loot-m{font-size:11.5px;color:var(--c-fg-3)}
.loot-d{font:600 13px/1.2 var(--font-num);color:var(--c-fg-2)}

/* 装备图标（PNG 遮罩，颜色按等级） */
.gear-inline{display:inline-flex;gap:4px;vertical-align:middle}
.gear-chip{display:inline-flex;align-items:center;gap:2px;color:var(--gear,#c9d1de);white-space:nowrap}
.gear-chip b{font:700 10.5px var(--font-num);color:#f4f4f5}
.gear-icon{display:inline-block;width:12px;height:12px;background:var(--gear,#c9d1de);
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;
  mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.gear-icon.helmet{-webkit-mask-image:url('/ui/icons/helmet.png?v=1.1.0');mask-image:url('/ui/icons/helmet.png?v=1.1.0')}
.gear-icon.armor{-webkit-mask-image:url('/ui/icons/armor.png?v=1.1.0');mask-image:url('/ui/icons/armor.png?v=1.1.0')}
.gear-icon.bag{-webkit-mask-image:url('/ui/icons/bag.png?v=1.1.0');mask-image:url('/ui/icons/bag.png?v=1.1.0')}
.gear-icon.rig{-webkit-mask-image:url('/ui/icons/rig.png?v=1.1.0');mask-image:url('/ui/icons/rig.png?v=1.1.0')}
.grb{height:18px!important;gap:5px!important;padding:0 7px!important;border-radius:999px!important;
  background:rgba(9,9,11,.9)!important;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 6px rgba(0,0,0,.6)!important}
.grb .gear-chip{padding:0;background:transparent}
.grb .gear-icon{width:13px;height:13px}

/* ===================================================================== 地图、浮层、3D */
.sheet{background:var(--c-panel);border:1px solid var(--c-border);border-radius:12px}
#sheet-map .pan-head{height:52px;box-sizing:border-box;border-bottom:1px solid var(--c-border)}
.maps{gap:8px;padding:12px}
.mcard{border-radius:9px;border-color:var(--c-border);background:var(--c-bg)}
.mcard:hover{border-color:var(--c-border-2)}
.mcard.on{border-color:var(--c-fg);box-shadow:0 0 0 1px var(--c-fg)}
.mcard b{font-size:12.5px}
.mcard .now{background:var(--c-fg)}
.mcard .now svg{stroke:var(--c-bg)}
.leaflet-control-zoom a{
  width:34px!important;height:34px!important;line-height:32px!important;border-radius:8px!important;
  background:var(--c-panel)!important;border:1px solid var(--c-border)!important;color:var(--c-fg)!important;box-shadow:var(--c-shadow)
}
.leaflet-control-zoom a:hover{background:var(--c-hover)!important}
.leaflet-tooltip{background:var(--c-card);border:1px solid var(--c-border-2);border-radius:9px}
#map.mini{border:1px solid var(--c-border-2);border-radius:12px;box-shadow:var(--c-shadow)}
#mini-hint{background:var(--c-card);border-color:var(--c-border);color:var(--c-fg-2)}

#playbar{background:var(--c-panel);border:1px solid var(--c-border);border-radius:12px}
#btn-play{background:var(--c-fg);color:var(--c-bg)}
#seek{accent-color:var(--c-fg)}
.spd{background:var(--c-muted);border:1px solid var(--c-border);border-radius:8px}
.spd button.on{background:var(--c-bg);color:var(--c-fg)}
#toast{background:var(--c-fg);color:var(--c-bg);border:0;border-radius:9px;font-size:13px;font-weight:550;box-shadow:var(--c-shadow)}

#r3{background:radial-gradient(ellipse at 50% 20%,#1a1a1f 0,#0c0c0f 60%,#08080a 100%)}
.r3-lbl .bd,.r3-dst{
  background:rgba(9,9,11,calc(var(--tagop,.8)*.95));border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,calc(var(--tagop,.8)*.14))
}
.r3-lbl .bd{padding:3px 8px}
#r3-load{background:var(--c-card);border:1px solid var(--c-border);border-radius:12px}
#r3-load-t{font-size:13px;color:var(--c-fg-2)}
#r3-bar{background:var(--c-border)}
#r3-bar i{background:var(--c-fg)}

#camseg{
  bottom:calc(var(--sab) + 16px);padding:3px;gap:2px;border-radius:10px;
  background:var(--c-panel);border:1px solid var(--c-border);box-shadow:var(--c-shadow)
}
#camseg button{height:32px;min-width:0;padding:0 12px;display:flex;align-items:center;gap:6px;border-radius:7px;color:var(--c-fg-3);font-size:12.5px;font-weight:550;box-shadow:none}
#camseg button:hover{color:var(--c-fg)}
#camseg button.on{background:var(--c-fg);color:var(--c-bg);box-shadow:none}
#camseg button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===================================================================== 底部标签栏（手机） */
#quick{background:var(--c-bg);border:0;border-top:1px solid var(--c-border);box-shadow:none}
#quick .qk{position:relative;color:var(--c-fg-3);border-radius:0;background:transparent!important}
#quick .qk svg{stroke-width:2}
#quick .qk span{font-weight:550}
#quick .qk.on{color:var(--c-fg)}
#quick .qk.on::before{content:"";position:absolute;top:0;left:50%;width:22px;height:2px;margin-left:-11px;border-radius:0 0 2px 2px;background:var(--c-fg)}
#quick .qk.is-toggle.on{color:var(--c-brand-hi)}
#quick .qk.is-toggle.on::before{background:var(--c-brand)}

/* ===================================================================== 电脑端布局 */
/* 地图标记：短箭头代替长枪线，正朝向自己的敌人才拉红线 */
.mk-gun{width:2px;height:var(--gunlen,0px);opacity:.8;filter:none;background:linear-gradient(180deg,transparent 0%,var(--c) 55%,var(--c) 100%)}
.mk-gun.mk-aim{opacity:1;background:linear-gradient(180deg,transparent 0%,#f43f5e 40%,#f43f5e 100%);filter:drop-shadow(0 0 4px #f43f5e)}
.mk-cone{border-left-width:5px;border-right-width:5px;border-bottom-width:9px;opacity:.9;filter:none}

@media(min-width:901px){
  #quick{display:none!important}
  #dock{left:var(--dock-left);top:var(--panel-top);bottom:12px;width:var(--tools-w);height:auto}
  #roster{right:calc(var(--sar) + 12px);top:var(--panel-top);bottom:12px;width:var(--roster-w);height:auto}
  #dock.hide{transform:translateX(-12px);opacity:0;visibility:hidden;pointer-events:none}
  #roster.hide{transform:translateX(12px);opacity:0;visibility:hidden;pointer-events:none}
  #dock,#roster{transition:transform .22s cubic-bezier(.3,.7,.4,1),opacity .18s,visibility .18s}

  .sheet{top:var(--panel-top);left:calc(var(--dock-left) + var(--tools-w) + 8px);width:360px;max-height:calc(100% - var(--top-h) - 36px - var(--sat))}
  body.dock-hidden .sheet{left:var(--dock-left)}

  .leaflet-bottom.leaflet-right{right:calc(var(--sar) + var(--roster-w) + 24px)!important;bottom:calc(var(--sab) + 16px)!important}
  body.roster-hidden .leaflet-bottom.leaflet-right{right:calc(var(--sar) + 16px)!important}
  #playbar{left:calc(var(--dock-left) + var(--tools-w) + 16px);right:calc(var(--roster-w) + 28px);bottom:calc(var(--sab) + 16px)}
  body.dock-hidden #playbar{left:calc(var(--dock-left) + 8px)}
  body.mode3d #playbar{bottom:calc(var(--sab) + 64px)}
  body.mode3d #map.mini{left:calc(var(--dock-left) + var(--tools-w) + 8px);bottom:calc(var(--sab) + 16px);width:min(22vw,260px);height:min(24vh,190px)}
  body.mode3d.dock-hidden #map.mini{left:var(--dock-left)}
  #toast{bottom:calc(var(--sab) + 24px)}
  body.mode3d #toast{bottom:calc(var(--sab) + 64px)}
}
@media(min-width:901px) and (max-width:1500px){
  #threat{width:min(300px,46vw)}
}
@media(min-width:901px) and (max-width:1365px){
  :root{--tools-w:340px;--roster-w:296px}
  .gj-live,.gj-copy small{display:none}
  #btn-relink{left:calc(var(--sal) + 120px)}
  #island.open{width:360px}
}
@media(min-width:901px) and (max-width:1120px){
  :root{--roster-w:280px}
  .gj-copy{display:none}
  #btn-relink{left:calc(var(--sal) + 60px);width:36px;padding:0;justify-content:center;font-size:0;gap:0}
  .isl-stat{padding:0 9px}
  #isl-near{padding-left:9px}
  body.mode3d #isl-near{display:none}
}

/* ===================================================================== 手机 / 平板 */
@media(max-width:900px){
  :root{--top-h:52px}
  #gj-rail{display:none}
  #gj-brand{left:calc(var(--sal) + 12px);top:calc(var(--sat) + 9px);height:34px;gap:8px}
  .gj-mark{width:30px;height:30px;border-radius:8px}
  .gj-mark svg{width:19px;height:19px}
  .gj-copy b{font-size:15px}
  .gj-copy small,.gj-live{display:none}
  body.mode3d .gj-copy{display:none}

  html body #nva-back{top:calc(var(--sat) + 8px)!important;right:calc(var(--sar) + 10px)!important;width:36px!important;padding:0!important;justify-content:center}
  html body #nva-back span{display:none}

  #viewswitch{
    display:flex!important;top:calc(var(--sat) + 8px);right:calc(var(--sar) + 54px);left:auto;bottom:auto;
    max-width:calc(100vw - 108px);overflow-x:auto;scrollbar-width:none
  }
  body.roster-hidden #viewswitch{right:calc(var(--sar) + 54px)}
  #viewswitch::-webkit-scrollbar{display:none}
  #viewswitch .vs{min-width:40px;padding:0 10px}
  #viewswitch .vs-ic{flex:none}
  #viewswitch [data-gj-tip]::after{display:none}

  #island{
    top:calc(var(--sat) + var(--top-h) + 8px);left:8px;right:56px;width:auto;transform:none;
    background:var(--c-panel);border-color:var(--c-border);box-shadow:var(--c-shadow);border-radius:10px
  }
  #island:active{transform:none}
  #island.open{width:auto;left:8px;right:8px}
  #threat{top:calc(var(--sat) + var(--top-h) + 58px);left:8px;right:8px;width:auto;transform:none}
  #isl-main{height:40px;padding:0 12px;justify-content:flex-start}
  #isl-dot{margin-right:10px}
  .isl-stat{padding:0 9px}
  #isl-near{margin-left:auto;padding-left:8px}
  #btn-relink{
    left:auto;right:8px;top:calc(var(--sat) + var(--top-h) + 8px);width:42px;height:42px;padding:0;
    justify-content:center;font-size:0;gap:0;border-radius:10px;background:var(--c-panel);box-shadow:var(--c-shadow)
  }
  #btn-relink::before{width:17px;height:17px}

  #quick{
    display:flex;left:0;right:0;bottom:0;width:auto;transform:none;justify-content:space-around;
    height:calc(58px + var(--sab));box-sizing:border-box;padding:0 4px var(--sab);gap:0;border-radius:0;z-index:760
  }
  #quick .qk{flex:1 1 0;min-width:0;width:auto;height:58px;gap:4px}
  #quick .qk svg{width:20px;height:20px}
  #quick .qk span{font-size:11px;white-space:nowrap}
  #qk-3d{display:none!important}

  #dock,#roster{
    left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;
    height:min(82dvh,720px)!important;max-height:calc(100dvh - var(--sat) - 12px)!important;
    border-radius:16px 16px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;
    background:var(--c-card);transition:transform .32s cubic-bezier(.3,.7,.4,1)
  }
  #dock{z-index:860}
  #roster{z-index:870}
  #dock:not(.up),#roster:not(.up){transform:translateY(105%)!important;visibility:hidden;pointer-events:none}
  #dock.up,#roster.up{transform:none!important;visibility:visible;pointer-events:auto}
  #dock>.pan-head,#roster>.pan-head{position:relative;height:60px;padding-top:10px}
  #dock>.pan-head::before,#roster>.pan-head::before{
    content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:var(--c-border-2)
  }
  .icon-btn{width:36px;height:36px}
  .dock-tabs button{height:36px}
  .dock-page{padding:16px 12px calc(24px + var(--sab))}
  #dock .dock-switches .row{height:46px}
  #roster .pan-body{padding-bottom:calc(14px + var(--sab))}
  #roster .op{min-height:60px}

  .sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:min(74vh,80%);border-radius:16px 16px 0 0;border-bottom:0;background:var(--c-card)}

  #camseg,body.mode3d #camseg{bottom:calc(var(--sab) + 70px);max-width:calc(100vw - 16px);z-index:744}
  #camseg button{height:34px;padding:0 10px;gap:5px;font-size:12px;white-space:nowrap}
  #camseg button svg{width:14px;height:14px}
  #map.mini,body.mode3d #map.mini{left:8px!important;right:auto!important;bottom:calc(var(--sab) + 120px)!important;width:min(40vw,170px);height:min(22vh,150px)}
  .leaflet-control-zoom,#mini-hint{display:none!important}
  #playbar,body.mode3d #playbar{left:8px;right:8px;width:auto;max-width:none;transform:none;bottom:calc(var(--sab) + 70px)}
  body.mode3d #playbar{bottom:calc(var(--sab) + 118px)}
  #toast,body.mode3d #toast{bottom:calc(var(--sab) + 124px)}
  #gateway-diagnostics{top:auto!important;bottom:auto!important}
  body.sheeting #quick,body.sheeting #playbar,body.sheeting #camseg{opacity:0;pointer-events:none}
}
@media(max-width:400px){
  .isl-stat{padding:0 7px}
  .isl-stat i{font-size:11px}
  #isl-dot{margin-right:8px}
  #isl-near{font-size:11px}
  #model3dseg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dock-tabs button{font-size:12px;gap:4px}
}
@media(max-width:340px){
  #dock .dock-switches{grid-template-columns:1fr}
}
@media(max-width:360px){
  #camseg button svg{display:none}
  #isl-near{display:none}
}
@media(max-height:560px) and (max-width:900px){
  #island:not(.open) .isl-stat:nth-of-type(n+2){display:none}
  #dock,#roster{height:92dvh!important}
}

/* ===================================================================== 亮色侧栏（设置里可切换） */
body.panels-light #dock,body.panels-light #roster{
  --c-card:#ffffff;--c-muted:#f4f4f5;--c-hover:#e4e4e7;--c-border:#e4e4e7;--c-border-2:#d4d4d8;
  --c-fg:#09090b;--c-fg-2:#52525b;--c-fg-3:#71717a;--c-bg:#ffffff;
  background:#ffffff;color:var(--c-fg)
}
body.panels-light #roster .badge.bot-uncertain,body.panels-light #roster .badge.bot-confirmed{color:#a16207;border-color:rgba(161,98,7,.35);background:rgba(250,204,21,.14)}
body.panels-light #dock .sw::after{background:#fff}
body.panels-light #dock .sw.on::after{background:#fff}