:root{--iv:#F8F0E0;--iv2:#FBF7EE;--gr:#0F6B4A;--gr2:#E3F0E9;--nv:#1B2A4A;--gd:#C9A55A;--gd2:#F3E6C6;--rd:#B23A3A;--rd2:#F7E1DF;--mut:#6B6A64;--line:rgba(27,42,74,.14);--r:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:Tajawal,system-ui,sans-serif;color:var(--nv);background:var(--iv)}
body{background:var(--iv) url(bg.jpg) center/cover fixed}
body.role-student,body.role-teacher{background-image:linear-gradient(rgba(248,240,224,.9),rgba(248,240,224,.94)),url(bg.jpg)}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit;font-size:18px;color:var(--nv)}
.center-msg{display:grid;place-items:center;height:100vh;font-size:22px}
.kicker{color:var(--gd);font-weight:700;letter-spacing:.5px;font-size:15px}
.small{font-size:13px}.muted{color:var(--mut)}
.btn{border:0;border-radius:12px;padding:10px 18px;font-size:16px;font-weight:700;background:var(--nv);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.green{background:var(--gr)}.btn.red{background:var(--rd)}.btn.big{padding:14px 26px;font-size:19px}
.btn-ghost{border:1.5px solid var(--line);background:#fff8;border-radius:10px;padding:8px 14px;font-weight:700;color:var(--nv)}
.btn-ghost.small{padding:5px 10px;font-size:13px}
.pill{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;color:var(--nv)}
.pill.big{padding:10px 16px;font-size:15px}.pill.sel{background:var(--nv);color:#fff;border-color:var(--nv)}
.err{color:var(--rd);min-height:22px;font-weight:700}
/* الانضمام */
.join{min-height:100vh;display:grid;place-items:center;padding:20px}
.join-card{background:#fffdf8;border:1px solid var(--line);border-radius:24px;padding:28px;width:min(560px,100%);display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 40px rgba(27,42,74,.08)}
.join-card h1{margin:0 0 6px;font-size:30px}.join-card label{font-weight:700;margin-top:6px}
.big-input,.mem{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;width:100%}
.big-input{font-size:20px}
.icons{display:flex;flex-wrap:wrap;gap:6px}.icon{font-size:28px;border:2px solid transparent;background:#fff;border-radius:12px;width:52px;height:52px}
.icon.sel{border-color:var(--gr);background:var(--gr2)}
.members{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* رأس الطالبات */
.st-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fffdf8ee;border-bottom:3px solid var(--gc,var(--gr));backdrop-filter:blur(6px)}
.gname{font-size:22px;font-weight:800;display:flex;gap:8px;align-items:center;flex:1}.gicon{font-size:28px}
.conn{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--gd2);white-space:nowrap}.conn.live{background:var(--gr2);color:var(--gr)}.conn.reconnecting{background:var(--rd2);color:var(--rd)}
.st-body{max-width:900px;margin:0 auto;padding:16px 16px 120px}
.look-up{text-align:center;padding:12vh 10px}.look-up .eyes{font-size:64px}.look-up h2{font-size:28px}.members-line{color:var(--mut)}
.act-title{margin:6px 0 10px;font-size:24px}
.banner{background:var(--gd2);border-radius:12px;padding:10px 14px;margin:8px 0;font-weight:700}.banner.ok{background:var(--gr2);color:var(--gr)}.banner.score{background:var(--nv);color:#fff}
.hint{background:#fff;border:2px solid var(--gr);border-radius:14px;padding:14px;margin-top:14px;font-size:18px;line-height:1.8}
.model{background:#fff;border:2px dashed var(--gd);border-radius:14px;padding:12px 16px;margin-top:14px}.model h4{margin:0 0 6px;color:var(--gd)}.model li{margin:6px 0;line-height:1.7}
.model.big{font-size:22px}
.submit-row{position:fixed;bottom:0;left:0;right:0;padding:12px 16px;background:#fffdf8ee;border-top:1px solid var(--line);display:flex;justify-content:center;z-index:15}
/* الأنشطة */
.act-intro{background:var(--gd2);border-radius:12px;padding:8px 12px;font-weight:700;margin:0 0 10px}
.part{margin-bottom:16px}
.passage{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;font-size:19px;line-height:2;position:relative}
.passage h4{margin:0 0 4px;color:var(--gr)}
.passage mark{background:var(--gd2);padding:0 3px;border-radius:4px}
.passage.collapsible>.btn-ghost{float:left;margin:-4px 0 6px 0}
.passage.collapsed .passage-body{max-height:62px;overflow:hidden;-webkit-mask-image:linear-gradient(#000,transparent)}
.q{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.q-text{font-size:19px;font-weight:700;line-height:1.7;margin-bottom:8px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.opts.tf{grid-template-columns:1fr 1fr}
.opt{border:2px solid var(--line);background:var(--iv2);border-radius:12px;padding:12px;font-size:17px;font-weight:700;text-align:right;color:var(--nv)}
.opt.sel{border-color:var(--nv);background:var(--nv);color:#fff}
.opt.right{border-color:var(--gr);background:var(--gr2);color:var(--gr)}.opt.sel.right{background:var(--gr);color:#fff}
.opt.wrong{border-color:var(--rd);background:var(--rd2);color:var(--rd)}
.opt:disabled{cursor:default;opacity:1}
.envelope{width:100%;border:2px dashed var(--gd);background:repeating-linear-gradient(45deg,#fff,#fff 10px,#fbf1df 10px,#fbf1df 20px);border-radius:14px;padding:18px;font-size:30px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--nv)}
.envelope span{font-size:20px;font-weight:800}
.envelopes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.envelopes .q{margin:0}
/* بلاغ */
.flash{background:#fff;border-radius:var(--r);padding:18px;border:2px solid var(--rd)}
.flash.live{background:var(--nv);color:#fff;text-align:center}
.siren{font-size:22px;font-weight:800;color:var(--rd)}.flash.live .siren{color:#ffd9d4;animation:blink 1s infinite}
.siren.off{color:var(--mut);font-size:17px;margin-bottom:10px}
.report{font-size:26px;font-weight:800;line-height:1.8;margin:12px 0}.report.small{font-size:16px;color:var(--mut);margin:0 0 10px}
.flash-count{font-size:18px;color:var(--gd)}
@keyframes blink{50%{opacity:.4}}
/* السحب والإفلات */
.slots h4{margin:0 0 8px}
.bank-label{font-weight:700;color:var(--mut);font-size:14px;margin-bottom:4px}
.drop{border:2px dashed var(--line);border-radius:14px;min-height:54px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;transition:.15s;background:#fff8}
.drop.over{border-color:var(--gr);background:var(--gr2)}
.drop.bank{background:var(--gd2);border-style:solid;border-color:transparent;margin-bottom:12px;min-height:60px}
.ph{color:var(--mut);font-size:14px;align-self:center}
.chip{background:#fff;border:2px solid var(--nv);border-radius:12px;padding:8px 12px;font-weight:700;font-size:16px;touch-action:none;user-select:none;-webkit-user-select:none;line-height:1.5}
.chip.picked{background:var(--nv);color:#fff;transform:scale(1.04)}
.chip.dragging{opacity:.3}
.chip.ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(50%,-50%) rotate(-3deg);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.chip.right{border-color:var(--gr);background:var(--gr2)}.chip.wrong{border-color:var(--rd);background:var(--rd2)}
.cloze-text{background:#fff;border-radius:var(--r);padding:16px;font-size:19px;line-height:2.6;border:1px solid var(--line)}
.drop.blank{display:inline-flex;min-width:120px;min-height:44px;vertical-align:middle;padding:3px 6px;margin:0 3px}
.drop.blank .chip{padding:4px 10px}
.cols{display:grid;gap:10px}.cols.c2{grid-template-columns:1fr 1fr}.cols.c3{grid-template-columns:repeat(3,1fr)}.cols.c4{grid-template-columns:repeat(4,1fr)}
.col{background:#fff;border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.col-h{background:var(--nv);color:#fff;font-weight:800;text-align:center;padding:8px;font-size:18px}
.col-body{border:0;min-height:160px;border-radius:0;flex-direction:column;align-items:stretch}
.match-grid{display:flex;flex-direction:column;gap:8px}
.match-row{display:grid;grid-template-columns:90px 1fr;gap:8px;align-items:stretch}
.match-key{background:var(--nv);color:#fff;border-radius:12px;display:grid;place-items:center;font-size:24px;font-weight:800}
.match-slot{min-height:48px;padding:4px}
/* الرموز */
.sym-text{background:#fff;border-radius:var(--r);padding:16px;font-size:19px;line-height:2.4;border:1px solid var(--line);position:relative}
.phrase{border:0;background:var(--rd2);color:var(--rd);font-weight:800;font-size:18px;border-radius:8px;padding:2px 8px;margin:0 2px;position:relative}
.phrase.has{background:var(--gd2);color:var(--nv)}.phrase.right{background:var(--gr2);color:var(--gr)}.phrase.wrong{background:var(--rd2)}
.badge{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:8px;background:var(--nv);color:#fff;margin-left:6px;font-size:18px}
.badge.ok{background:var(--gr);margin-right:6px}
.sym-pop{position:absolute;z-index:30;background:#fff;border:2px solid var(--nv);border-radius:14px;padding:6px;display:flex;gap:4px;flex-wrap:wrap;width:250px;box-shadow:0 10px 30px rgba(0,0,0,.2);margin-top:6px}
.sym-pop button{width:48px;height:48px;font-size:22px;border:1px solid var(--line);border-radius:10px;background:var(--iv2)}
.sym-pop button.x{width:auto;padding:0 10px;font-size:14px}
.symbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.sym{width:46px;height:46px;font-size:22px;border:1.5px solid var(--line);background:#fff;border-radius:10px}
/* تظليل */
.hl-para{background:#fff;border-radius:var(--r);padding:12px 16px;margin-bottom:10px;border:1px solid var(--line)}
.hl-num{font-weight:800;color:var(--gd);font-size:14px}
.hl-para p{font-size:19px;line-height:2.1;margin:6px 0}
.sent{padding:3px 2px;border-radius:6px;cursor:pointer;transition:.15s}
.sent.sel{background:#FFE69A;box-shadow:0 0 0 2px #E8C14F}
.sent.right{background:var(--gr2);box-shadow:0 0 0 2px var(--gr)}.sent.wrong{background:var(--rd2);box-shadow:0 0 0 2px var(--rd)}
.src{font-size:13px;color:var(--gr)}
/* مفتوح */
.open .field{display:block;margin:8px 0}.open .field span{font-weight:700;font-size:15px;color:var(--mut)}
textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px;background:#fff;resize:vertical;line-height:1.8}
textarea.tall{min-height:140px}textarea:disabled{background:#fdfbf6;color:var(--nv)}
/* Copilot */
.copilot{background:#fff;border:2px solid var(--gr);border-radius:var(--r);padding:14px}
.cp-head{font-weight:800;color:var(--gr)}.cp-prompt{font-size:19px;line-height:1.8;margin:8px 0;background:var(--gr2);border-radius:10px;padding:10px}
.cp-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.copied{color:var(--gr);font-weight:700}.cp-note{color:var(--mut);margin:8px 0 0}
/* المؤقت */
.timer-box{display:none;position:relative}.timer-box.on{display:block}
.timer-box video{display:block;width:100%;height:100%;object-fit:cover}
.timer-box.mini{width:96px;height:54px;border-radius:10px;overflow:hidden;border:2px solid var(--gd)}
.timer-box.mini .timer-num{position:absolute;inset:auto 0 0 0;text-align:center;background:#1B2A4Acc;color:#fff;font-weight:800;font-size:13px}
.timer-box.mini.warn{border-color:var(--rd);animation:blink 1s infinite}
.timer-box.big{position:fixed;left:18px;bottom:18px;width:22vw;aspect-ratio:16/9;border-radius:18px;overflow:hidden;z-index:50;box-shadow:0 12px 40px rgba(27,42,74,.25);border:3px solid #fff}
.timer-box.big .timer-num{display:none}
/* الشاشة الكبيرة */
.role-screen{overflow:hidden}
.screen{height:100vh;width:100vw;padding:3vh 3vw;display:flex;flex-direction:column}
.slide-wrap{flex:1;display:flex;flex-direction:column}
.hero{margin:6vh auto 0;text-align:center;max-width:80vw}
.hero h1{font-size:5.4vw;line-height:1.35;margin:.4em 0;font-weight:800}
.hero .sub{font-size:2vw;color:var(--gr);font-weight:700}
.hero .flag{font-size:8vw}
.hero h1.wisdom{font-family:Amiri,serif;font-size:4.6vw}
.card-slide{background:#fffdf8e6;border-radius:28px;padding:3vh 3vw;margin:2vh auto;max-width:86vw;box-shadow:0 10px 50px rgba(27,42,74,.08);font-size:1.7vw;line-height:1.9}
.card-slide.center{text-align:center}
.card-slide h2{font-size:3vw;margin:.2em 0 .5em}
.card-slide .sub{color:var(--gr);font-weight:700}
.quran{font-family:Amiri,serif;font-size:2.3vw;line-height:2}.quran.small{font-size:1.6vw}
.quote{font-size:1.6vw;color:var(--mut)}
.three{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:2vw}.three h3{color:var(--gr);font-size:2.2vw;margin:0}
.rules{columns:2;font-size:2vw;font-weight:700}.rules li{margin:.4em 0}
.goals{font-size:2.2vw;font-weight:700}.goals li{margin:.6em 0}
.dialog p{border-radius:20px;padding:1vh 1.5vw;max-width:70%;margin:1vh 0}.dialog .b1{background:var(--gd2)}.dialog .b2{background:var(--gr2);margin-right:auto}
.ops .big911{background:var(--rd);color:#fff;border-radius:12px;padding:0 .4em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5vw;margin:2vh 0}.stats div{background:#fff;border-radius:18px;padding:1.5vh 1vw;text-align:center;border:1px solid var(--line)}
.stats b{display:block;font-size:3vw;color:var(--gr)}.stats span{font-size:1.2vw;line-height:1.6;display:block}
.hero .reveal-on{opacity:0;transition:.6s}.revealed .reveal-on{opacity:1}
.hw{background:var(--gd2);border-radius:18px;padding:1.5vh 1.5vw;margin:2vh auto;max-width:70vw;font-size:1.6vw}
.joined-strip{display:flex;flex-wrap:wrap;gap:1vw;justify-content:center;margin-top:4vh}
.gchip{background:#fff;border:3px solid var(--gc);border-radius:999px;padding:.5vh 1.2vw;font-size:1.8vw;font-weight:800;display:inline-flex;gap:.5vw;align-items:center;animation:pop .4s}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.act-slide{text-align:center}.gstatus{display:flex;flex-wrap:wrap;justify-content:center;gap:1vw;margin-top:2vh}
.open-tag{color:var(--gr);font-weight:800;margin-top:2vh}
.panel{flex:1;background:#fffdf8ec;border-radius:28px;padding:2.5vh 2vw;overflow:auto;box-shadow:0 10px 50px rgba(27,42,74,.08)}
.ptitle{font-size:2vw;font-weight:800;margin-bottom:1.5vh}
.wall{display:grid;gap:1.2vw;grid-template-columns:repeat(3,1fr)}.wall.n2{grid-template-columns:1fr 1fr}.wall.n4{grid-template-columns:1fr 1fr}
.wcard,.tcard{background:#fff;border-radius:20px;border:3px solid var(--line);border-top:8px solid var(--gc,var(--line));padding:1.4vh 1vw;min-height:20vh}
.wcard.sub{border-color:var(--gr)}.wcard.empty{display:grid;place-items:center;color:var(--mut);border-style:dashed}
.whead{display:flex;justify-content:space-between;align-items:center;gap:8px}.wname{font-size:1.8vw;font-weight:800}
.stt{white-space:nowrap;font-size:1.1vw;font-weight:700;padding:.3vh .8vw;border-radius:999px;background:var(--iv)}.stt.done{background:var(--gr2);color:var(--gr)}.stt.live{background:var(--gd2)}
.bar{height:10px;background:var(--iv);border-radius:6px;overflow:hidden;margin:1vh 0}.bar i{display:block;height:100%;background:var(--gc,var(--gr));transition:.4s}
.snip{font-size:1.35vw;line-height:1.7;max-height:16vh;overflow:hidden}.snip p{margin:.3vh 0;background:var(--iv2);border-radius:8px;padding:.3vh .5vw}
.gr{margin-top:.6vh;font-weight:800;color:var(--gr)}
.focus-head{display:flex;gap:1vw;align-items:center;font-size:1.6vw;margin-bottom:1vh}
.ipad{background:#fff;border:10px solid #1B2A4A;border-radius:30px;padding:2vh 2vw;max-width:70vw;margin:0 auto;font-size:1.2vw;zoom:1.25}
.answers .rank{display:flex;flex-direction:column;gap:1vh;margin-bottom:2vh}
.rrow{display:grid;grid-template-columns:4vw 1fr 8vw 10vw 9vw;align-items:center;background:#fff;border-radius:16px;padding:1vh 1vw;border-right:10px solid var(--gc);font-size:1.8vw;font-weight:800}
.rrow.muted{opacity:.5}.rpos{font-size:2.2vw}.rsc{color:var(--gr)}.rt{font-size:1.3vw}.rb{font-size:1.2vw;color:var(--gd)}
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:1vw}
.ocard{background:#fff;border-radius:18px;padding:1.2vh 1vw;border-top:8px solid var(--gc);font-size:1.25vw;line-height:1.8}
.ocard.star{box-shadow:0 0 0 4px var(--gd)}.ohead{font-weight:800;font-size:1.5vw;display:flex;justify-content:space-between}
.modelv h2{font-size:2.2vw}
.board{max-width:70vw;margin:0 auto}.board h1{text-align:center;font-size:3.4vw}
.brow{display:grid;grid-template-columns:5vw 18vw 1fr 6vw;align-items:center;gap:1vw;margin:1.4vh 0;font-size:2vw;font-weight:800}
.bbar{height:4.5vh;background:#fff;border-radius:999px;overflow:hidden}.bbar i{display:block;height:100%;background:var(--gc);border-radius:999px;transition:1s}
.start-ov{position:fixed;inset:0;z-index:200;background:#F8F0E0f2;display:grid;place-items:center;text-align:center}.start-ov h1{font-size:4vw}
.conn-dot{position:fixed;top:10px;left:10px;width:12px;height:12px;border-radius:50%;background:var(--gd)}.conn-dot.live{background:var(--gr)}.conn-dot.reconnecting{background:var(--rd)}
/* احتفال */
.celebrate{position:fixed;inset:0;z-index:300;pointer-events:none;display:grid;place-items:center}
.confetti{position:absolute;inset:0;width:100%;height:100%}
.cele-card{background:#fff;border:4px solid var(--gd);border-radius:28px;padding:3vh 4vw;font-size:clamp(22px,3vw,48px);font-weight:800;text-align:center;animation:pop .5s;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.cele-star{font-size:clamp(50px,7vw,110px)}
/* لوحة المعلمة */
.teacher{display:grid;grid-template-columns:280px 1fr;height:100vh}
.tside{background:#fffdf8;border-left:1px solid var(--line);overflow:auto;padding:12px}
.tlogo{font-weight:800;font-size:20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tsec-h{font-size:12px;color:var(--gd);font-weight:800;margin:12px 4px 4px}
.titem{display:block;width:100%;text-align:right;border:0;background:none;padding:8px 10px;border-radius:10px;font-size:15px;color:var(--nv)}
.titem.sel{background:var(--nv);color:#fff}.titem.act{font-weight:700}
.tmain{overflow:auto;padding:14px 18px}
.ttop{display:flex;align-items:center;gap:12px}.tt{flex:1;text-align:center}.tt h2{margin:0;font-size:24px}.tt small{color:var(--gd);font-weight:700}
.tctl,.views{background:#fff;border-radius:16px;padding:10px 12px;margin:10px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1px solid var(--line)}
.durs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.trow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}
.tleft{font-size:30px;font-weight:800;min-width:90px}.tleft.warn{color:var(--rd)}
.tgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.tcard{font-size:15px;display:flex;flex-direction:column;gap:6px;min-height:auto}
.tcard.sub{border-color:var(--gr)}
.helper{font-size:13px;background:var(--iv);border-radius:8px;padding:4px 8px}.helper.good{background:var(--gr2);color:var(--gr)}
.otext{max-height:70px;overflow:hidden;font-size:14px;line-height:1.6;cursor:pointer;background:var(--iv2);border-radius:8px;padding:4px 8px}.otext.open{max-height:none}.otext p{margin:3px 0}
.grades{display:flex;gap:4px;flex-wrap:wrap}.grades .pill{font-size:13px;padding:5px 9px}
.modal{position:fixed;inset:0;background:#0006;z-index:100;display:grid;place-items:center;padding:16px}
.modal-card{background:#fffdf8;border-radius:22px;padding:18px;width:min(760px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.modal-card label{font-weight:800;margin-top:8px}.modal-card input{border:1.5px solid var(--line);border-radius:10px;padding:10px}
.reports{display:flex;flex-direction:column;gap:6px}.rep{text-align:right;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px;font-size:14px;color:var(--mut)}.rep.sel{border-color:var(--gr);color:var(--nv)}
.links div{margin:4px 0;font-size:14px}.links code{background:var(--iv);padding:2px 6px;border-radius:6px;word-break:break-all}
.glist .grow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
@media (max-width:820px){.teacher{grid-template-columns:1fr}.tside{max-height:34vh}.cols.c3{grid-template-columns:1fr}.opts{grid-template-columns:1fr}.envelopes{grid-template-columns:1fr}}
@media (orientation:portrait) and (max-width:1100px){.teacher{grid-template-columns:220px 1fr}}

.pv{margin:10px 0}.pv-label{font-weight:800;font-size:14px;color:var(--gr);margin-bottom:4px}
.pv-box{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:3px solid var(--nv);background:#000}
.pv-frame{position:absolute;top:0;right:0;width:1600px;height:900px;border:0;transform-origin:top right;pointer-events:none}
body.preview .conn-dot{display:none}

.tgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:start}
.tgrid .pv{margin:10px 0 0}.tctlcol .tctl,.tctlcol .views{margin:10px 0 0}
@media (max-width:1000px){.tgrid{grid-template-columns:1fr}}