:root{
  --teal:      #008080;
  --silver:    #c0c0c0;
  --silver-lt: #dfdfdf;
  --white:     #ffffff;
  --gray:      #808080;
  --gray-dk:   #404040;
  --navy:      #000080;
  --title-hi:  #1084d0;
  --red:       #ff0000;
  --yellow:    #ffff00;
  --green:     #00ff00;
  --link:      #0000ee;
  --visited:   #551a8b;
  --beige:     #f5f5dc;
  --oe-bg:     #ece9d8;

  --sans: "SimSun","宋体","MS Song",serif;
  --hei:  "SimHei","黑体",sans-serif;
  --kai:  "KaiTi","楷体_GB2312","STKaiti",serif;
  --mono: "Courier New",Courier,monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--teal);
  font-family:var(--sans);
  font-size:12px;
  -webkit-font-smoothing:none;   
  font-smooth:never;
  overflow:hidden;
}

.hidden{ display:none !important; }


.bevel-out{
  background:var(--silver);
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt);
}

.bevel-in{
  background:var(--white);
  box-shadow:
    inset  1px  1px 0 var(--gray-dk),
    inset -1px -1px 0 var(--white),
    inset  2px  2px 0 var(--gray),
    inset -2px -2px 0 var(--silver-lt);
}


.warn-screen{
  position:fixed; inset:0; z-index:9000;
  background:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
}
.warn-box{
  width:520px; max-width:92vw;
  background:var(--silver);
  padding:2px;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt);
}
.warn-box h1{
  margin:0; padding:14px 0 4px;
  background:linear-gradient(90deg,var(--navy),var(--title-hi));
  color:#fff; font-family:var(--hei); font-size:22px;
  letter-spacing:8px; text-align:center;
}
.warn-sub{
  margin:0; padding:6px 0 12px; text-align:center;
  background:linear-gradient(90deg,var(--navy),var(--title-hi));
  color:#bcd8f0; font-size:11px; letter-spacing:2px;
}
.warn-body{
  margin:14px; padding:12px 14px;
  background:var(--white);
  box-shadow: inset 1px 1px 0 var(--gray-dk), inset -1px -1px 0 var(--white), inset 2px 2px 0 var(--gray);
  line-height:1.9;
}
.warn-body p{ margin:6px 0; }
.warn-body hr{ border:0; border-top:1px solid var(--silver); margin:12px 0; }
.warn-tip{ color:#404040; }
.warn-body kbd{
  background:var(--silver); padding:1px 5px; font-family:var(--mono);
  box-shadow: inset -1px -1px 0 var(--gray-dk), inset 1px 1px 0 var(--white);
}
.warn-opt{ display:block; margin:0 14px 10px; }
.warn-vol{ margin:0 14px 14px; }
.warn-vol input{ vertical-align:middle; width:180px; }
#vol-label{ display:inline-block; width:40px; }

.btn98{
  font-family:var(--sans); font-size:12px;
  background:var(--silver); color:#000;
  border:0; padding:5px 16px; cursor:pointer;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt);
}
.btn98:active{
  box-shadow:
    inset  1px  1px 0 var(--gray-dk),
    inset -1px -1px 0 var(--white),
    inset  2px  2px 0 var(--gray),
    inset -2px -2px 0 var(--silver-lt);
  padding:6px 15px 4px 17px;
}
.btn98.big{
  font-family:var(--hei); font-size:14px; letter-spacing:4px;
  padding:8px 40px; display:block; margin:0 auto 18px;
}


.shell{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal);
  overflow:auto;
}

.main-window{
  width:920px; max-width:100vw;
  height:700px; max-height:100vh;
  background:var(--silver);
  padding:2px;
  display:flex; flex-direction:column;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt),
    2px 2px 6px rgba(0,0,0,.4);
}


.titlebar{
  height:22px; flex:0 0 22px;
  background:linear-gradient(90deg,var(--navy),var(--title-hi));
  color:#fff; display:flex; align-items:center;
  padding:0 3px 0 4px;
  font-family:var(--hei); font-size:12px;
  user-select:none;
}
.tb-icon{ margin-right:4px; font-size:11px; filter:grayscale(.3); }
.tb-text{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tb-buttons{ display:flex; gap:2px; }
.tb-btn{
  width:18px; height:16px; padding:0; line-height:1;
  font-family:var(--sans); font-size:11px;
  background:var(--silver); border:0; cursor:pointer;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt);
}
.tb-btn.close{ margin-left:2px; }


.menubar{
  flex:0 0 20px; display:flex; align-items:center;
  padding:0 4px; font-size:12px; user-select:none;
}
.menu-item{ padding:2px 7px; cursor:default; }
.menu-item:hover{ background:var(--navy); color:#fff; }


.toolbar{
  flex:0 0 30px; display:flex; align-items:center; gap:2px;
  padding:2px 4px; border-top:1px solid var(--white);
  border-bottom:1px solid var(--gray);
}
.tbtn{
  font-family:var(--sans); font-size:11px; color:#000;
  background:var(--silver); border:0; padding:3px 7px; cursor:pointer;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt);
}
.tbtn:active{ box-shadow: inset 1px 1px 0 var(--gray-dk), inset -1px -1px 0 var(--white); }
.tbtn[disabled]{ color:var(--gray); text-shadow:1px 1px 0 var(--white); }
.tb-sep{ width:2px; height:20px; margin:0 3px;
  box-shadow: inset 1px 0 0 var(--gray), inset -1px 0 0 var(--white); }
.addr-label{ margin-left:4px; color:#404040; }
.addr-input{
  flex:1; font-family:var(--sans); font-size:12px;
  padding:2px 4px; border:0; background:var(--white);
  box-shadow: inset 1px 1px 0 var(--gray-dk), inset -1px -1px 0 var(--white),
              inset 2px 2px 0 var(--gray), inset -2px -2px 0 var(--silver-lt);
  outline:none;
}


.viewport{
  flex:1; position:relative; overflow:auto;
  background:var(--white);
  margin:2px;
  box-shadow: inset 1px 1px 0 var(--gray-dk), inset -1px -1px 0 var(--white),
              inset 2px 2px 0 var(--gray), inset -2px -2px 0 var(--silver-lt);
}


.statusbar{
  flex:0 0 20px; display:flex; align-items:center; gap:3px;
  padding:0 3px; font-size:11px;
}
.sb-main, .sb-zone{
  height:16px; line-height:16px; padding:0 6px; overflow:hidden;
  white-space:nowrap;
  box-shadow: inset 1px 1px 0 var(--gray), inset -1px -1px 0 var(--white);
}
.sb-main{ flex:1; }
.sb-zone{ width:100px; text-align:center; }



.overlay{
  position:fixed; inset:0; z-index:9600;
  background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}
.dlg{
  min-width:300px; max-width:80vw; max-height:80vh;
  background:var(--silver); padding:2px;
  display:flex; flex-direction:column;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt),
    3px 3px 8px rgba(0,0,0,.5);
}
.dlg-titlebar{
  height:20px; flex:0 0 20px; display:flex; align-items:center;
  background:linear-gradient(90deg,var(--navy),var(--title-hi));
  color:#fff; font-family:var(--hei); font-size:12px; padding:0 3px 0 5px;
}
.dlg-titlebar span{ flex:1; }
.dlg-body{
  padding:16px 18px; background:var(--silver);
  line-height:1.9; font-size:12px;
  overflow:auto;                 
}
.dlg-btns{
  padding:0 14px 14px; display:flex; justify-content:center; gap:10px;
}
.dlg-body .notepad{
  background:#fff; padding:8px 10px; font-family:var(--mono);
  font-size:12px; line-height:1.6; white-space:pre-wrap;
  max-height:52vh; overflow:auto;
  box-shadow: inset 1px 1px 0 var(--gray-dk), inset -1px -1px 0 var(--white),
              inset 2px 2px 0 var(--gray);
}
.notepad .cm{ color:#008000; }        
.notepad .tag{ color:#0000ff; }
.notepad .str{ color:#a31515; }
.notepad .hide{ color:#c0c0c0; }      


.ctxmenu{
  position:fixed; z-index:7000;
  background:var(--silver); padding:2px; min-width:150px;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt),
    2px 2px 5px rgba(0,0,0,.35);
}
.ctxmenu .ci{ padding:4px 22px 4px 24px; cursor:default; position:relative; }
.ctxmenu .ci:hover{ background:var(--navy); color:#fff; }
.ctxmenu .ci.disabled{ color:var(--gray); text-shadow:1px 1px 0 var(--white); }
.ctxmenu .ci.disabled:hover{ background:transparent; color:var(--gray); }
.ctxmenu .sep{ height:2px; margin:3px 2px;
  box-shadow: inset 0 1px 0 var(--gray), inset 0 -1px 0 var(--white); }


.explorer{
  background:var(--white); margin:0 6px;
  box-shadow: inset 1px 1px 0 var(--gray-dk), inset -1px -1px 0 var(--white),
              inset 2px 2px 0 var(--gray);
  max-height:300px; overflow:auto;
}
.rtable{ width:100%; border-collapse:collapse; font-size:12px; }
.rtable th{
  background:var(--silver); border:1px solid var(--gray);
  border-top:0; padding:3px 6px; text-align:left; font-weight:normal;
  position:sticky; top:0; z-index:1;
  box-shadow: inset -1px -1px 0 var(--gray-dk), inset 1px 1px 0 var(--white);
}
.rtable td{ padding:3px 6px; border-bottom:1px solid #f0f0f0; }

.rtable tr[data-dbl]{ cursor:default; user-select:none; }
.rtable tr.sel td,
.rtable tr.sel:hover td{ background:var(--navy); color:#fff; }
.rtable tr.sel .rf, .rtable tr.sel .rd, .rtable tr.sel .rs{ color:#c9d4ee; }
.rtable .ri{ width:22px; text-align:center; }
.rtable .ri svg{ vertical-align:-3px; }
.rtable .rn{ width:150px; }
.rtable .rf{ color:#666; }
.rtable .rd{ width:130px; color:#666; }
.rtable .rs{ width:64px; text-align:right; color:#666; }
.expbar{
  margin:3px 6px 0; padding:2px 8px; font-size:11px; color:#333;
  box-shadow: inset 1px 1px 0 var(--gray), inset -1px -1px 0 var(--white);
}


.toast{
  position:fixed; right:14px; bottom:14px; z-index:6000;
  background:var(--silver); padding:8px 14px; font-size:12px;
  box-shadow:
    inset -1px -1px 0 var(--gray-dk),
    inset  1px  1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset  2px  2px 0 var(--silver-lt);
}



.scare{
  position:fixed; inset:0; z-index:8000;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; pointer-events:none;
}
.scare-img{
  width:100%; height:100%; object-fit:cover; display:block;
  
  object-position:50% 42%;
  animation:scareRush .34s cubic-bezier(.12,.9,.2,1) both;
  filter:contrast(1.22) saturate(.88) brightness(1.06);
}
@keyframes scareRush{
  from{ transform:scale(.55) rotate(-1.6deg); opacity:0; }
  55% { opacity:1; }
  to  { transform:scale(1.13) rotate(1.1deg); opacity:1; }
}

.scare-tint{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%);
}

.scare.shake{ animation:scareShake .075s steps(2) infinite; }
@keyframes scareShake{
  0%  { transform:translate(0,0); }
  50% { transform:translate(-7px,5px); }
  100%{ transform:translate(6px,-4px); }
}





.page{
  min-height:100%;
  display:flex; flex-direction:column;
}
.page > *{ flex:1 0 auto; }
.page a{ color:var(--link); text-decoration:underline; cursor:pointer; }
.page a:visited{ color:var(--visited); }


.loading{
  position:absolute; inset:0; background:#fff; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; font-size:12px;
}
.loading .bar{
  width:240px; height:14px; background:var(--silver); padding:2px;
  box-shadow: inset 1px 1px 0 var(--gray-dk), inset -1px -1px 0 var(--white);
}
.loading .bar i{
  display:block; height:100%; width:0;
  background:repeating-linear-gradient(90deg,var(--navy) 0 10px,transparent 10px 12px);
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


.tabbar{
  display:flex; align-items:flex-end; gap:2px;
  padding:3px 6px 0; background:#d4d0c8;
  border-bottom:1px solid #808080;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin;
}
.tabbar.hidden{ display:none; }
.tab{
  display:flex; align-items:center; gap:5px; flex:0 0 auto;
  max-width:150px; padding:3px 7px 4px;
  background:#d4d0c8; color:#000;
  border:2px solid; border-color:#fff #808080 #808080 #fff;
  border-bottom:0; border-radius:3px 3px 0 0;
  font-size:11.5px; line-height:1.4; cursor:pointer;
  position:relative; top:1px; user-select:none;
}
.tab:hover{ background:#e2ded6; }

.tab.on{
  background:#fff; top:0; padding-bottom:5px;
  border-color:#808080 #fff #fff #808080;
  font-weight:bold;
}
.tab-t{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:112px;
}
.tab-x{
  flex:0 0 auto; width:14px; height:14px; line-height:12px; text-align:center;
  font-size:11px; color:#555; border:1px solid transparent; border-radius:2px;
}
.tab-x:hover{
  background:#c0392b; color:#fff; border-color:#7a1a10;
}
.tab.on .tab-x{ color:#333; }



.notice{
  position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  animation:noticeIn .28s ease-out both;
}
.notice.hidden{ display:none !important; }
@keyframes noticeIn{ from{ opacity:0; } to{ opacity:1; } }

.notice-dlg{
  width:470px; max-width:92vw;
  background:var(--silver,#c0c0c0);
  box-shadow:
    inset 1px 1px 0 var(--white,#fff),
    inset -1px -1px 0 var(--gray-dk,#808080),
    inset 2px 2px 0 var(--gray,#dfdfdf),
    inset -2px -2px 0 #0a0a0a,
    4px 5px 0 rgba(0,0,0,.5);
  padding:3px;
}
.notice .dlg-titlebar{
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff; font-size:11.5px; font-weight:bold;
  padding:3px 3px 3px 6px; letter-spacing:1px;
}
.notice .dlg-titlebar span{ flex:1; }
.notice-x{
  width:18px; height:16px; line-height:1; font-size:11px;
  font-family:var(--sans); cursor:pointer;
  background:var(--silver,#c0c0c0); color:#000;
  border:0; padding:0;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
.notice-x:active{ box-shadow:inset -1px -1px 0 #fff, inset 1px 1px 0 #808080; }

.notice-body{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 20px 10px;
  background:var(--silver,#c0c0c0);
}
.notice-ico{
  flex:0 0 auto; width:38px; height:38px; line-height:38px; text-align:center;
  font-size:26px; font-weight:bold; color:#000080;
  font-family:var(--sans);
}
.notice-txt{ flex:1; min-width:0; color:#000; }
.notice-txt p{
  margin:0 0 9px; font-size:12px; line-height:1.85;
}
.notice-hd{
  font-weight:bold; letter-spacing:1px; margin-bottom:7px !important;
}
.notice .dlg-btns{
  padding:4px 20px 16px; text-align:center;
  background:var(--silver,#c0c0c0);
}