/* ---- pages 2–3: stempel laik (world sama, halaman dalam) ---- */
.pg-hero{max-width:var(--max);margin:0 auto;padding:50px 24px 8px;text-align:center}
.pg-hero .doc-label{justify-content:center}
.pg-hero .doc-label::before{display:none}
.pg-hero .doc-label::after{display:none}
.pg-hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.02em}
.pg-hero h1 .hl{color:var(--green);position:relative}
.pg-hero .lede{margin:18px auto 0;max-width:680px}
.pg-hero .lede code{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-family:'JetBrains Mono';font-size:14px;color:var(--green2)}
.page-nav{max-width:var(--max);margin:10px auto 64px;padding:0 24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.active{color:var(--green2)!important}

/* ---- Bagan 1: formulir alur (pita) ---- */
.bagan-wrap{max-width:1080px;margin:0 auto;border:2px solid var(--ink);border-radius:var(--rad);
  background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.bagan-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 20px;background:var(--ink);color:var(--paper)}
.bagan-top .doc-label{color:var(--paper);margin:0;font-size:11px}
.bagan-top .doc-label::before,.bagan-top .doc-label::after{background:var(--paper)}
.bagan-top span:last-child{font-family:'JetBrains Mono';font-size:11px;color:rgba(246,240,227,.75);letter-spacing:.1em}
.bagan{display:grid;grid-template-columns:1fr auto 1.45fr auto 1fr;gap:0;align-items:stretch;padding:22px}
.bg-col{display:flex;flex-direction:column;gap:10px;padding:6px 4px}
.bg-label{font-family:'JetBrains Mono';font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--dim);text-align:center;text-transform:uppercase;margin-bottom:2px}
.bg-label b{display:inline-block;border:1.5px solid currentColor;border-radius:5px;padding:1px 8px}
.bg-col.input .bg-label b{color:var(--green)}
.bg-col.process .bg-label b{color:var(--amber)}
.bg-col.output .bg-label b{color:var(--ink2)}
.bg-node{background:var(--paper2);border:1.5px solid var(--line2);border-left:5px solid var(--green); /* impeccable-disable-line side-tab: aksen sisi node bagan IPO, bukan kartu */
  border-radius:9px;padding:12px 14px;font-size:14px;font-weight:700;color:var(--ink);box-shadow:0 1px 0 rgba(34,40,31,.04)}
.bg-node small{display:block;color:var(--mut);font-weight:500;font-size:12px;margin-top:3px;line-height:1.4}
.bg-col.process .bg-node{border-left-color:var(--amber)}
.bg-col.output .bg-node{border-left-color:var(--ink2)}
.bg-flow{display:grid;place-items:center;padding:0 6px}
.bg-flow .ic{width:26px;height:26px;color:var(--green2)}
.bg-steps{list-style:none;display:flex;flex-direction:column;gap:8px}
.bg-steps li{display:flex;gap:10px;align-items:flex-start;background:var(--paper2);
  border:1.5px solid var(--line2);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--ink2);line-height:1.4}
.bg-steps li b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--amber);color:var(--amber);font-size:11.5px;font-weight:700}
.bg-steps .mono{font-family:'JetBrains Mono';color:var(--green2);font-size:11.5px;font-weight:600}
.bg-cat{display:flex;gap:6px;margin-top:14px;justify-content:center;flex-wrap:wrap}
.bg-cat span{font-family:'JetBrains Mono';font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px}
.bg-feedback{text-align:center;border-top:1.5px dashed var(--line2);margin:0 22px;padding:14px 10px 18px;
  color:var(--ink2);font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.bg-feedback .ic{width:16px;height:16px;color:var(--green)}
.bg-feedback strong{color:var(--green2)}

/* ---- cara kerja: slip bernomor ---- */
.flow-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1080px;margin:0 auto}
.fc{position:relative;background:var(--paper2);border:1.5px solid var(--line2);
  border-radius:var(--rad-s);padding:24px 18px 20px;box-shadow:0 1px 0 rgba(34,40,31,.04);overflow:hidden}
.fc::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--green);opacity:.55}
.fc::after{content:"";position:absolute;right:14px;top:10px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--green);opacity:.35}
.fc-n{font-family:'JetBrains Mono';font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--dim);
  display:flex;align-items:center;gap:8px}
.fc-n::after{content:"";flex:1;height:1px;background:var(--line)}
.fc p{margin-top:10px;font-size:14px;color:var(--ink2)}
.fc b{color:var(--green2)}

/* ---- split: dua lembar ---- */
.split{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.split-card{background:var(--paper2);border:2px solid var(--line2);border-radius:var(--rad);
  padding:30px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.split-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.split-card .doc-label{margin-bottom:16px}
.split-card.kebaruan::before{background:var(--green)}
.split-card.manfaat::before{background:var(--amber)}
.tick{list-style:none;display:flex;flex-direction:column;gap:13px}
.tick li{position:relative;padding-left:30px;font-size:14.5px;color:var(--ink2);line-height:1.55}
.tick li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  background:var(--greenT);border:1.5px solid var(--green)}
.tick li::after{content:"";position:absolute;left:6px;top:9px;width:7px;height:4px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)} /* impeccable-disable-line side-tab: stroke centang, bukan border kartu */
.tick.acc li::before{background:var(--amberT);border-color:var(--amber)}
.tick.acc li::after{border-color:var(--amber)}
.tick b{color:var(--green2)}
.tick.acc b{color:var(--amber)}
.tick .tc{position:absolute;right:18px;top:14px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.1em;color:var(--dim);font-weight:700}

/* ---- diagnosis ---- */
.diag{max-width:900px;margin:0 auto}
.diag-board{border:2px solid var(--ink);border-radius:var(--rad);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.diag-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 22px;background:var(--ink);color:var(--paper)}
.diag-head .doc-label{color:var(--paper);margin:0;font-size:11px}
.diag-head .doc-label::before,.diag-head .doc-label::after{background:var(--paper)}
.diag-head .no-antrian{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,240,227,.8)}
.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.diag-panel{padding:30px 28px}
.diag-panel + .diag-panel{border-left:2px dashed var(--line2)}
.diag-panel h3{font-size:18px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.diag-panel h3 .bulat{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:'JetBrains Mono';font-size:13px;font-weight:700;flex:none}
.panel-l .bulat{background:var(--greenT);color:var(--green);border:1.5px solid var(--green)}
.panel-a .bulat{background:var(--amberT);color:var(--amber);border:1.5px solid var(--amber)}
.diag-panel .qsub{font-size:12px;color:var(--mut);margin-bottom:20px;font-family:'JetBrains Mono';letter-spacing:.03em}
.slider-row{margin-bottom:20px}
.slider-row:last-child{margin-bottom:0}
.slider-row label{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;margin-bottom:10px;color:var(--ink)}
.slider-row label b{color:var(--green2);font-family:'JetBrains Mono';font-size:14px;font-weight:700;
  background:var(--greenT);border-radius:6px;padding:1px 9px;flex:none}
.panel-a .slider-row label b{color:var(--amber);background:var(--amberT)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:26px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--line);border:1px solid var(--line2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  margin-top:-7px;background:var(--green2);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--green)}
.panel-a input[type=range]::-webkit-slider-thumb{background:var(--amber);box-shadow:0 0 0 2px var(--amber)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--green2);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--green)}
.panel-a input[type=range]::-moz-range-thumb{background:var(--amber);box-shadow:0 0 0 2px var(--amber)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid rgba(31,111,74,.4);outline-offset:1px}

/* lembar hasil = stempel raksasa */
.diag-result{margin:26px 0 0;border:2px solid var(--ink);border-radius:var(--rad);background:var(--paper2);
  box-shadow:var(--shadow);padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;position:relative}
.diag-result::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.seal.big{width:150px;height:150px;border-width:4px;transform:rotate(-10deg);z-index:1}
.seal.big b{font-size:19px}
.diag-verdict{position:relative;z-index:1}
.diag-verdict .qsub{font-size:12px;color:var(--mut);font-family:'JetBrains Mono';letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.score-big{font-family:'JetBrains Mono';font-size:58px;font-weight:700;line-height:1;color:var(--green2);letter-spacing:-.03em}
.score-big small{font-size:15px;color:var(--mut);font-weight:500}
.score-cat{display:inline-block;margin:10px 0 12px;padding:5px 14px;border-radius:7px;
  font-family:'JetBrains Mono';font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.cat-low{background:var(--redT);color:var(--red);border:1.5px solid var(--red)}
.cat-mid{background:var(--amberT);color:var(--amber);border:1.5px solid var(--amber)}
.cat-high{background:var(--greenT);color:var(--green);border:1.5px solid var(--green)}
.diag-reco{position:relative;z-index:1;background:var(--card);border:1.5px solid var(--line2);border-radius:10px;
  padding:16px 18px;font-size:14.5px;color:var(--ink2)}
.diag-reco b{color:var(--green2)}
.diag-scale{display:flex;justify-content:space-between;margin-top:18px;font-family:'JetBrains Mono';
  font-size:11px;color:var(--dim);font-weight:600;letter-spacing:.04em}
.diag-scale i{font-style:normal;border-top:1.5px solid var(--line2);padding-top:4px;flex:1;text-align:center}
.diag-scale i:first-child{border-top-color:var(--red)}
.diag-scale i:last-child{border-top-color:var(--green)}

/* ---- simulasi produksi video ---- */
.sim{max-width:860px;margin:0 auto}
.sim-prog{display:flex;gap:8px;margin-bottom:18px}
.sim-prog i{flex:1;height:6px;border-radius:99px;background:var(--line);position:relative}
.sim-prog i.done{background:var(--green)}
.sim-prog i.cur{background:var(--amber)}
.sim-prog i.soon{background:var(--line2)}
.sim-card{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:var(--rad);
  box-shadow:var(--shadow);padding:30px 32px}
.sim-head{display:flex;gap:18px;align-items:flex-start}
.sim-no{flex:none;font-family:'JetBrains Mono';font-size:15px;font-weight:700;letter-spacing:.1em;
  color:var(--green2);border:2px solid var(--green);border-radius:10px;padding:9px 12px;transform:rotate(-3deg);
  background:var(--greenT)}
.sim-head h2{font-size:23px;font-weight:800;line-height:1.2}
.sim-tools{margin-top:5px;font-size:11.5px;color:var(--mut);letter-spacing:.08em}
.sim-q{margin:22px 0 16px;font-size:16px;font-weight:700;color:var(--ink)}

/* ---- panggung mini-game ---- */
.mg{display:grid;gap:14px}
.mg-note{font-size:13px;color:var(--mut);background:var(--greenT);border:1px dashed var(--green);
  border-radius:8px;padding:9px 12px;line-height:1.45}
.mg .btn{justify-self:start}
.mg-done{font-size:14px;color:var(--mut);background:var(--paper2);border:1.5px solid var(--line2);
  border-radius:10px;padding:16px}
.mg-replay{background:none;border:none;color:var(--green2);font-weight:700;font-family:inherit;
  cursor:pointer;text-decoration:underline}

/* chips (pilih ide / platform) */
.mg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mg-grid.wide{grid-template-columns:repeat(3,1fr)}
.mg-chip{position:relative;overflow:hidden;text-align:left;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;color:#f5f5f5;background:linear-gradient(180deg,#262626 0%,#0e0e0e 100%);
  border:none;border-radius:10px;padding:13px 14px 13px 44px;line-height:1.35;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.18);transition:transform .15s,color .2s}
.mg-chip::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:30px;border-radius:7px;
  background:linear-gradient(180deg,#7ee2a8 0%,#2f9e6e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(0,0,0,.14)}
.mg-chip::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:30px;
  background:url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2214%22%20height%3D%2216%22%20viewBox%3D%220%200%2014%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%230f0f0f%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2211%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%2214%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%222%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%225%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2214%22%20r%3D%221.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/auto no-repeat;
  animation:bd-dot-wave 1.4s ease-in-out infinite}
.mg-chip:hover:not(:disabled){transform:translateY(-1px)}
.mg-chip:hover::before{width:calc(100% - 8px);transition:width .22s cubic-bezier(.65,0,.35,1)}
.mg-chip:hover{color:#101010}
.mg-chip.on,.mg-chip.correct{color:#101010}
.mg-chip.on::before,.mg-chip.correct::before{width:calc(100% - 8px)}
.mg-chip.wrong{color:#101010}
.mg-chip.wrong::before{background:linear-gradient(180deg,#ff9d8a 0%,#e0523f 100%)}
.mg-chip.dim{opacity:.5}
.mg-chip:disabled{cursor:default;color:#f5f5f5}
.mg-chip:disabled::before{width:30px}

/* sort naskah */
.mg-sort{display:grid;gap:8px}
.mg-row{display:flex;gap:12px;align-items:center;background:var(--paper2);border:1.5px solid var(--line2);
  border-radius:10px;padding:11px 13px}
.mg-tag{flex:none;font-family:'JetBrains Mono';font-size:11px;font-weight:700;color:var(--green2);
  background:var(--greenT);border:1px solid var(--green);border-radius:5px;padding:2px 7px}
.mg-rowt{flex:1;font-size:13.5px;line-height:1.4;color:var(--ink)}
.mg-ar{flex:none;display:flex;flex-direction:column;gap:2px}
.mg-ar button{width:26px;height:18px;border:1px solid var(--line2);background:var(--card);border-radius:5px;
  cursor:pointer;color:var(--mut);font-size:9px;line-height:1;padding:0}
.mg-ar button:hover{border-color:var(--green);color:var(--green2)}
.mg-row.correct{background:var(--greenT);border-color:var(--green)}
.mg-row.wrong{background:#fbe9e6;border-color:var(--red)}

/* slider zona (aset visual) */
.mg-slide label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin-bottom:6px}
.mg-slide label b{font-weight:700;color:var(--ink)}
.mg-ends{display:flex;gap:14px}
.mg-ends i{font-style:normal;font-size:11px;color:var(--dim)}
.mg-track{position:relative;padding:6px 0}
.mg-track::before{content:"";position:absolute;left:var(--a);right:calc(100% - var(--b));top:50%;height:8px;
  transform:translateY(-50%);background:var(--greenT);border:1px solid var(--green);border-radius:6px;z-index:0}
.mg-track input[type=range]{position:relative;z-index:1;width:100%;margin:0;background:transparent}
.mg-slide{background:var(--paper2);border:1.5px solid var(--line2);border-radius:10px;padding:12px 14px}
.mg-slide.hit{border-color:var(--green);background:var(--greenT)}
.mg-slide.miss{border-color:var(--red);background:#fbe9e6}

/* pasang audio (slot + bank) */
.mg-slots{display:grid;gap:8px}
.mg-slot{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--paper2);
  border:1.5px dashed var(--line2);border-radius:10px;padding:11px 14px;cursor:pointer}
.mg-slot:hover{border-color:var(--green)}
.mg-slotn{font-size:13.5px;font-weight:700;color:var(--ink)}
.mg-slotv{font-size:12.5px;color:var(--dim);font-family:'JetBrains Mono'}
.mg-slot.filled{border-style:solid}
.mg-slot.filled .mg-slotv{color:var(--green2)}
.mg-slot.correct{background:var(--greenT);border-color:var(--green)}
.mg-slot.wrong{background:#fbe9e6;border-color:var(--red)}
.mg-bank{display:flex;flex-wrap:wrap;gap:8px}
.mg-tok{position:relative;overflow:hidden;font-family:inherit;font-size:12.5px;font-weight:700;color:#f5f5f5;
  background:linear-gradient(180deg,#262626 0%,#0e0e0e 100%);border:none;border-radius:8px;
  padding:8px 12px 8px 34px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.16)}
.mg-tok::before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:24px;border-radius:5px;
  background:linear-gradient(180deg,#7ee2a8 0%,#2f9e6e 100%)}
.mg-tok.act::before{width:calc(100% - 6px)}
.mg-tok.act{color:#101010}
.mg-tok:hover:not(:disabled){transform:translateY(-1px);color:#101010}
.mg-tok:hover::before{width:calc(100% - 6px);transition:width .22s cubic-bezier(.65,0,.35,1)}
.mg-tok.used{opacity:.4;cursor:default;color:#f5f5f5}
.mg-tok:disabled{cursor:default;color:#f5f5f5}
.mg-tok:disabled::before{width:24px}

/* editing */
.mg-edit{display:grid;gap:14px}
.mg-field{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mg-field>span{font-size:13.5px;font-weight:700;color:var(--ink)}
.mg-field>span b{font-family:'JetBrains Mono';color:var(--green2)}
.mg-seg{display:inline-flex;border:1.5px solid var(--line2);border-radius:9px;overflow:hidden}
.mg-seg button{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--card);
  border:none;border-right:1px solid var(--line2);padding:8px 14px;cursor:pointer;transition:background .15s,color .15s}
.mg-seg button:last-child{border-right:none}
.mg-seg button.on{background:linear-gradient(180deg,#7ee2a8 0%,#2f9e6e 100%);color:#101010;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.mg-field input[type=range]{flex:1;min-width:160px}
.mg-preview{display:flex;justify-content:center;padding:6px}
.mg-phone{position:relative;background:linear-gradient(160deg,#2a2f27,#3c433a);border-radius:14px;
  display:grid;place-items:center;color:#fff8;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.15em;
  border:3px solid #1f241d;transition:width .2s,height .2s /* impeccable-disable-line layout-transition: preview kecil sekali-klik, ukuran tetap (96-200px) */}
.mg-phone.r916def,.mg-phone.r916{width:96px;height:170px}
.mg-phone.r11{width:150px;height:150px}
.mg-phone.r169{width:200px;height:112px}
.mg-phone.sub::after{content:"● subtitle";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  background:#000a;color:#ffde8a;font-size:8px;padding:2px 6px;border-radius:4px;white-space:nowrap}

/* checklist QC */
.mg-check{display:grid;gap:8px}
.mg-ci{display:flex;gap:11px;align-items:flex-start;background:var(--paper2);border:1.5px solid var(--line2);
  border-radius:10px;padding:11px 14px;cursor:pointer;font-size:13.5px;line-height:1.4}
.mg-ci input{margin-top:2px;accent-color:var(--green);width:16px;height:16px}
.mg-ci.correct{background:var(--greenT);border-color:var(--green)}
.mg-ci.wrong{background:#fbe9e6;border-color:var(--red)}
.mg-ci.missed{border-style:dashed;border-color:var(--amber)}

/* evaluasi */
.mg-eval{display:grid;gap:12px}
.mg-case{background:var(--paper2);border:1.5px solid var(--line2);border-radius:10px;padding:13px 15px}
.mg-metric{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;gap:9px;align-items:center}
.mg-mtag{flex:none;font-family:'JetBrains Mono';font-size:10px;font-weight:700;color:var(--amber);
  background:#fdf1d8;border:1px solid var(--amber);border-radius:5px;padding:2px 7px}
.mg-copts{display:grid;gap:7px}
.mg-copts button{position:relative;overflow:hidden;text-align:left;font-family:inherit;font-size:12.5px;font-weight:700;
  color:#f5f5f5;background:linear-gradient(180deg,#262626 0%,#0e0e0e 100%);border:none;border-radius:8px;
  padding:9px 12px 9px 36px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.16)}
.mg-copts button::before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:26px;border-radius:5px;
  background:linear-gradient(180deg,#7ee2a8 0%,#2f9e6e 100%)}
.mg-copts button:hover:not(:disabled){transform:translateY(-1px);color:#101010}
.mg-copts button:hover::before{width:calc(100% - 6px);transition:width .22s cubic-bezier(.65,0,.35,1)}
.mg-copts button.on,.mg-copts button.correct{color:#101010}
.mg-copts button.on::before,.mg-copts button.correct::before{width:calc(100% - 6px)}
.mg-copts button.wrong{color:#101010}
.mg-copts button.wrong::before{background:linear-gradient(180deg,#ff9d8a 0%,#e0523f 100%)}
.mg-copts button:disabled{cursor:default;color:#f5f5f5}
.mg-copts button:disabled::before{width:26px}

/* feedback bar */
.mg-feedback{margin-top:16px;font-size:13.5px;line-height:1.5;border-radius:10px;padding:12px 15px;border:1.5px solid}
.mg-feedback b{font-family:'JetBrains Mono';margin-right:6px}
.mg-feedback.ok{background:var(--greenT);border-color:var(--green);color:var(--green2)}
.mg-feedback.mid{background:#fdf1d8;border-color:var(--amber);color:#8a5a12}
.mg-feedback.bad{background:#fbe9e6;border-color:var(--red);color:var(--red)}
.sim-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.sim-count{font-size:12px;color:var(--dim);letter-spacing:.1em}
.sim-recap-wrap{margin-top:26px;grid-column:1/-1;position:relative;z-index:1}
.sim-recap-wrap .qsub{font-size:11.5px;color:var(--mut);font-family:'JetBrains Mono';letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:10px}
.sim-recap{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-recap li{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1.5px solid var(--line2);
  border-radius:9px;padding:9px 12px;font-size:12.5px;line-height:1.4}
.sim-recap li i{flex:none;font-family:'JetBrains Mono';font-style:normal;font-weight:700;color:var(--green2);font-size:11px;
  border:1px solid var(--line2);border-radius:5px;padding:0 5px;background:var(--greenT)}
.sim-recap li span b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);
  font-family:'JetBrains Mono'}
.sim-recap li em{flex:none;font-style:normal;font-family:'JetBrains Mono';font-weight:700;font-size:12px;color:var(--green2)}
.sim-recap li.r-md em{color:#8a5a12}
.sim-recap li.r-lo em{color:var(--red)}
.sim-recap-wrap .btn{margin-top:16px}
.diag-result .sim-recap-wrap{margin-top:0}

/* ---- responsive ---- */
@media(max-width:700px){
  .sim-recap{grid-template-columns:1fr}
  .sim-card{padding:22px 18px}
  .sim-head{flex-direction:column;gap:10px}
  .mg-grid{grid-template-columns:1fr}
  .mg-grid.wide{grid-template-columns:repeat(2,1fr)}
  .mg-field{flex-direction:column;align-items:flex-start}
  .mg-field input[type=range]{width:100%}
  .mg-bank{gap:6px}
  .mg-edit{gap:12px}
}

/* ---- responsive ---- */
@media(max-width:900px){
  .bagan{grid-template-columns:1fr;gap:8px}
  .bg-flow{transform:rotate(90deg);padding:2px 0}
  .flow-cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .diag-grid{grid-template-columns:1fr}
  .diag-panel + .diag-panel{border-left:none;border-top:2px dashed var(--line2)}
  .diag-result{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media(max-width:520px){
  .flow-cards{grid-template-columns:1fr}
}