/* BRASLOL 2 - modal de saves (Carregar / Salvar / Importar / Exportar). Mesma linguagem do modal de configuracoes (settings.css).
   Todas as classes comecam com v- . Sem style="" no HTML (CSP): so classes aqui. O JS so troca o atributo hidden e as classes .on. */

#svmodal{--d:"Bahnschrift","DIN Alternate","DIN 1451 Std","Barlow Semi Condensed","Roboto Condensed","Segoe UI",system-ui,-apple-system,sans-serif;
  position:fixed;inset:0;z-index:41;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(8,10,28,.62);font-family:var(--d);color:#fff;user-select:none;-webkit-user-select:none;animation:scrin .2s ease both}
#svmodal[hidden]{display:none}
#svmodal :focus-visible{outline:2px solid #fff;outline-offset:2px}
.v-p{position:relative;width:min(740px,100%);max-height:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;outline:0;
  background:linear-gradient(135deg,rgba(46,54,78,.34),rgba(28,34,56,.40));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:5px;animation:hin .25s ease both}
.v-p:focus-visible{outline:0}
.v-ph{display:flex;align-items:center;gap:14px;height:58px;flex:none;margin:0 20px;border-bottom:1px solid rgba(255,255,255,.5)}
.v-ph h2{margin:0 auto 0 0;font-size:15px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.v-logo{display:block;flex:none;width:22px;height:24px;object-fit:contain;pointer-events:none}
.v-x{margin:0 -6px 0 0}   /* so a posicao: o visual e o .x-btn (css/style.css) */
.v-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:6px 20px 8px}
.v-hint{margin:12px 0 4px;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.6)}
.v-row{display:flex;flex-direction:column;gap:12px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.v-row:last-of-type{border-bottom:0}
.v-main{display:flex;align-items:center;justify-content:space-between;gap:16px}
.v-au{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.v-au small{font-size:11.5px;letter-spacing:.02em;color:rgba(255,255,255,.7)}
.v-tgs{display:flex;gap:4px}
.v-tg{height:26px;padding:0 12px;font-size:10.5px}
.v-tg.on{background:#e6eaff;color:#141a2e;pointer-events:none}
.v-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.v-tx b{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.v-tl{display:flex;align-items:baseline;gap:8px;min-width:0}
.v-tl b{flex:none}
.v-t1{min-width:0;font-size:12px;font-weight:700;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-lg{display:block;width:40px;height:40px;margin-top:6px;object-fit:contain;pointer-events:none}
.v-au .v-lg{margin:-7px auto -7px 0}   /* no modo Salvar: logo a esquerda da linha do save automatico; a margem negativa (-7px) faz a linha continuar com a altura dos botoes On/Off (26px), entao a vaga preenchida nao cresce */
.v-tx small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;line-height:1.35;letter-spacing:.02em;color:rgba(255,255,255,.7)}
.v-tx .v-bad{white-space:normal;color:#ffb3b3;font-weight:700}
.v-ac{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.v-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;margin:0;padding:0 12px;border:0;border-radius:0;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .15s,transform .12s}
.v-btn:hover{background:rgba(255,255,255,.28)}.v-btn:active{transform:scale(.96)}
.v-btn.pri{background:#e6eaff;color:#141a2e}.v-btn.pri:hover{background:#fff}
.v-btn.ghost{background:rgba(255,255,255,.05)}
.v-btn:disabled{opacity:.4;cursor:default;pointer-events:none}
#svmodal .v-btn:focus-visible{outline:0;background:rgba(255,255,255,.3)}
#svmodal .v-btn.pri:focus-visible{background:#dfe5ff}
.v-cf{display:flex;flex-direction:column;gap:8px;padding:12px 0}
.v-cf h3{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.v-cf p{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.85);overflow-wrap:anywhere}
.v-cfa{justify-content:flex-start;margin-top:10px}
.v-msg{min-height:16px;margin:0 20px 18px;font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.v-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:42;transform:translateX(-50%) translateY(8px);max-width:min(560px,92vw);box-sizing:border-box;padding:10px 16px;background:rgba(10,18,38,.88);border:1px solid rgba(255,255,255,.5);color:#fff;
  font:600 12px/1.4 "Bahnschrift","Segoe UI",system-ui,sans-serif;letter-spacing:.05em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.v-toast.on{opacity:1;transform:translateX(-50%)}
@media (max-width:560px){
  .v-ph,.v-msg{margin-left:16px;margin-right:16px}.v-body{padding:4px 16px 8px}
  .v-main{flex-direction:column;align-items:stretch;gap:10px}.v-ac{justify-content:flex-start}.v-au{justify-content:space-between}
}