/* Ferramenta "Rota da fibra" - mesmo esqueleto do programa: barra no alto, painel a esquerda, mapa no resto */
body.tool{font-size:14.5px;line-height:1.45;overflow:hidden}
.app{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh}

.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:1001}
.topbar .brand{margin-right:6px}
.pill{display:flex;align-items:center;gap:8px;max-width:340px;padding:6px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);min-width:0;cursor:pointer}
.pill .t{display:flex;flex-direction:column;min-width:0}
.pill .t small{font-size:11px;color:var(--muted);font-weight:600}
.pill .t span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill.empty .t span{color:var(--muted);font-weight:500}
.pill .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.pill.empty .dot{background:var(--muted)}
.spacer{flex:1}
.saved{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.saved::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.saved:empty{display:none}

.main{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:0}
.side{overflow-y:auto;padding:14px 18px 24px;display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--line);background:var(--panel);order:2}

/* etapas */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:4px;border-radius:12px;background:var(--soft);margin-top:-2px}
.stepper button{font:inherit;font-size:12px;font-weight:600;border:none;background:transparent;color:var(--muted);padding:7px 2px 6px;border-radius:9px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;min-width:0}
.stepper button i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink);font-size:12px;font-weight:700}
.stepper button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stepper button:hover:not(.on){color:var(--ink)}
.stepper button.on{background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}
.stepper button.on i{background:var(--accent);color:var(--accent-ink)}
.stepper button.done i{background:var(--accent-soft);color:var(--accent)}

.pane{display:flex;flex-direction:column;gap:12px}
.pane h2{font-size:26px;margin-top:2px}
.pane .lead{color:var(--muted);font-size:15px}
.pic{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:240/140}
.pic svg{width:100%;height:100%}
.pic.anim .k-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:kdraw 3.6s ease-in-out infinite}
@keyframes kdraw{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}

.howto{margin:0;padding:0;list-style:none;counter-reset:h;display:flex;flex-direction:column;gap:8px}
.howto li{counter-increment:h;display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.howto li::before{content:counter(h);flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12px;display:grid;place-items:center;margin-top:1px}

.searchbox{display:flex;gap:6px}
input[type=search],input[type=text]{font:inherit;font-size:15px;width:100%;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.results{display:flex;flex-direction:column;gap:4px}
.results button{font:inherit;text-align:left;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:10px;padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.results button:hover{border-color:var(--accent)}
.results button b{font-weight:600}
.results button small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results .msg{color:var(--muted);font-size:13.5px;padding:4px 2px}
.locate{align-self:flex-start;color:var(--accent)}
.note{font-size:13px;color:var(--muted)}
.note b{color:var(--ink);font-weight:600}
kbd{font:600 11.5px var(--f-body);padding:1px 6px;border-radius:5px;border:1px solid var(--line);background:var(--panel2)}

.btn.big{padding:13px 18px;font-size:15.5px;border-radius:12px;width:100%}
.btn.on{background:var(--warn-soft);border-color:var(--warn);color:var(--ink)}
.btn.danger-t{color:var(--bad)}
.zoomwarn{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--info-soft);font-size:13.5px}
.zoomwarn svg{width:20px;height:20px;color:var(--info);flex:none}

.listhead{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);font-weight:600;margin-top:4px}
.listhead b{color:var(--ink);font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.item.sel{border-color:var(--accent);background:var(--accent-soft)}
.item .bar{width:4px;align-self:stretch;border-radius:4px;background:var(--fibra);flex:none}
.item .sq{width:30px;height:22px;border-radius:6px;background:var(--c);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;flex:none;letter-spacing:.02em}
.item .tx{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.item .tx b{font-weight:600}
.item .tx small{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.item .tx input{font:inherit;font-weight:600;font-size:14px;padding:3px 6px;margin:-3px -6px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--ink);width:100%}
.item .tx input.obs{font-weight:400;font-size:12.5px;color:var(--muted)}
.item .tx input:hover{border-color:var(--line)}
.item .tx input:focus{border-color:var(--accent);background:var(--panel);color:var(--ink)}
.item .acts{display:flex;gap:2px}
.icon{font:inherit;width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.icon:hover{background:var(--soft);color:var(--ink)}
.icon.del:hover{background:var(--bad-soft);color:var(--bad)}
.icon svg{width:17px;height:17px}

.types{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.types button{font:inherit;font-weight:600;font-size:14px;text-align:left;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:12px;padding:10px;cursor:pointer;display:flex;align-items:center;gap:10px}
.types button:hover{border-color:var(--c)}
.types button.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset;background:var(--panel)}
.types button .sq{width:34px;height:24px;border-radius:7px;background:var(--c);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;flex:none}
.types button small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.types button:last-child:nth-child(odd){grid-column:1/-1}

.field{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600}
.field em{font-style:normal;font-weight:500;color:var(--muted)}
.field.err input{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.summary{margin:2px 0 0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:14px}
.summary dt{color:var(--muted)}
.summary dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.done{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--accent-soft);font-size:13.5px}
.done svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:1px}
.done b{display:block}
.navrow{display:flex;justify-content:space-between;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}

/* mapa */
.mapwrap{position:relative;min-height:0}
#map{position:absolute;inset:0;background:#1E2B26}
.leaflet-container{font-family:var(--f-body)}
.leaflet-control-attribution{font-size:10.5px}
.layers{position:absolute;top:12px;right:12px;z-index:1000;display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
.layers button{font:inherit;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--muted);padding:7px 12px;border-radius:9px;cursor:pointer}
.layers button.on{background:var(--accent);color:var(--accent-ink)}
.editbar{position:absolute;top:12px;left:12px;z-index:1000;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--panel);box-shadow:0 8px 30px -8px rgba(0,0,0,.35);border:2px solid var(--fibra);width:max-content;max-width:min(780px,calc(100% - 200px));font-size:14px}
.editbar.eq{border-color:var(--c,var(--accent))}
.editbar span{font-weight:500;flex:1;min-width:200px}
.editbar .acts{display:flex;gap:6px;flex:none}
.toast{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;gap:12px;align-items:center;padding:10px 10px 10px 16px;border-radius:12px;background:#14201C;color:#E6EEEA;box-shadow:0 8px 30px -8px rgba(0,0,0,.4);font-size:14px;max-width:calc(100% - 32px)}
.toast .btn{background:transparent;color:#4FD8B8;border-color:#2A3531}
.toast.noact{padding-right:16px}

/* marcador de equipamento */
.eqm{width:44px;height:34px;position:relative;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.eqm b{position:absolute;left:3px;right:3px;top:2px;height:22px;border-radius:7px;background:var(--c);border:1.5px solid #fff;color:#fff;font:700 10.5px var(--f-body);display:grid;place-items:center;letter-spacing:.02em}
.eqm i{position:absolute;left:50%;bottom:3px;width:10px;height:10px;background:var(--c);border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateX(-50%) rotate(45deg)}
.eqm.sel b{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c)}
.leaflet-container.placing,.leaflet-container.placing .leaflet-interactive{cursor:crosshair}
.lbl-tr{background:var(--panel);color:var(--ink);border:none;border-radius:7px;font-weight:600;font-size:12px;padding:2px 7px;box-shadow:var(--shadow)}
.lbl-tr::before{display:none}

/* ajuda */
.help{border:none;border-radius:18px;padding:0;max-width:520px;width:calc(100% - 32px);background:var(--panel);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.help::backdrop{background:rgba(10,20,16,.45)}
.help form{padding:24px;display:flex;flex-direction:column;gap:14px}
.help h2{font-size:24px}
.help ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

@media (max-width:760px){
  .topbar{padding:8px 10px;gap:8px}
  .topbar .brand small,.hide-sm,.saved{display:none}
  .pill{display:none}
  .main{grid-template-columns:1fr;grid-template-rows:minmax(0,52fr) minmax(0,48fr)}
  .mapwrap{order:-1}
  .side{border-left:none;border-top:1px solid var(--line);padding:10px 14px 20px;gap:12px}
  .sidehead{top:-10px;margin:-10px -14px 0;padding:10px 14px 10px}
  .pic{display:none}
  .pane h2{font-size:22px}
  .editbar{top:auto;bottom:16px;left:10px;max-width:calc(100% - 20px);width:calc(100% - 20px);flex-wrap:wrap;gap:8px}
  .editbar .acts{width:100%}
  .editbar .acts .btn{flex:1}
  .layers{top:10px;right:10px}
  .legend{bottom:30px;max-width:calc(100% - 70px)}
  .help .pic{display:block}
  .toast{bottom:auto;top:56px}
}
@media (prefers-reduced-motion:reduce){.pic.anim .k-draw{animation:none;stroke-dashoffset:0}}
.eqicon{background:none;border:none}
#map:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}#map:focus{outline:none}

/* rodape do painel: limpar tudo, longe dos botoes principais */
.sidefoot{margin-top:auto;padding-top:8px;display:flex;justify-content:flex-end}
.sidefoot .btn svg{width:15px;height:15px}
.btn.danger-t{color:var(--bad)}
.btn.danger-t:hover{background:var(--bad-soft)}
.btn.dangerbtn{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.dangerbtn:hover{filter:brightness(1.08);border-color:var(--bad)}

/* tipo de fibra na lista e na legenda */
.item .fo{font:700 11.5px var(--f-body);padding:2px 7px 2px 6px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:5px;margin-left:6px;vertical-align:1px}
.item .fo i{width:9px;height:9px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.item .fo:hover{border-color:var(--accent)}
.item .bar{background:var(--c,var(--fibra));box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.legend{position:absolute;left:12px;bottom:34px;z-index:1000;background:var(--panel);border-radius:12px;box-shadow:var(--shadow);padding:8px 12px;display:flex;flex-direction:column;gap:4px;font-size:12.5px;min-width:150px}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:18px;height:5px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.3);flex:none}
.legend b{font-weight:700}
.legend span{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;padding-left:10px}

/* resumo antes de baixar */
.sumhead{font-weight:700;font-size:14px;margin-top:4px}
.summary dt.tot,.summary dd.tot{border-top:1px solid var(--line);padding-top:6px}
.summary dt .sw{display:inline-block;width:14px;height:5px;border-radius:3px;background:var(--c);margin-right:8px;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.done .btn{margin-top:10px}

/* janelas: tipo de fibra, confirmacao, tutorial */
.help.small{max-width:420px}
.help form p{margin:0;color:var(--muted)}
.foinput{display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2)}
.foinput:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.foinput .sw{width:22px;height:8px;border-radius:4px;background:var(--c,#9CA3AF);box-shadow:0 0 0 1px rgba(0,0,0,.25);flex:none}
.foinput input{border:none;background:transparent;box-shadow:none!important;font-size:18px;font-weight:700;letter-spacing:.02em;padding:10px 4px}
.tut{position:relative;padding:20px 24px 22px;display:flex;flex-direction:column;gap:16px}
.tut .slide{margin:0;display:flex;flex-direction:column;gap:14px}
.tut .slide .pic{aspect-ratio:240/140}
.tut figcaption small{color:var(--accent);font-weight:700;font-size:12.5px}
.tut figcaption h2{margin:2px 0 6px}
.tut figcaption p{margin:0;color:var(--muted);font-size:15px}
.tutnav{display:flex;align-items:center;gap:8px}
.tutnav .dots{flex:1;display:flex;gap:6px}
.tutnav .dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tutnav .dots i.on{background:var(--accent);width:20px;border-radius:4px}
.tutx{position:absolute;top:10px;right:10px;z-index:1}
.field.err .foinput{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.toast{pointer-events:none}.toast .btn{pointer-events:auto}

/* etapas + Voltar/Proximo sempre visiveis no alto do painel */
.sidehead{position:sticky;top:-14px;z-index:3;background:var(--panel);margin:-14px -18px 0;padding:14px 18px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.stepnav{display:flex;gap:8px}
.stepnav .btn{padding:9px 12px;font-size:14.5px}
.stepnav #navNext{flex:1}
.stepnav svg{width:17px;height:17px}

/* listas agrupadas (por tipo de fibra / de equipamento), recolhidas por padrao */
.grp{border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;user-select:none}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary:hover{background:var(--soft)}
.grp>summary .sw{width:20px;height:6px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.25);flex:none}
.grp>summary .sq{width:30px;height:22px;border-radius:6px;background:var(--c);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}
.grp>summary b{font-weight:700}
.grp>summary .cnt{color:var(--muted);font-size:13px}
.grp>summary .len{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.grp>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;margin:0 2px 0 4px;flex:none}
.grp[open]>summary::after{transform:rotate(45deg)}
.grp[open]>summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.grp .gbody{display:flex;flex-direction:column;gap:6px;padding:8px}
.grp .item{background:var(--panel)}
.grp:not(:has(.len))>summary .cnt{margin-left:auto}
.help .navrow{flex-wrap:wrap}.help .navrow .btn{flex:1 1 auto}

/* quadro de desenho no painel (substitui o botao enquanto desenha) */
.drawbox{border:2px solid var(--c,var(--accent));border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--panel)}
.drawbox p{margin:0;font-size:13.5px;color:var(--muted)}
.drawbox p b{color:var(--ink)}
.dbhead{display:flex;align-items:center;gap:8px;font-size:15px}
.dbhead .sw{width:22px;height:6px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.dbacts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dbacts .primary{grid-column:1/-1;padding:10px;font-size:14.5px}

/* rotulo do marcador cresce com o texto (outro equipamento mostra o nome) */
.eqm{width:64px}
.eqm b{left:50%;right:auto;transform:translateX(-50%);min-width:38px;padding:0 6px;white-space:nowrap}

/* baloes no mapa */
.ppop .leaflet-popup-content-wrapper{border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:0 12px 34px -10px rgba(0,0,0,.45)}
.ppop .leaflet-popup-tip{background:var(--panel)}
.ppop .leaflet-popup-content{margin:14px 14px 12px;font:14px/1.45 var(--f-body)}
.ppop a.leaflet-popup-close-button{top:6px;right:6px;width:26px;height:26px;font-size:20px;color:var(--muted)}
.pp{display:flex;flex-direction:column;gap:10px}
.pph{display:flex;align-items:center;gap:8px;padding-right:22px;font-size:15px}
.pph span:last-child:not(.sq):not(.sw){color:var(--muted);font-size:13px;margin-left:auto}
.pph .sw{width:20px;height:6px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.25);flex:none}
.pph .sq{min-width:32px;padding:0 5px;height:22px;border-radius:6px;background:var(--c);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.pp .field input,.pp textarea{font:inherit;font-size:14px;width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);resize:vertical}
.pp textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.ppacts{display:flex;gap:6px;flex-wrap:wrap}
.ppacts .btn{flex:1 1 auto}

.fielderr{margin:-6px 0 0!important;color:var(--bad)!important;font-size:13px;font-weight:600}

/* animacoes das etapas */
.pic.demo{aspect-ratio:auto;display:flex;flex-direction:column}
.pic.demo svg{width:100%;height:auto;aspect-ratio:240/140}
.pic.demo .cap{padding:8px 12px;font-weight:600;font-size:13.5px;border-top:1px solid var(--line);background:var(--panel2);min-height:36px;display:flex;align-items:center}
.pic.demo [data-k]{opacity:0;transition:opacity .3s}
.pic.demo [data-k].on{opacity:1}
.d-seg{fill:none;stroke:#FF2B2B;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease,opacity .3s!important}
.d-seg.on{stroke-dashoffset:0}
.d-vx{fill:#fff;stroke:#FF2B2B;stroke-width:2}
.d-fib{fill:none;stroke:#FF2B2B;stroke-width:5;stroke-linejoin:round}
.d-bar{fill:var(--panel);stroke:#FF2B2B;stroke-width:1.5}
.d-btn{fill:var(--accent)}
.d-btn2{fill:var(--panel);stroke:var(--line)}
.d-btn3{fill:var(--panel);stroke:var(--bad)}
.d-bt{fill:#fff;font:700 7.5px var(--f-body);text-anchor:middle}
.d-bt.w{fill:var(--ink)}
.d-btn3+.d-bt{fill:var(--bad)}
.d-pop{fill:var(--panel);stroke:var(--line);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.d-pt{fill:var(--ink);font:700 8px var(--f-body)}
.d-ph{fill:var(--muted);font:500 7px var(--f-body)}
.d-in{fill:var(--panel2);stroke:var(--line)}
.d-panel{fill:var(--panel);stroke:var(--line)}
.d-ring{fill:none;stroke:var(--ink);stroke-width:2}
.d-drop{transform:translateY(-8px);transition:opacity .3s,transform .4s cubic-bezier(.3,1.4,.5,1)!important}
.d-drop.on{transform:none}
.d-cur{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.d-cur path{fill:var(--ink);stroke:var(--panel);stroke-width:1}
.d-tap{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}
.d-cur.tap .d-tap{animation:dtap .5s ease-out}
@keyframes dtap{from{opacity:.6;transform:scale(.3)}to{opacity:0;transform:scale(1.7)}}
/* ponto marcado na edicao do tracado */
.marker-icon.vx-sel{background:var(--accent)!important;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent),0 0 12px rgba(0,0,0,.45)!important}

/* dica de precisao: espaco sempre reservado para o quadro nao mudar de tamanho */
.drawbox .dbhint{margin:0;font-size:12.5px;font-weight:600;color:var(--warn);visibility:hidden;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawbox .dbhint.on{visibility:visible}