/* Copiado de painel-ve/index.html por montar.py – não editar aqui; ajustes do site vão em site.css. */
/* Layout: menu lateral claro (mesma identidade do Painel de Viabilidades) + área de trabalho com faixa de resultado ao vivo no topo.
   Cada seção do estudo leva o número da seção correspondente da planilha VE (§1 Vendas, §2 Outras despesas…). */
:root{
  --bg:#F3F4F6; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EEF0F3; --line:#E1E4EA; --line-2:#CDD2DA;
  --ink:#17202E; --muted:#5B6575; --faint:#8A93A1;
  --accent:#B3121A; --accent-ink:#FFFFFF; --accent-soft:rgba(179,18,26,.07); --accent-line:rgba(179,18,26,.28);
  --navy:#2C4A74; --navy-soft:rgba(44,74,116,.08);
  --fx:#0B7480; --fx-soft:rgba(11,116,128,.08);
  --ok:#1C7F55; --ok-soft:rgba(28,127,85,.10); --warn:#A86A06; --warn-soft:rgba(183,116,12,.12); --bad:#C0302B; --bad-soft:rgba(192,48,43,.09);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s-neutro:#A3AAB5;
  --shadow:0 1px 2px rgba(23,32,46,.05),0 4px 16px rgba(23,32,46,.06);
  --r:10px; --r-sm:7px;
  --f-ui:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --rail:238px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0E131A; --surface:#151C25; --surface-2:#1A222D; --surface-3:#212B38; --line:#283342; --line-2:#36435A;
  --ink:#E6EBF1; --muted:#A1ACBB; --faint:#768397;
  --accent:#E5484F; --accent-ink:#FFFFFF; --accent-soft:rgba(229,72,79,.12); --accent-line:rgba(229,72,79,.4);
  --navy:#86A8DA; --navy-soft:rgba(134,168,218,.12);
  --fx:#4CC0CB; --fx-soft:rgba(76,192,203,.12);
  --ok:#47B886; --ok-soft:rgba(71,184,134,.14); --warn:#E1A640; --warn-soft:rgba(225,166,64,.14); --bad:#EF6B64; --bad-soft:rgba(239,107,100,.13);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s-neutro:#5D6878;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0E131A; --surface:#151C25; --surface-2:#1A222D; --surface-3:#212B38; --line:#283342; --line-2:#36435A;
  --ink:#E6EBF1; --muted:#A1ACBB; --faint:#768397;
  --accent:#E5484F; --accent-ink:#FFFFFF; --accent-soft:rgba(229,72,79,.12); --accent-line:rgba(229,72,79,.4);
  --navy:#86A8DA; --navy-soft:rgba(134,168,218,.12);
  --fx:#4CC0CB; --fx-soft:rgba(76,192,203,.12);
  --ok:#47B886; --ok-soft:rgba(71,184,134,.14); --warn:#E1A640; --warn-soft:rgba(225,166,64,.14); --bad:#EF6B64; --bad-soft:rgba(239,107,100,.13);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s-neutro:#5D6878;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); color-scheme:dark; }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.tn{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .faint{color:var(--faint)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* ---------- estrutura */
.app{display:flex; min-height:100%}
.rail{width:var(--rail); flex-shrink:0; position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto; background:var(--surface);
  border-right:1px solid var(--line); display:flex; flex-direction:column; padding:20px 12px 16px; z-index:40}
.rail-logo{padding:2px 10px 18px; display:flex; flex-direction:column; gap:6px}
.rail-logo img{height:30px; width:auto; align-self:flex-start}
.rail-logo span{font-size:12px; color:var(--muted); font-weight:500}
:root[data-theme="dark"] .rail-logo img{filter:brightness(0) invert(.92)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rail-logo img{filter:brightness(0) invert(.92)} }
.nav{display:flex; flex-direction:column; gap:1px}
.nav .grupo{font-size:11.5px; font-weight:500; color:var(--faint); padding:14px 10px 6px; letter-spacing:.02em}
.nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:7px 10px; border:0; background:none; border-radius:7px; color:var(--muted); font-weight:500}
.nav button svg{width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.nav button:hover{background:var(--surface-2); color:var(--ink)}
.nav button.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.nav button.sub{padding-left:22px; font-size:13.5px}
.nav button span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav .estudo-nome{padding:4px 10px 2px; font-weight:600; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail-foot{margin-top:auto; padding:14px 10px 0; font-size:12px; color:var(--faint); line-height:1.45; display:flex; flex-direction:column; gap:8px}
.conn{display:inline-flex; align-items:center; gap:7px}
.conn i{width:7px; height:7px; border-radius:50%; background:var(--faint)}
.conn.nuvem i{background:var(--ok)} .conn.local i{background:var(--warn)}
.tema{display:flex; gap:4px}
.tema button{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:3px 8px; font-size:12px; color:var(--muted)}
.tema button.on{background:var(--ink); color:var(--surface); border-color:var(--ink)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top-row{display:flex; align-items:center; gap:14px; padding:14px 28px 12px; flex-wrap:wrap}
.top h1{font-size:21px; font-weight:600; letter-spacing:-.015em; margin:0; text-wrap:balance}
.top .eyebrow{font-size:12.5px; color:var(--muted); font-weight:500; margin:0 0 1px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.top .acoes{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn.menu-btn{display:none}
.view{padding:22px 28px 70px; display:flex; flex-direction:column; gap:16px; max-width:1440px; width:100%}

/* faixa de resultado ao vivo */
.faixa{display:flex; gap:0; padding:0 28px 12px; flex-wrap:wrap; align-items:stretch}
.faixa .k{padding:2px 18px 2px 0; margin-right:18px; border-right:1px solid var(--line); min-width:0}
.faixa .k:last-of-type{border-right:0}
.faixa .k small{display:block; font-size:11.5px; color:var(--muted); font-weight:500}
.faixa .k b{font-size:17px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap}
.faixa .k.mg b{color:var(--accent)}
.conds{display:flex; gap:4px; flex-wrap:wrap; padding:0 28px 10px; align-items:center}
.conds button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:500; color:var(--muted)}
.conds button.on{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.conds span{font-size:12px; color:var(--faint); margin-right:4px}

/* ---------- botões, pílulas */
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r-sm); padding:7px 12px; font-weight:500; font-size:13.5px; white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.btn.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.pri:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--surface-3); color:var(--ink)}
.btn.sm{padding:4px 9px; font-size:12.5px}
.btn.perigo{color:var(--bad)}
.btn:disabled{opacity:.5; cursor:default}
.ib{border:0; background:none; color:var(--faint); padding:4px; border-radius:6px; display:inline-flex}
.ib:hover{background:var(--surface-3); color:var(--bad)}
.ib svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round}
.add{border:1px dashed var(--line-2); background:transparent; color:var(--muted); border-radius:var(--r-sm); padding:6px 11px; font-size:12.5px; font-weight:500}
.add:hover{border-color:var(--navy); color:var(--navy); background:var(--navy-soft)}
.pill{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 9px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--surface-3); color:var(--muted)}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)} .pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.navy{background:var(--navy-soft); color:var(--navy)} .pill.acc{background:var(--accent-soft); color:var(--accent)}
.save{font-size:12.5px; color:var(--muted); display:inline-flex; gap:6px; align-items:center}
.save i{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.save.sujo i{background:var(--warn)} .save.erro i{background:var(--bad)}

/* ---------- cartões e seções */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; min-width:0}
.card-h{display:flex; align-items:baseline; gap:10px; margin:0 0 14px; flex-wrap:wrap}
.card-h h2{font-size:15px; font-weight:600; margin:0; letter-spacing:-.005em}
.card-h .sec{font-family:var(--f-mono); font-size:11.5px; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:0 5px}
.card-h .sub{font-size:12.5px; color:var(--faint)}
.card-h .dir{margin-left:auto; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.card-h .tot{font-weight:600; font-variant-numeric:tabular-nums}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:1100px){ .grid3{grid-template-columns:1fr 1fr} }
@media (max-width:1180px){ .grid2{grid-template-columns:1fr} }
@media (max-width:860px){ .grid3{grid-template-columns:1fr} }
.nota{font-size:12.5px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px}
.nota.warn{background:var(--warn-soft); border-color:transparent; color:var(--ink)}
.nota.bad{background:var(--bad-soft); border-color:transparent; color:var(--ink)}
.nota.navy{background:var(--navy-soft); border-color:transparent; color:var(--ink)}

/* formulário de premissas */
.form{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px 16px}
.campo{display:flex; flex-direction:column; gap:4px; min-width:0}
.campo > label, .campo > .lab{font-size:12px; color:var(--muted); font-weight:500}
.campo .dica{font-size:11.5px; color:var(--faint)}
.campo.largo{grid-column:1/-1}
.in{width:100%; border:1px solid var(--line-2); background:var(--surface); border-radius:6px; padding:6px 9px; font-size:13.5px; min-width:0}
.in:hover{border-color:var(--faint)}
.in:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-soft)}
textarea.in{resize:vertical; min-height:70px; line-height:1.45}
select.in{padding-right:4px}
.fld{position:relative; display:block; min-width:0}
.in.num{text-align:right; font-variant-numeric:tabular-nums}
.fld.is-fx .in.num{padding-left:26px; color:var(--fx); background:var(--fx-soft); border-color:color-mix(in srgb,var(--fx) 35%,var(--line-2))}
.fld.is-fx .in.num:focus{font-family:var(--f-mono); font-size:12.5px; text-align:left; color:var(--ink); background:var(--surface)}
.fld .fx{position:absolute; left:7px; top:50%; transform:translateY(-50%); font-style:italic; font-family:var(--f-mono); font-size:11px; color:var(--fx); pointer-events:none; font-weight:500}
.in.inval,.fld.err .in{border-color:var(--bad)!important; box-shadow:0 0 0 3px var(--bad-soft)}
.tog{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer; user-select:none; min-height:32px}
.tog input{appearance:none; width:32px; height:18px; border-radius:999px; background:var(--line-2); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; margin:0}
.tog input::after{content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tog input:checked{background:var(--accent)} .tog input:checked::after{transform:translateX(14px)}
.chk{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}

/* tabelas de edição */
.tw{overflow-x:auto; margin:0 -4px; padding:0 4px}
table.t{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px}
.t th{font-size:11.5px; font-weight:500; color:var(--muted); text-align:left; padding:0 8px 8px; white-space:nowrap; border-bottom:1px solid var(--line)}
.t th.n,.t td.n{text-align:right}
.t td{padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t td.calc{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:var(--ink)}
.t td.calc.fraco{color:var(--muted)}
.t td.acoes{width:1%; white-space:nowrap; text-align:right}
.t .in{padding:5px 8px}
.t td.w-nome{min-width:210px}
.t td.w-num{width:120px; min-width:104px}
.t td.w-num-s{width:92px; min-width:84px}
.t td.w-sel{width:172px; min-width:150px}
.t tr.grp td{background:var(--surface-2); padding:7px 8px; font-size:12px; font-weight:600; color:var(--muted); border-bottom:1px solid var(--line)}
.t tr.grp .in{font-weight:600; background:transparent; border-color:transparent; padding:3px 6px; max-width:320px}
.t tr.grp .in:hover,.t tr.grp .in:focus{border-color:var(--line-2); background:var(--surface)}
.t tfoot td{border-top:1px solid var(--line-2); border-bottom:0; font-weight:600; padding-top:9px; font-variant-numeric:tabular-nums}
.t tr.ajuste td{background:var(--warn-soft)}
.t .nt{display:block; font-size:11px; color:var(--faint); margin-top:2px}
.t .sub-in{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:6px}
.t .sub-in .campo > .lab{font-size:11px}
.rodape-lista{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center}

/* ---------- lista de estudos */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.kpi small{display:block; font-size:12px; color:var(--muted); font-weight:500; margin-bottom:3px}
.kpi b{font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpi .sub{font-size:12px; color:var(--faint); margin-top:2px}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.busca{position:relative; flex:1; min-width:200px; max-width:360px}
.busca svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--faint); fill:none; stroke-width:2}
.busca .in{padding-left:31px}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; gap:2px; flex-wrap:wrap}
.seg button{border:0; background:none; border-radius:5px; padding:4px 10px; font-size:12.5px; font-weight:500; color:var(--muted)}
.seg button.on{background:var(--ink); color:var(--surface)}
.lista .t td{padding:11px 10px; cursor:pointer}
.lista .t td.n{white-space:nowrap}
.lista .t th{padding:0 10px 9px}
.lista .t tbody tr:hover td{background:var(--surface-2)}
.lista .nome b{display:block; font-weight:600}
.lista .nome span{font-size:12.5px; color:var(--muted)}
.mbar{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.mbar .b{width:70px; height:6px; border-radius:6px; background:var(--surface-3); position:relative; overflow:hidden; flex-shrink:0}
.mbar .b i{position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--navy)}
.mbar.neg .b i{background:var(--bad)}
.vazio{text-align:center; padding:48px 20px; display:flex; flex-direction:column; align-items:center; gap:12px}
.vazio h2{font-size:17px; margin:0}
.vazio p{margin:0; color:var(--muted); max-width:52ch}

/* ---------- resumo */
.hero{display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:12px}
@media (max-width:1000px){ .hero{grid-template-columns:1fr 1fr} }
.hero .kpi.big{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.hero .kpi.big small{color:color-mix(in srgb,var(--surface) 72%,transparent)}
.hero .kpi.big b{font-size:32px}
.hero .kpi.big .sub{color:color-mix(in srgb,var(--surface) 72%,transparent)}
.stack{display:flex; height:30px; border-radius:6px; overflow:hidden; gap:2px; background:var(--surface)}
.stack i{display:block; height:100%; min-width:2px}
.leg{display:grid; grid-template-columns:auto 1fr auto auto; gap:6px 14px; margin-top:14px; font-size:13px; align-items:center}
.leg .sw{width:11px; height:11px; border-radius:3px}
.leg .v{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.leg .p{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; min-width:58px}
.leg .tot{font-weight:600; border-top:1px solid var(--line); padding-top:6px}
.cen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.cen > div{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; display:flex; flex-direction:column; gap:3px}
.cen > div.esp{border-color:var(--accent-line); background:var(--accent-soft)}
.cen h3{margin:0; font-size:12.5px; font-weight:600; color:var(--muted)}
.cen b{font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.cen .l{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.heat td.c{text-align:center; font-variant-numeric:tabular-nums; font-size:13px; border-radius:5px; padding:7px 6px; border:2px solid var(--surface)}
.heat td.c.base{outline:2px solid var(--ink); outline-offset:-3px; font-weight:600}
.heat th{text-align:center}
.det summary{cursor:pointer; list-style:none}
.det summary::-webkit-details-marker{display:none}
.det summary .car{display:inline-block; transition:transform .15s; color:var(--faint); margin-right:4px}
.det[open] summary .car{transform:rotate(90deg)}

/* ---------- revisões */
.timeline{display:flex; flex-direction:column; gap:10px}
.rev{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; align-items:start}
.rev .num{font-family:var(--f-mono); font-size:13px; font-weight:500; background:var(--surface-3); border-radius:6px; padding:3px 8px; white-space:nowrap}
.rev .desc{white-space:pre-wrap; font-size:13px; color:var(--ink); grid-column:2}
.rev .meta{font-size:12px; color:var(--muted)}
.rev .acoes{display:flex; gap:6px; grid-row:1/3; grid-column:3}
.delta.up{color:var(--ok)} .delta.down{color:var(--bad)}

/* ---------- modal e aviso */
.modal{position:fixed; inset:0; z-index:100; background:rgba(14,19,26,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px 16px; overflow-y:auto}
.dlg{background:var(--surface); border-radius:12px; box-shadow:var(--shadow); width:min(720px,100%); padding:22px 24px; display:flex; flex-direction:column; gap:14px; border:1px solid var(--line)}
.dlg h2{margin:0; font-size:18px; letter-spacing:-.01em}
.dlg .pe{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:4px}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:120; background:var(--ink); color:var(--surface);
  border-radius:9px; padding:10px 14px; font-size:13.5px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow); max-width:calc(100% - 32px)}
.toast button{background:none; border:0; color:inherit; font-weight:600; text-decoration:underline; padding:0}
.banner{margin:0 28px 12px; padding:9px 12px; border-radius:var(--r-sm); background:var(--warn-soft); font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.carregando{padding:60px 0; text-align:center; color:var(--muted)}
.vars{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; font-size:13px}
.vars code{font-family:var(--f-mono); font-size:12.5px; color:var(--fx)}
.guia{max-width:78ch; display:flex; flex-direction:column; gap:10px; font-size:14px}
.guia h3{margin:8px 0 0; font-size:14.5px}
.guia p,.guia ul{margin:0} .guia li{margin:3px 0}

/* ---------- celular */
@media (max-width:900px){
  .rail{position:fixed; left:0; top:0; bottom:0; transform:translateX(-102%); transition:transform .2s; box-shadow:var(--shadow); padding-top:calc(20px + env(safe-area-inset-top,0px))}
  .app.menu-aberto .rail{transform:none}
  .btn.menu-btn{display:inline-flex}
  .top-row{padding:12px 16px 10px} .faixa,.conds{padding-left:16px; padding-right:16px}
  .faixa .k{padding-right:12px; margin-right:12px; margin-bottom:4px}
  .view{padding:16px 16px 60px}
  .banner{margin:0 16px 10px}
  .cen{grid-template-columns:1fr}
  .leg{grid-template-columns:auto 1fr auto}
  .leg .p{display:none}
}