@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cutive+Mono&family=DM+Serif+Display:ital@0;1&family=Special+Elite&family=VT323&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ==========================================================================
   main.css — 全局变量 / 主题 / CRT 光栅 / 中控台 / HUD / 视口容器
   视觉基因取自 ref/：白漆装置底板、氧化铝构件、复写纸、青色机密传输单、
   套版红十字、荧光黄标记、工业黑油墨。
   ========================================================================== */

:root{
  /* --- 纸与底板 --- */
  --bg-canvas:#cfcfc9;
  --bg-deep:#b6b6b0;
  --bg-grid:rgba(0,0,0,.072);
  --bg-dot:rgba(0,0,0,.15);

  --paper-bone:#f4f3ed;
  --paper-warm:#eeece2;
  --paper-cream:#efe9d8;
  --paper-edge:#b2b2ab;

  /* --- 油墨 --- */
  --ink-dark:#131312;
  --ink-mid:#3d3d39;
  --ink-dim:#63635d;
  --ink-faint:#8e8e87;

  /* --- ref 提取的强调色 --- */
  --reg-red:#e02b1d;        /* 套版十字 / 红线 */
  --stamp-red:#c9182b;
  --stamp-blue:#1b38a6;
  --klein:#0022c7;
  --carbon-cyan:#8fe0f5;    /* 机密传输单青色复写纸 */
  --carbon-cyan-ink:#0a4f6b;
  --marker-yellow:#f3d43a;  /* 荧光黄标记 */
  --tag-amber:#e8a11c;
  --gold-bar:#c79a2a;

  /* --- 金属 --- */
  --metal-face:#ececE7;
  --metal-light:#ffffff;
  --metal-dark:#565653;
  --alu-hi:#fdfdfc;
  --alu-mid:#9b9b97;
  --alu-lo:#3c3c3a;
  --wire-core:#26272a;
  --wire-lit:#cfd2d6;

  /* --- 字体 --- */
  --font-logo:'Cinzel Decorative','DM Serif Display',Georgia,serif;
  --font-serif:'DM Serif Display',Georgia,serif;
  --font-ticket:'Special Elite','Cutive Mono',monospace;
  --font-mono:'Cutive Mono','Courier New',monospace;
  --font-screen:'VT323',monospace;
  --font-code:'Space Mono','Cutive Mono',monospace;
}

body.theme-dark{
  --bg-canvas:#0a0b0d;
  --bg-deep:#040506;
  --bg-grid:rgba(255,255,255,.045);
  --bg-dot:rgba(255,255,255,.1);
  --paper-bone:#ecebe4;
  --paper-warm:#e2e0d6;
  --paper-edge:#3a3b40;
  --metal-face:#232428;
  --metal-light:#4b4d54;
  --metal-dark:#0d0e10;
  --alu-hi:#6e7178;
  --alu-mid:#3b3d42;
  --alu-lo:#0e0f11;
  --ink-faint:#9a9a93;
  --wire-core:#0c0d0f;
  --wire-lit:#8d9298;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:subpixel-antialiased;}
html,body{
  width:100%;height:100%;
  -webkit-font-smoothing:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
  text-rendering:auto;
}

body{
  background-color:var(--bg-canvas);
  background-image:
    linear-gradient(var(--bg-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px),
    radial-gradient(var(--bg-dot) 1.1px,transparent 1.1px),
    radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.2),transparent 66%);
  background-size:26px 26px,26px 26px,78px 78px,140% 122%;
  font-family:var(--font-ticket);
  color:var(--ink-dark);
  overflow:hidden;
  user-select:none;
  cursor:crosshair;
}
body.theme-dark{
  background-image:
    linear-gradient(var(--bg-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px),
    radial-gradient(var(--bg-dot) 1.1px,transparent 1.1px),
    radial-gradient(ellipse at 50% 42%,rgba(86,106,138,.18),transparent 66%);
}
body.is-orbiting{cursor:move;}
body.is-panning{cursor:grabbing;}
body.pan-ready{cursor:grab;}

/* ---------------- CRT 光栅 ---------------- */
.crt-scanlines,.crt-aberration,.crt-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:4000;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.crt-scanlines{
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.052) 0 1px,
    rgba(255,255,255,.012) 1px 3px);
  opacity:.5;mix-blend-mode:multiply;
}
body.theme-dark .crt-scanlines{mix-blend-mode:normal;opacity:.32;}
.crt-aberration{
  z-index:4001;opacity:.85;
  background:
    linear-gradient(90deg,rgba(255,0,40,.022),transparent 13%,transparent 87%,rgba(0,120,255,.022)),
    repeating-linear-gradient(90deg,
      rgba(255,0,0,.013) 0 1px,
      rgba(0,255,0,.008) 1px 2px,
      rgba(0,80,255,.013) 2px 3px);
}
.crt-vignette{
  z-index:3999;
  box-shadow:inset 0 0 180px rgba(0,0,0,.25),inset 0 0 44px rgba(0,0,0,.1);
}
body.no-crt .crt-scanlines,body.no-crt .crt-aberration{display:none;}

/* ---------------- 顶栏中控台 ---------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:3000;
  background:#e5e5e0;
  border-bottom:2px solid var(--paper-edge);
  padding:.45rem 1.2rem;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  box-shadow:2px 2px 0 #111;
  overflow:visible;
  transform:translate3d(0,0,0);
  transition:transform .42s cubic-bezier(.22,.82,.16,1);
  will-change:transform;
}
body.theme-dark header{background:#0f1013;color:#e8e8e4;}
body.console-collapsed header{
  transform:translate3d(0,calc(-100% + 3px),0);
  pointer-events:none;
  box-shadow:none;
}

.console-grip{
  position:absolute;left:50%;bottom:0;
  transform:translate(-50%,100%);
  z-index:3012;
  display:flex;align-items:center;gap:8px;
  margin:0;padding:4px 16px 6px;
  background:linear-gradient(180deg,#f4f3ec,#b7b5ad);
  color:#111;
  border:1px solid #1c1c1a;
  border-top:none;
  box-shadow:2px 2px 0 #111,inset 0 1px 0 rgba(255,255,255,.55);
  cursor:pointer;
  font-family:var(--font-code);
  pointer-events:auto;
  letter-spacing:.14em;
}
body.theme-dark .console-grip{
  background:linear-gradient(180deg,#2c2e34,#141518);
  color:#e6e6e2;
  border-color:#4a4a50;
  box-shadow:2px 2px 0 #000,inset 0 1px 0 rgba(255,255,255,.08);
}
.console-grip:hover{filter:brightness(1.06);}
.console-grip:active{transform:translate(-50%,calc(100% + 1px));}
.grip-label{
  font-size:.48rem;font-weight:700;letter-spacing:.22em;
}
.grip-led{
  width:7px;height:7px;border-radius:50%;
  background:#e02b1d;
  box-shadow:0 0 0 1px #3a0b0b,0 0 6px rgba(224,43,29,.7);
  animation:grip-led 2.4s steps(2,end) infinite;
}
.grip-chev{
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .32s cubic-bezier(.22,.82,.16,1);
}
body:not(.console-collapsed) .grip-chev{transform:rotate(180deg);}
.grip-screw{
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff,#7a7a74 58%,#1c1c1a);
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
@keyframes grip-led{
  0%,100%{opacity:1;}
  50%{opacity:.28;}
}

.brand-wrap{display:flex;align-items:baseline;gap:9px;flex:0 0 auto;}
.brand-logo{
  font-family:var(--font-logo);font-size:1.95rem;font-weight:900;
  letter-spacing:-.045em;color:var(--ink-dark);text-decoration:none;line-height:.82;
}
body.theme-dark .brand-logo{color:#fff;}
.brand-stamp{
  font-family:var(--font-screen);font-size:1.02rem;color:var(--stamp-red);
  border:1px dashed var(--stamp-red);padding:0 6px;transform:rotate(-3deg);white-space:nowrap;
}

.console-mid{display:flex;align-items:center;gap:.6rem;flex:1 1 auto;flex-wrap:wrap;justify-content:center;}
.console-end{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto;}

.rig-dock{
  display:flex;align-items:center;gap:8px;
  background:#ecece6;
  padding:4px 11px;border:1px solid var(--paper-edge);
  font-family:var(--font-code);font-size:.64rem;letter-spacing:.02em;white-space:nowrap;
}
body.theme-dark .rig-dock{background:#14161a;border-color:#33353b;}
.rig-dock .dock-key{color:var(--ink-dim);}
body.theme-dark .rig-dock .dock-key{color:#8d8f96;}
.rig-dock output{
  font-family:var(--font-screen);font-size:.98rem;color:var(--stamp-red);
  min-width:44px;text-align:right;
}

input[type=range].rig-slider{
  -webkit-appearance:none;appearance:none;
  width:146px;height:14px;background:transparent;cursor:ew-resize;
}
input[type=range].rig-slider.slim{width:96px;}
input[type=range].rig-slider::-webkit-slider-runnable-track{
  height:4px;background:linear-gradient(90deg,#87877f,#d9d9d4);
  border:1px solid rgba(0,0,0,.36);
}
input[type=range].rig-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:18px;margin-top:-8px;
  background:linear-gradient(180deg,#fff,#9a9a95);
  border:1px solid #2a2a2a;box-shadow:1px 1px 0 rgba(0,0,0,.4);
}
input[type=range].rig-slider::-moz-range-track{
  height:4px;background:#a8a8a3;border:1px solid rgba(0,0,0,.36);
}
input[type=range].rig-slider::-moz-range-thumb{
  width:11px;height:18px;border-radius:0;
  background:linear-gradient(180deg,#fff,#9a9a95);border:1px solid #2a2a2a;
}

.bevel-btn{
  background:var(--metal-face);color:#111;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  padding:5px 10px;border:none;cursor:pointer;white-space:nowrap;
  text-decoration:none;display:inline-block;line-height:1.2;
  border-top:2px solid var(--metal-light);
  border-left:2px solid var(--metal-light);
  border-right:2px solid var(--metal-dark);
  border-bottom:2px solid var(--metal-dark);
  box-shadow:2px 2px 0 #111;
  transition:none;
}
body.theme-dark .bevel-btn{color:#e6e6e2;}
.bevel-btn:hover{filter:brightness(1.08);}
.bevel-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.24);}
.bevel-btn.active{
  border-top-color:var(--stamp-red);border-left-color:var(--stamp-red);
  border-right-color:#59090f;border-bottom-color:#59090f;
  color:var(--stamp-red);background:#fff;
}
body.theme-dark .bevel-btn.active{background:#1d1012;}
.dock-filters{display:inline-flex;gap:5px;}

/* ---------------- 3D 视口容器 ---------------- */
.spatial-stage{
  position:fixed;inset:0;overflow:hidden;z-index:1;
  display:flex;align-items:center;justify-content:center;
  perspective:1380px;
  perspective-origin:50% 44%;
  background:transparent;
}
.camera-pan-rig,
.spatial-universe{
  position:relative;width:0;height:0;transform-style:preserve-3d;
  background:transparent;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
}
.tether-rig,
.hanger-field,
.assemblage-field,
.wire-group,
.pulley-group{
  position:relative;width:0;height:0;transform-style:preserve-3d;
  background:transparent;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
}
.tether-rig,
.assemblage-field{
  transition:none;
}
.spatial-universe{transform:rotateX(-12deg) rotateY(15deg) translateZ(0);}
.wire-group,.pulley-group,.hanger-field,.assemblage-field{position:absolute;left:0;top:0;}

/* 入场：硬切，无掉落 / 单摆 / 透明度渐变 */
body.is-assemble-armed .tether-rig,
body.is-assemble-armed .assemblage-field,
body.is-assembling .tether-rig,
body.is-assembling .assemblage-field{
  animation:none;
  transition:none;
  transform:none;
  opacity:1;
  visibility:visible;
}

/* ---------------- 聚焦推进 / 景深 ---------------- */
.dof-scrim{
  position:fixed;inset:0;z-index:4400;
  background:rgba(20,20,20,.45);
  backdrop-filter:blur(4px) saturate(.92);
  -webkit-backdrop-filter:blur(4px) saturate(.92);
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
}
.dof-scrim.active{opacity:1;pointer-events:auto;}
body.theme-dark .dof-scrim{
  background:rgba(16,16,18,.48);
}
.focus-layer{
  position:fixed;inset:0;z-index:4600;pointer-events:none;
  overflow:visible;
}
.focus-layer.active{
  pointer-events:none;
  overflow:visible;
}
.focus-layer.active .ticket-card,
.focus-layer.active .dev-panel{
  pointer-events:auto;
}

/* 聚焦时冻结后台 3D 场：仅保留前景卡片滚动 */
body.is-focus-cull .spatial-stage{
  pointer-events:none;
}
body.is-focus-cull .hanger,
body.is-focus-cull .assemblage-field,
body.is-focus-cull .wire-group,
body.is-focus-cull .pulley-group,
body.is-focus-cull .pin-thread-layer{
  pointer-events:none;
}

/* 相机运动时降维：世界位姿不变，票面内部停止 3D 子层重采样 */
body.is-cam-move .ticket-card,
body.is-cam-move .paper-sheet,
body.is-cam-move .paper-substrate,
body.is-cam-move .dev-panel,
body.is-cam-move .dev-shell{
  transform-style:flat;
}
body.is-cam-move .paper-grain,
body.is-cam-move .paper-crease{
  visibility:hidden;
}
.hanger.is-live-layer .hang-arm,
.hanger.is-live-layer .ticket-card,
.hanger.is-live-layer .paper-sheet,
.hanger.is-live-layer .dev-panel{
  will-change:transform;
}

/* ---------------- HUD ---------------- */
.layout-dock{
  position:fixed;bottom:1.02rem;left:50%;transform:translateX(-50%) translateZ(0);
  z-index:3010;pointer-events:auto;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.layout-dock-plate{
  display:flex;align-items:center;gap:6px;justify-content:center;
  background:linear-gradient(180deg,#f3f2ea,#c8c6be);
  border:1px solid #1c1c1a;
  box-shadow:2px 2px 0 #111,inset 0 1px 0 #f3f2ea;
  padding:5px 6px;
  border-radius:6px;
}
body.theme-dark .layout-dock-plate{
  background:linear-gradient(180deg,#2a2c32,#141518);color:#e8e8e4;border-color:#4a4a50;
}
.layout-ico{
  width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:0;
}
.layout-ico svg{
  width:20px;height:20px;display:block;fill:currentColor;
}
.layout-ico:hover{filter:brightness(1.1);}
.layout-ico.active{
  color:var(--stamp-red);
}
.dock-split{
  width:1px;height:18px;margin:0 4px;
  background:currentColor;opacity:.28;
  pointer-events:none;
}
.hint-ico{
  position:relative;
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#2a2a28;opacity:.48;
  pointer-events:auto;cursor:help;
}
body.theme-dark .hint-ico{color:#d8d8d2;}
.hint-ico svg{width:16px;height:16px;display:block;fill:none;}
.hint-ico:hover{
  opacity:1;color:var(--stamp-red);
  filter:drop-shadow(0 0 5px rgba(201,24,43,.45));
}
.hint-ico::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);
  background:#141518;color:#f0f0ee;
  font-family:var(--font-code);font-size:.48rem;letter-spacing:.12em;
  white-space:nowrap;padding:4px 7px;
  border:1px solid #44454a;
  opacity:0;pointer-events:none;
  transition:opacity .14s ease;
}
.hint-ico:hover::after{opacity:1;}
#resetViewBtn svg{fill:none;}
body.layout-rail .assemblage-field{opacity:1;}
body.layout-rail .pulley:not(.is-meter){display:none;pointer-events:none;}

.telemetry-box{
  position:fixed;bottom:1.05rem;left:1.3rem;z-index:3000;
  background:#0d100e;border:1px solid #3a3d3a;
  font-family:var(--font-screen);font-size:.84rem;
  color:#7ef0a6;letter-spacing:.06em;line-height:1.28;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  overflow:hidden;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
}
.telemetry-grip{
  display:flex;align-items:center;gap:7px;
  width:100%;margin:0;padding:6px 9px;
  background:transparent;border:0;color:#7ef0a6;
  font-family:var(--font-code);font-size:.52rem;letter-spacing:.18em;
  cursor:pointer;text-align:left;
}
.telemetry-grip:hover{filter:brightness(1.12);}
.telemetry-body{
  max-height:9rem;opacity:1;
  padding:0 9px 7px;
  min-width:176px;
  transition:max-height .34s cubic-bezier(.22,.82,.16,1),opacity .24s ease,padding .34s ease;
}
.telemetry-box.is-collapsed{min-width:0;box-shadow:1px 1px 0 rgba(0,0,0,.35);}
.telemetry-box.is-collapsed .telemetry-body{
  max-height:0;opacity:0;padding:0 9px;pointer-events:none;
}
.telemetry-box .t-row{display:flex;justify-content:space-between;gap:10px;}
.telemetry-box .t-k{color:#4c8e67;}

.toast{
  position:fixed;top:5.2rem;left:50%;
  transform:translateX(-50%) translateY(-12px);
  background:#111;color:#fff;font-family:var(--font-code);font-size:.65rem;
  letter-spacing:.06em;padding:6px 14px;border:1px solid #444;
  z-index:6000;opacity:0;pointer-events:none;
  transition:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
body.console-collapsed .toast{top:2.4rem;}
body.console-collapsed .bg-dock{top:2.15rem;}
body.console-collapsed .node-dock{top:14.2rem;}

/* ---------------- 固定 2D 自定义背景（不进 3D 视口） ---------------- */
.custom-bg-layer{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  display:none;
  background-color:transparent;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  transform:none !important;
  perspective:none;
  isolation:isolate;
  mix-blend-mode:normal;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.custom-bg-layer.has-bg{display:block;}
body.has-custom-bg,
body:has(.custom-bg-layer.has-bg){
  background-image:none;
  background-color:var(--bg-canvas);
}
body.theme-dark .custom-bg-layer,
body.theme-dark .custom-bg-layer.has-bg{
  background-color:var(--bg-deep);
  mix-blend-mode:normal;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.theme-dark.has-custom-bg,
body.theme-dark:has(.custom-bg-layer.has-bg){
  background-color:var(--bg-deep);
  background-image:none;
}
.custom-bg-layer.fit-cover{
  background-size:cover;
  background-repeat:no-repeat;
}
.custom-bg-layer.fit-contain{
  background-size:contain;
  background-repeat:no-repeat;
  background-color:var(--bg-canvas);
}
body.theme-dark .custom-bg-layer.fit-contain{
  background-color:var(--bg-deep);
}
.custom-bg-layer.fit-repeat{
  background-size:auto;
  background-repeat:repeat;
}

.bg-dock{
  position:fixed;top:4.7rem;right:1.3rem;left:auto;z-index:3100;
  width:248px;padding:8px 10px 10px;
  background:#f8f8f4;
  border:1px solid #2a2a28;
  box-shadow:2px 2px 0 #111;
  font-family:var(--font-code);font-size:.58rem;letter-spacing:.06em;
  color:var(--ink-dark);
  pointer-events:auto;
  cursor:default;
}
body.theme-dark .bg-dock{
  background:#121214;color:#dcdcd8;border-color:#4a4a50;
}
.bg-dock-title{
  color:var(--ink-dim);margin-bottom:7px;letter-spacing:.12em;
}
.bg-path{
  width:100%;box-sizing:border-box;
  font:inherit;letter-spacing:.04em;
  padding:4px 6px;margin-bottom:6px;
  border:1px solid #2a2a28;background:#fff;color:inherit;
  cursor:text;
}
body.theme-dark .bg-path{background:#111;border-color:#555;color:#eee;}
.bg-dock-row{display:flex;flex-wrap:wrap;gap:4px;}
.bg-dock-row .bevel-btn{padding:3px 6px;font-size:.55rem;}

.node-dock{
  position:fixed;top:16.8rem;right:1.3rem;left:auto;z-index:3100;
  width:248px;padding:8px 10px 10px;
  background:#f8f8f4;
  border:1px solid #2a2a28;
  box-shadow:2px 2px 0 #111;
  font-family:var(--font-code);font-size:.58rem;letter-spacing:.06em;
  color:var(--ink-dark);
  pointer-events:auto;
  cursor:default;
}
body.theme-dark .node-dock{
  background:#121214;color:#dcdcd8;border-color:#4a4a50;
}
.node-dock .bg-path{margin-bottom:6px;}
.node-dock select.bg-path{cursor:pointer;}
.sel-label{
  margin-top:7px;color:var(--ink-dim);letter-spacing:.08em;
  word-break:break-all;
}

.hanger.is-selected .ticket-card,
.hanger.is-selected .dev-panel{
  outline:2px solid var(--stamp-red);
  outline-offset:7px;
}

body.layout-carousel .pulley{display:none;pointer-events:none;}
body.layout-carousel .assemblage-field{opacity:1;}
body.layout-rail .pin-thread-layer{opacity:1;}

/* ---------------- 对外展示态：隐藏全部编辑控件 ---------------- */
body.mode-public .mount-btn,
body.mode-public .admin-only,
body.mode-public #exportBtn,
body.mode-public #bgDock,
body.mode-public #nodeDock,
body.mode-public .captcha-reload,
body.mode-public .captcha-input,
body.mode-public .captcha-msg,
body.mode-public .mod-drawer,
body.mode-public .mod-toolbar,
body.mode-public .mod-handle,
body.mode-public .mod-del,
body.mode-public .mod-add-row,
body.mode-public .mod-code-lab,
body.mode-public .mod-code-input,
body.mode-public .mod-stamp-row,
body.mode-public .line-ops,
body.mode-public .ctx-menu{
  display:none !important;
}
body.mode-public [contenteditable]{
  pointer-events:none;
  user-select:none;
}

@media (prefers-reduced-motion:reduce){
  .grip-led{animation:none;}
}

@media (max-width:980px){
  .brand-logo{font-size:1.45rem;}
  .layout-ico{width:30px;height:30px;}
  .layout-ico svg{width:18px;height:18px;}
  .hint-ico{width:24px;height:24px;}
}