* { box-sizing:border-box; }
body { margin:0; height:100vh; display:flex; overflow:hidden;
       font:13px/1.5 "Microsoft JhengHei","PMingLiU",sans-serif; background:#5a6a7a; }
#side { width:290px; flex:none; background:#22303c; color:#cfd8e3;
        display:flex; flex-direction:column; }
#side h1 { font-size:14px; margin:0; padding:12px 12px 6px; color:#fff; }
#side h1 small { display:block; font-weight:normal; font-size:11px; color:#8fa3b8; }
#q { margin:6px 10px; padding:5px 8px; border:none; border-radius:3px;
     font-family:inherit; font-size:13px; }
#list { flex:1; overflow:auto; }
#list .it { padding:4px 12px; cursor:pointer; border-left:3px solid transparent;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#list .it:hover { background:#2d3f4f; }
#list .it.on { background:#35506a; border-left-color:#ffd166; color:#fff; }
#list .it b { font-family:ui-monospace,monospace; color:#9fd0ff; font-weight:normal; }
#list .it.on b { color:#ffe08a; }
#list .meta { font-size:11px; color:#8fa3b8; }
#main { flex:1; display:flex; flex-direction:column; min-width:0; }
#bar { padding:6px 12px; color:#fff; font-size:12px; display:flex; gap:12px;
       align-items:center; flex-wrap:wrap; background:#3c4c5c; }
#bar b { color:#ffe08a; font-family:ui-monospace,monospace; }
#bar .msg { color:#c7f9a0; font-family:ui-monospace,monospace; }
#bar a { color:#9fd0ff; }
#stage { flex:1; overflow:auto; padding:20px; display:flex; justify-content:center;
         align-items:flex-start; }
#links { display:flex; gap:6px; flex-wrap:wrap; }
#links a { background:#2d3f4f; padding:1px 6px; border-radius:3px;
           text-decoration:none; font-family:ui-monospace,monospace; }
#links a:hover { background:#46637f; }

  .vfp-form { position:relative; background:#ece9d8; border:2px outset #fff;
              box-shadow:0 8px 30px rgba(0,0,0,.45); }
  .vfp-form .ctl { position:absolute; box-sizing:border-box; }
  .vfp-form .label { white-space:nowrap; line-height:1.15; }
  .vfp-form .shape { border:1px solid #808080; border-top-color:#fff;
                     border-left-color:#fff;
                     box-shadow:inset -1px -1px 0 #fff, inset 1px 1px 0 #808080; }
  .vfp-form input.tb { border:1px solid; border-color:#808080 #fff #fff #808080;
                       background:#fff; padding:1px 3px; font-family:inherit;
                       outline:none; }
  .vfp-form input.tb:focus { background:#fffbcc; }
  .vfp-form input.tb[disabled] { background:#e4e4e4; color:#000; }
  .vfp-form button.cmd { border:2px outset #f0f0f0; background:#ece9d8;
                         font-family:inherit; cursor:pointer; padding:0; }
  .vfp-form button.cmd:active { border-style:inset; }
  .vfp-form .grid { background:#fff; border:1px solid;
                    border-color:#808080 #fff #fff #808080; overflow:auto; }
  .vfp-form .grid table { border-collapse:collapse; width:100%; table-layout:fixed; }
  .vfp-form .grid th { background:#ece9d8; border:1px solid #b0b0b0;
                       font-weight:normal; position:sticky; top:0; }
  .vfp-form .grid td { border:1px solid #e0e0e0; padding:0 3px; overflow:hidden;
                       white-space:nowrap; text-overflow:ellipsis; }
  .vfp-form .grid tr.sel td { background:#000080; color:#fff; }
  .vfp-form .grid td.ro { background:#ebebeb; }
  .vfp-form .cbx { display:flex; align-items:center; gap:4px; }
  .vfp-form .cbx input { margin:0; }
  .vfp-form .optgrp { border:1px solid #b0b0b0; }
  .vfp-form .opt { position:absolute; display:flex; align-items:center; gap:3px;
                   white-space:nowrap; }
  .vfp-form .container { border:1px solid #b0b0b0; background:rgba(0,0,0,.02); }
  .vfp-form .ole, .vfp-form .image { border:1px dashed #999; background:#f6f6f6;
        color:#777; font:10px ui-monospace,monospace; display:flex;
        align-items:center; justify-content:center; text-align:center;
        overflow:hidden; }
  .vfp-form .pf { border:1px solid #808080; background:#ece9d8; }
  .vfp-form .pf .tabs { display:flex; gap:2px; }
  .vfp-form .pf .tab { border:1px solid #808080; border-bottom:none;
                       background:#dfdcd0; padding:1px 8px; cursor:pointer; }
  .vfp-form .pf .tab.on { background:#ece9d8; font-weight:bold; }
  .vfp-form .pf .page { position:relative; display:none; }
  .vfp-form .pf .page.on { display:block; }
  .vfp-form .listbox { background:#fff; border:1px solid;
                       border-color:#808080 #fff #fff #808080; overflow:auto; }
  .vfp-form .hot { position:absolute; font:10px ui-monospace,monospace; color:#c00;
                   background:#ffe; border:1px solid #c00; padding:0 2px;
                   pointer-events:none; z-index:99; display:none; }
  .showhot .vfp-form .hot { display:block; }