:root{
  --bg:#F3F4F6; --card:#FFFFFF; --ink:#14161B; --ink2:#2B303A; --muted:#5B6270; --line:#E2E5EA; --line2:#C9CED6;
  --dark:#111318; --dark2:#23262E; --dark3:#2A2E37; --side-muted:#B9BFCA;
  --blue:#0058F9; --blue-d:#0046C7; --blue-bg:#E6EEFF; --blue-fg:#0045C2;
  --green:#1E8A4C; --green-bg:#E3F4E8; --green-fg:#17643A;
  --amber:#9A6A00; --amber-bg:#FFF1CC; --amber-fg:#6E4900;
  --red-bg:#FCE4E1; --red-fg:#A12317; --red-bd:#F2B8B1;
  --orange-bg:#FFE7D6; --orange-fg:#8E3D0C;
  --neutral-bg:#ECEEF2; --neutral-fg:#454C5A;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--blue)} a:hover{color:var(--blue-d)}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hide{display:none!important}
h1,h2,h3{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- carregando ---------- */
.splash{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--muted)}
.logo{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;letter-spacing:-.5px;flex:0 0 auto}
.splash .logo{background:var(--dark);color:#fff;width:52px;height:52px;font-size:20px}
.spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--dark)}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-brand{display:flex;justify-content:center;margin:2px 0 22px}
.login-brand img{width:230px;height:auto;display:block}
.login-brand .logo{background:var(--dark);color:#fff}
.login-brand b{display:block;font-size:17px}
.login-brand span{font-size:13px;color:var(--muted)}
.login h1{font-size:21px;margin-bottom:4px}
.login .sub{color:var(--muted);margin-bottom:18px}
.login form{display:flex;flex-direction:column;gap:14px}
.linkbtn{border:0;background:transparent;color:var(--blue);font-weight:600;padding:6px 0;text-align:left}
.login-foot{margin-top:16px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.aviso{border-radius:10px;padding:10px 12px;font-size:13px}
.aviso.erro{background:var(--red-bg);color:#8A1D13;border:1px solid var(--red-bd)}
.aviso.ok{background:var(--green-bg);color:var(--green-fg)}
.aviso.info{background:var(--blue-bg);color:var(--blue-fg)}

/* ---------- campos e botões ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.field small{font-weight:400;color:var(--muted);font-size:12px}
.input{width:100%;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;min-height:44px;background:#fff;font-weight:400;font-size:14px}
textarea.input{min-height:64px;resize:vertical}
.input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(0,88,249,.16)}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.check{display:flex;align-items:flex-start;gap:10px;font-weight:500;min-height:40px;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--blue)}
.btn{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:10px;padding:10px 16px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{background:#F7F8FA}
.btn.pri{border:0;background:var(--blue);color:#fff}
.btn.pri:hover{background:var(--blue-d)}
.btn.ok{border:0;background:var(--green);color:#fff}
.btn.ok:hover{background:#17703D}
.btn.perigo{border-color:var(--red-bd);color:var(--red-fg)}
.btn.perigo:hover{background:var(--red-bg)}
.btn.sm{min-height:36px;padding:7px 12px;font-size:13px}
.btn.full{width:100%}
.icone{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.pill{border:1px solid var(--line2);background:#fff;color:var(--ink2);border-radius:999px;padding:7px 13px;font-weight:500;min-height:38px}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.opc{border:1px solid var(--line2);background:#fff;color:var(--ink2);border-radius:10px;padding:10px 12px;text-align:left;min-height:44px;line-height:1.3}
.opc b{display:block}
.opc span{display:block;font-size:12px;opacity:.8}
.opc.on{background:var(--ink);border-color:var(--ink);color:#fff}
.opcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;border-radius:6px;padding:3px 8px;background:var(--neutral-bg);color:var(--neutral-fg);white-space:nowrap}
.t-verde{background:var(--green-bg);color:var(--green-fg)} .t-ambar{background:var(--amber-bg);color:var(--amber-fg)}
.t-vermelho{background:var(--red-bg);color:var(--red-fg)} .t-laranja{background:var(--orange-bg);color:var(--orange-fg)}
.t-azul{background:var(--blue-bg);color:var(--blue-fg)} .t-escuro{background:var(--ink);color:#fff}

/* ---------- estrutura com menu lateral ---------- */
.app{display:flex;min-height:100vh}
.side{width:252px;flex:0 0 252px;background:var(--dark);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{display:block;padding:22px 20px 16px}
.side-brand img{width:212px;max-width:100%;height:auto;display:block}
.side nav{display:flex;flex-direction:column;gap:2px;padding:4px 10px}
.side-sec{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8C93A0}
.side-sec button{border:0;background:transparent;color:var(--side-muted);width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.side-sec button:hover{background:var(--dark3);color:#fff}
.nav-a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#D3D7DE;text-decoration:none;font-weight:500;min-height:40px}
.nav-a:hover{background:var(--dark2);color:#fff}
.nav-a.on{background:var(--dark3);color:#fff}
.nav-a svg{flex:0 0 auto;opacity:.85}
.nav-a .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-a .cont{font-size:12px;font-weight:600;background:var(--dark3);color:#D3D7DE;border-radius:999px;padding:1px 8px}
.nav-a.on .cont{background:#3A3F4B}
.nav-a .ponto{width:8px;height:8px;border-radius:50%;background:#FF7A6B;flex:0 0 auto}
.side-vazio{padding:4px 20px;font-size:13px;color:#8C93A0}
.side-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--dark3);display:flex;flex-direction:column;gap:8px}
.side-user b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user span{font-size:12px;color:var(--side-muted)}
.side-foot .acoes{display:flex;gap:6px}
.side-foot .acoes button{flex:1;border:1px solid var(--dark3);background:transparent;color:#D3D7DE;border-radius:8px;padding:7px 8px;font-size:12px;font-weight:600}
.side-foot .acoes button:hover{background:var(--dark2);color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:none;align-items:center;gap:10px;background:var(--dark);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:30}
.topbar .icone{background:transparent;border-color:var(--dark3);color:#fff}
.topbar b{font-size:15px}
.veu{display:none}
@media (max-width:900px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:70;transform:translateX(-102%);transition:transform .2s ease;box-shadow:12px 0 40px rgba(0,0,0,.3)}
  .app.menu .side{transform:none}
  .app.menu .veu{display:block;position:fixed;inset:0;background:rgba(17,19,24,.45);z-index:65;border:0}
  .topbar{display:flex}
}

/* ---------- páginas ---------- */
.page{width:100%;max-width:1480px;margin:0 auto;padding:24px}
@media (max-width:600px){.page{padding:16px}}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.page-head h1{font-size:25px;letter-spacing:-.4px}
.page-head p{margin:4px 0 0;color:var(--muted)}
.page-head .acoes{display:flex;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .l{font-size:12px;color:var(--muted);font-weight:500}
.kpi .v{font-size:26px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted)}
.kpi.vermelho .v{color:var(--red-fg)} .kpi.ambar .v{color:var(--amber-fg)} .kpi.laranja .v{color:var(--orange-fg)} .kpi.verde .v{color:var(--green-fg)}
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.busca{margin-left:auto;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D5D9E0;border-radius:10px;padding:0 12px;min-height:40px;flex:0 1 340px;min-width:220px}
.busca input{border:0;background:transparent;flex:1;min-width:0;padding:9px 0;outline:none}
.busca:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,88,249,.16)}
.dica{font-size:12px;color:var(--muted);margin-top:6px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:10px 12px 11px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--ink);border-bottom-color:var(--blue)}
.vazio{border:1px dashed var(--line2);border-radius:var(--r);padding:22px 18px;text-align:center;color:var(--muted)}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.box-pad{padding:16px 18px}

/* ---------- esteira ---------- */
.board-wrap{overflow-x:auto;padding-bottom:8px}
.board{display:grid;grid-template-columns:repeat(4,minmax(260px,1fr));gap:14px;min-width:1080px}
.col{background:#EBEDF1;border:2px dashed transparent;border-radius:14px;padding:12px;min-height:520px;display:flex;flex-direction:column;gap:10px}
.col.over{background:var(--blue-bg);border-color:var(--blue)}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 0}
.col-head div{display:flex;align-items:center;gap:8px}
.col-head i{width:9px;height:9px;border-radius:50%}
.col-head h2{font-size:15px;font-weight:600}
.col-head .n{font-size:12px;font-weight:600;background:#fff;border-radius:999px;padding:1px 8px;color:var(--neutral-fg)}
.col-dica{font-size:12px;color:var(--muted);padding:0 4px 2px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(17,19,24,.06)}
.card[draggable=true]{cursor:grab}
.card.arrastando{opacity:.45}
.card>button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:12px 14px;border-radius:12px}
.card>button:hover{background:#FAFBFC}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .pc{font-size:12px;font-weight:600;color:var(--neutral-fg)}
.card .prod{font-weight:600;font-size:15px;margin-top:6px}
.card .forn{color:var(--muted);font-size:13px}
.card .info{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:13px}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ---------- tabelas ---------- */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 14px;background:#F7F8FA;border-bottom:1px solid var(--line)}
.tabela td{padding:12px 14px;border-bottom:1px solid #EEF0F3;vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela-wrap{overflow-x:auto}
.inativo{opacity:.55}

/* ---------- grade (linhas) ---------- */
.grade{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13px}
.grade .gl{display:grid;gap:8px;padding:8px 12px;border-top:1px solid #EEF0F3;align-items:center;font-variant-numeric:tabular-nums}
.grade .gl:first-child{border-top:0;background:#F7F8FA;font-size:12px;font-weight:600;color:var(--muted)}
.grade .gl.tot{background:#F7F8FA;font-weight:700;border-top:1px solid var(--line)}
.grade .r{text-align:right}
.g5{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) minmax(0,.8fr)}
.g3{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr)}
.g4{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr)}
.grade input{width:100%;border:1px solid var(--line2);border-radius:8px;padding:8px;text-align:right;min-height:40px;font-variant-numeric:tabular-nums}
.matriz-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);padding:10px}
.matriz{display:grid;gap:6px;align-items:center}
.matriz .h{font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.matriz .c{font-weight:600;font-size:13px}
.matriz input{width:100%;border:1px solid var(--line2);border-radius:8px;padding:8px 4px;text-align:center;min-height:40px;font-variant-numeric:tabular-nums}
.matriz .t{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- gaveta (detalhe do pedido) ---------- */
.gaveta{position:fixed;inset:0;z-index:40;display:flex;justify-content:flex-end}
.gaveta .fundo{position:absolute;inset:0;border:0;background:rgba(17,19,24,.42);cursor:default}
.gaveta aside{position:relative;width:100%;max-width:600px;height:100%;background:#fff;overflow-y:auto;box-shadow:-12px 0 40px rgba(17,19,24,.18);display:flex;flex-direction:column}
.g-head{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g-head .icone{margin-left:auto}
.g-body{padding:18px 20px 24px;display:flex;flex-direction:column;gap:22px;flex:1 1 auto}
.g-body h2{font-size:22px;letter-spacing:-.3px}
.g-body h3{font-size:14px;font-weight:600;margin-bottom:8px}
.g-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.g-foot .msg{font-size:13px;color:var(--muted);flex:1 1 200px}
.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.passo{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.passo i{width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-style:normal}
.passo b{font-size:12px;color:var(--muted)}
.passo span{font-size:12px;color:var(--muted)}
.passo.feito i{background:var(--green);border-color:var(--green);color:#fff}
.passo.atual i{color:#fff}
.passo.feito b,.passo.atual b{color:var(--ink)}
.infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;background:#F7F8FA;border-radius:var(--r);padding:14px 16px}
.infos .l{font-size:12px;color:var(--muted)}
.infos .v{font-weight:600}
.infos .w{grid-column:1/-1}
.mud{display:flex;justify-content:space-between;gap:12px;background:#FFF8E6;border:1px solid #F3DFA8;border-radius:10px;padding:10px 12px;margin-bottom:6px;font-size:13px}
.mud span:last-child{color:var(--amber-fg);white-space:nowrap}
.bloco{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.coment{background:#F7F8FA;border-radius:10px;padding:10px 12px;font-size:13px}
.coment .q{display:flex;justify-content:space-between;gap:8px}
.coment p{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}
.coment-novo{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.hist div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px solid #EEF0F3;font-size:13px}
.hist div:first-child{border-top:0}

/* ---------- janela (modal) ---------- */
.janela{position:fixed;inset:0;z-index:60;background:rgba(17,19,24,.5);display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.janela>div{background:#fff;border-radius:16px;width:100%;max-width:620px;box-shadow:0 24px 60px rgba(17,19,24,.25)}
.janela.larga>div{max-width:800px}
.janela.estreita>div{max-width:460px}
.j-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.j-head div{flex:1}
.j-head h2{font-size:19px}
.j-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.j-body{padding:18px 20px;display:flex;flex-direction:column;gap:18px}
.j-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.lbl{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink2)}
.resumo{background:#F7F8FA;border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.colar{background:#F2F5FD;border:1px solid #D6DFF7;border-radius:var(--r);padding:12px 14px}
.colar summary{font-weight:600;cursor:pointer}
.senha-box{background:#F7F8FA;border:1px dashed var(--line2);border-radius:var(--r);padding:16px;text-align:center}
.senha-box .mono{font-size:24px;font-weight:600;letter-spacing:1px;margin:6px 0}

/* ---------- portal do fornecedor ---------- */
.portal{max-width:560px;margin:0 auto;min-height:100vh;background:#F7F8FA;display:flex;flex-direction:column}
.p-head{background:var(--dark);color:#fff;padding:18px 16px 16px}
.p-head .lin{display:flex;align-items:center;gap:10px}
.p-head .lin .txt{flex:1;min-width:0;line-height:1.25}
.p-head small{font-size:12px;color:var(--side-muted)}
.p-head b{display:block;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-head .icone{background:transparent;border-color:var(--dark3);color:#fff;width:auto;padding:0 12px;font-size:13px;font-weight:600;gap:6px}
.p-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.p-tiles div{background:var(--dark2);border-radius:12px;padding:10px 12px}
.p-tiles b{font-size:22px}
.p-tiles span{font-size:12px;color:var(--side-muted)}
.p-tiles .alerta b{color:#FF9B8F}
.p-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line);background:#fff;overflow-x:auto;position:sticky;top:0;z-index:5}
.p-tabs a{padding:10px 10px 11px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap;min-height:44px}
.p-tabs a.on{color:var(--ink);border-bottom-color:var(--blue)}
.p-tabs a span{font-weight:500;opacity:.75}
.p-lista{padding:14px;display:flex;flex-direction:column;gap:12px;flex:1}
.p-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.p-card .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.p-card .prod{font-weight:600;font-size:17px}
.p-card .gr{background:#F7F8FA;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.p-card .acoes{display:flex;gap:8px}
.p-card .acoes .btn{min-height:48px;border-radius:12px}
.p-card .acoes .btn.pri{flex:1}
.p-rodape{padding:10px 16px 24px;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- aviso flutuante ---------- */
.toast{pointer-events:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font-weight:500;box-shadow:0 12px 30px rgba(17,19,24,.3);max-width:calc(100% - 32px)}
.toast.erro{background:#8A1D13}
@media (max-width:600px){
  .toast{bottom:auto;top:12px}
  .busca{flex:1 1 100%;margin-left:0}
  .page-head h1{font-size:22px}
}

/* ---------- marca ---------- */
.splash img{width:120px;height:auto}
.topbar-logo{display:flex;align-items:center}
.topbar-logo img{height:24px;width:auto;display:block}
.p-logo{height:24px;width:auto;display:block}
.p-head .lin{justify-content:space-between}
.p-quem{margin-top:14px;line-height:1.25}
.p-quem small{font-size:12px;color:var(--side-muted)}
.p-quem b{display:block;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login{background:var(--dark);background-image:radial-gradient(circle at 50% -10%,rgba(0,88,249,.28),transparent 55%)}