/* Real-screener demo */
.cs-wrap{margin:48px auto 0;max-width:1240px;width:100%}
.cs-monitor{position:relative;margin:0 auto}
.cs-bezel{background:linear-gradient(145deg,#2a2c31,#0d0e10);border-radius:18px;padding:12px;box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.cs-viewport{position:relative;overflow:hidden;border-radius:8px;background:#141414}
.cs-stand{width:22%;height:26px;margin:0 auto;background:linear-gradient(#2a2c31,#16171a);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);border-radius:0 0 6px 6px}
.cs-hint{text-align:center;font-size:13px;opacity:.6;margin-top:14px}
.cs-canvas{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;background:#1b1b1b;color:#ddd;font:11px/1.25 "DejaVu Sans Mono",Menlo,Consolas,monospace;overflow:hidden;user-select:none}
.cs-canvas *{box-sizing:border-box}
.cs-col{position:absolute;top:0;bottom:22px;display:flex;flex-direction:column;gap:3px;padding:2px}
.cs-col.l{left:0;width:640px}.cs-col.r{left:640px;width:640px}
.cs-p{background:#202020;border:1px solid #3a3a3a;display:flex;flex-direction:column;overflow:hidden;position:relative}
.cs-h{background:#2a2a2a;color:#fff;font-weight:bold;padding:2px 5px;display:flex;justify-content:space-between;font-size:11.5px}
.cs-h .pb{background:#444;padding:0 6px;border-radius:2px}
.cs-th,.cs-r{display:grid;grid-template-columns:150px 80px 80px 100px 1fr;padding:0 5px;height:15px;align-items:center;white-space:nowrap}
.cs-th{color:#aaa;border-bottom:1px solid #333}
.cs-th>*:not(:first-child),.cs-r>*:not(:first-child){text-align:right}
.cs-rows{position:relative;flex:1}
.cs-r{position:absolute;left:0;right:0;transition:top .6s cubic-bezier(.3,.8,.3,1),background .4s;color:#ccc}
.cs-r b{color:#fff}
.cs-r .pc{color:#3ddc5a}.cs-r .pd{color:#ffd400;font-weight:bold}
.cs-r.sel1{background:#b3141c;color:#fff}.cs-r.sel2{background:#1e46c8;color:#fff}
.cs-r.sel1 .pc,.cs-r.sel2 .pc{color:#fff}
.cs-r.new{animation:csIn .7s ease-out}
@keyframes csIn{from{transform:translateX(-100%);opacity:0;background:#3a6b12}to{transform:none;opacity:1}}
.fu{animation:fu .7s}.fd{animation:fd .7s}
@keyframes fu{0%{background:rgba(40,200,70,.55)}100%{background:transparent}}
@keyframes fd{0%{background:rgba(230,40,40,.55)}100%{background:transparent}}
.bg{font-size:8.5px;padding:0 2px;margin-left:3px;border-radius:2px;font-weight:bold;vertical-align:1px}
.bg.n{background:#1f5fd6;color:#fff}.bg.b{background:#e07a12;color:#fff}.bg.u{background:#ffd400;color:#000}
.mc{color:#888;font-size:8px;margin-left:2px}
.cs-news .ni{display:grid;grid-template-columns:96px 22px 76px 84px 1fr 14px;gap:4px;padding:1px 5px;height:16px;align-items:center;white-space:nowrap;border-bottom:1px solid #262626}
.ni .sc{background:#f08a00;color:#000;border-radius:3px;text-align:center;font-weight:bold}
.ni .sy{color:#6aa8ff;font-weight:bold}.ni .src{color:#999}
.ni .hd{overflow:hidden;text-overflow:ellipsis}.ni .hd.g{color:#3ddc5a}.ni .hd.r{color:#ff5050}
.ni .ic{border:1px solid #777;border-radius:50%;width:11px;height:11px;font-size:8px;text-align:center;line-height:10px;color:#999}
.ni.new{animation:niIn .8s ease-out}
@keyframes niIn{0%{transform:translateY(-100%);opacity:0;background:#5a4300}60%{background:#5a4300}100%{transform:none;opacity:1}}
.cs-idx .cs-th,.cs-idx .ir{grid-template-columns:150px 120px 140px 1fr}
.cs-idx .ir{display:grid;padding:0 5px;height:15px;align-items:center}
.cs-idx .ir>*:not(:first-child){text-align:right}
.cs-al .cs-th,.cs-al .ar{grid-template-columns:130px 70px 1fr 70px}
.cs-al .ar{display:grid;padding:0 5px;height:16px;align-items:center;color:#000;white-space:nowrap}
.ar.c{background:#bdf3ff}.ar.y{background:#ffe08a}.ar.gr{background:#c7f5c4}
.ar b{color:#1840b0}
.ar.new{animation:arIn 1.2s}
@keyframes arIn{0%,30%,60%{filter:brightness(1.6) saturate(2);transform:scaleY(.2)}15%,45%,100%{filter:none;transform:none}}
.cs-sb{position:absolute;left:0;right:0;bottom:0;height:22px;background:#111;border-top:1px solid #333;display:flex;align-items:center;gap:18px;padding:0 8px;color:#bbb;white-space:nowrap}
.cs-sb .in{background:#eee;color:#000;padding:0 4px;border-radius:2px}
.cs-sb .seg span{padding:1px 6px;background:#333}.cs-sb .seg span.on{background:#1f5fd6;color:#fff}
.cs-sb .clk{margin-left:auto}.cs-sb .dot{color:#3ddc5a}
.cs-sb a{color:#6aa8ff;text-decoration:underline}
.cs-cur{position:absolute;left:0;top:0;width:18px;height:18px;z-index:50;transition:transform 1s cubic-bezier(.5,0,.3,1);pointer-events:none;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.6))}
.cs-cur.click::after{content:"";position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;border:2px solid #ffd400;animation:clk .5s forwards}
@keyframes clk{from{transform:scale(.3);opacity:1}to{transform:scale(2);opacity:0}}
.cs-menu{position:absolute;z-index:40;background:#2b2b2b;border:1px solid #555;box-shadow:0 6px 18px rgba(0,0,0,.6);padding:3px 0;min-width:190px;opacity:0;transform:scale(.9);transform-origin:0 0;transition:.15s;pointer-events:none}
.cs-menu.on{opacity:1;transform:none}
.cs-menu div{padding:4px 12px;color:#ddd}.cs-menu div.hv{background:#1f5fd6;color:#fff}
.cs-card{position:absolute;z-index:30;width:380px;height:250px;background:rgba(18,22,30,.78);backdrop-filter:blur(6px);border:1px solid rgba(120,160,255,.45);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s,left .9s cubic-bezier(.5,0,.3,1),top .9s cubic-bezier(.5,0,.3,1);pointer-events:none}
.cs-card.on{opacity:1;transform:none}
.cs-card .ct{display:flex;justify-content:space-between;padding:4px 8px;background:rgba(40,60,110,.6);color:#fff;font-weight:bold;cursor:move}
.cs-card .ct i{font-style:normal;color:#ff6b6b}
.cs-card svg{display:block}
.cs-card .rz{position:absolute;right:2px;bottom:2px;width:10px;height:10px;border-right:2px solid #789;border-bottom:2px solid #789}
@media (max-width:760px){
  .cs-wrap{margin-top:28px}
  .cs-bezel{padding:6px;border-radius:12px}
  .cs-viewport.pan{overflow-x:auto;-webkit-overflow-scrolling:touch}
}