/* Mano a Mano — UI de campo.
   Oscuro por batería y legibilidad nocturna, contraste alto para sol directo,
   objetivos táctiles grandes para manos con guantes.
   Solo tipografías del sistema: sin conexión no se descargan webfonts. */

:root{
  --bg:#0E1116;
  --surface:#161C25;
  --surface-2:#1E2632;
  --line:#2C3644;
  --text:#E6ECF3;
  --muted:#8896A6;
  --accent:#FF6B1F;
  --accent-ink:#140A03;

  --s-no_evaluado:#6B7A8C;
  --s-en_proceso:#F2B01E;
  --s-terminado:#22C07D;
  --s-buscada:#F2B01E;
  --s-localizada_viva:#22C07D;
  --s-a_salvo:#22C07D;
  --s-hospitalizada:#3E9BFF;
  --s-fallecida:#E5484D;
  --danger:#E5484D;

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --tabh:60px;
  --toph:52px;
}

*{box-sizing:border-box}
/* El navegador oculta [hidden] con `display:none`, pero cualquier clase que
   defina display —como .btn{display:inline-flex}— le gana por especificidad y
   el elemento sigue visible. Sin este !important, ocultar un botón no funciona. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.45 var(--sans);
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}

/* ───── barra superior ───── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:600;
  height:calc(var(--toph) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.mark{
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  flex:none;
}
.brandname{font:700 13px/1 var(--mono);letter-spacing:.1em;white-space:nowrap}
/* En pantallas angostas la marca cede el espacio a los chips de estado. */
@media (max-width:430px){ .brandname{display:none} }
.status{display:flex;gap:6px;flex:none}
.chip{
  font:600 11px/1 var(--mono);letter-spacing:.02em;
  padding:6px 8px;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  white-space:nowrap;
}
.chip.ok{color:#22C07D;border-color:#1E4D3A}
.chip.warn{color:#F2B01E;border-color:#4D3E13}
.chip.bad{color:#E5484D;border-color:#4D1F21}

/* ───── vistas ───── */
main{
  position:fixed;
  top:calc(var(--toph) + env(safe-area-inset-top));
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
  left:0;right:0;
}
.view{display:none;position:relative;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
#view-mapa{overflow:hidden}
.view.is-active{display:block}
.pad{padding:14px 14px 28px}

/* ───── mapa ───── */
#map{position:absolute;inset:0;background:#10151C}
.leaflet-container{background:#10151C;font-family:var(--sans)}
.leaflet-control-attribution{
  background:rgba(14,17,22,.82)!important;color:var(--muted)!important;font-size:10px!important;
}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-bar a{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line)!important}

.maphud{
  position:absolute;left:0;right:0;bottom:0;z-index:500;
  padding:10px 12px 12px;
  background:linear-gradient(to top,rgba(14,17,22,.94) 55%,transparent);
  pointer-events:none;
}
.maphud > *{pointer-events:auto}
.legend{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;
  font:600 11px/1 var(--mono);color:var(--muted);
}
.legend span{display:flex;align-items:center;gap:5px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--muted)}
.dot.s-no_evaluado{background:var(--s-no_evaluado)}
.dot.s-en_proceso{background:var(--s-en_proceso)}
.dot.s-terminado{background:var(--s-terminado)}
.dot.s-ayuda{background:#3E9BFF}
/* Botones flotantes del mapa: patrón universal, no compiten con los botones de
   acción y no exigen tener cuenta. El de ayuda va encima del de ubicación. */
.btn-flota{
  position:absolute;right:12px;z-index:550;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}
.btn-flota svg{
  width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.btn-ubicar{bottom:calc(var(--hud, 96px) + 12px)}
.btn-ayuda{bottom:calc(var(--hud, 96px) + 72px)}
.btn-ubicar.buscando{color:var(--accent);border-color:var(--accent)}
.btn-ubicar.activo{color:#3E9BFF;border-color:#3E9BFF}

/* Los botones envuelven en vez de comprimirse: cuatro en una fila de 390 px
   dejan el texto ilegible, que es peor que ocupar dos renglones. */
.mapbtns{display:flex;gap:8px;flex-wrap:wrap}
/* La caja crece con la etiqueta. Con `min-height` sola y altura fija, un texto
   de dos líneas —"Reportar edificación afectada"— se salía del botón. */
.mapbtns .btn{
  flex:1 1 46%;min-width:140px;
  height:auto;min-height:48px;padding:8px 12px;
  white-space:normal;text-align:center;line-height:1.2;
}

/* ───── marcadores del mapa ─────
   Cada cosa se distingue por forma además de por color: círculo = ayuda,
   cuadrado = sitio de búsqueda, cuadrado recortado = edificación, gota =
   persona. Así se leen con sol directo y sin depender del color. */
.marca{
  width:32px;height:32px;
  display:grid;place-items:center;
  background:var(--marca,#3E9BFF);
  border:2px solid #0E1116;
  color:#0E1116;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.marca svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.marca-ayuda{border-radius:50%}
/* Punto propuesto y aún sin aprobar: borde punteado, para que ni la brigada ni
   quien lo propuso lo lea como un sitio ya confirmado. */
.marca-pend{border-style:dashed;border-width:3px}
.marca-sitio{
  border-radius:7px;
  font:700 12px/1 var(--mono);
}
.marca-edificio{border-radius:7px 7px 7px 0}
.marca-persona{border-radius:50% 50% 50% 4px;transform:rotate(-45deg)}
.marca-persona svg{transform:rotate(45deg)}

/* Los mismos glifos, en pequeño, dentro de la leyenda. */
.ley{display:flex;align-items:center;gap:6px}
.ley .marca{
  width:18px;height:18px;border-width:1px;box-shadow:none;flex:none;
}
.ley .marca svg{width:11px;height:11px;stroke-width:2.4}
.ley .marca-persona{transform:none}
.ley .marca-persona svg{transform:none}
.mepulse{
  width:16px;height:16px;border-radius:50%;background:#3E9BFF;
  border:2px solid #fff;box-shadow:0 0 0 6px rgba(62,155,255,.22);
}

/* ───── botones ───── */
.btn{
  min-height:48px;padding:0 16px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* Enlace a Google Maps: es un ancla, no un botón, para que el navegador la
   abra en otra pestaña y se pueda copiar o compartir. */
.btn-mapa{flex:1;text-decoration:none;color:#3E9BFF;border-color:#2B4E75}
.btn-mapa svg{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;
}
.btn-danger{background:transparent;border-color:#4D1F21;color:var(--danger)}
.btn-ghost{background:rgba(22,28,37,.9)}
.btn-sm{min-height:44px;padding:0 14px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.iconbtn{
  width:40px;height:40px;border-radius:9px;flex:none;
  background:var(--surface-2);border:1px solid var(--line);cursor:pointer;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ───── formularios ───── */
.field{display:block;margin:12px 0}
.field > span{
  display:block;margin-bottom:6px;
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:11px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
}
.field textarea{min-height:84px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5C6878}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.searchrow{display:flex;gap:8px;margin-bottom:12px}
.searchrow input{
  flex:1;min-height:48px;padding:0 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
}
.filterrow{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px}
.pill{
  flex:none;min-height:38px;padding:0 12px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font:600 12px/1 var(--sans);
}
.pill.is-on{background:var(--surface-2);color:var(--text);border-color:#43506180}

/* ───── listas ───── */
.list{display:flex;flex-direction:column;gap:8px}
.card{
  position:relative;
  padding:12px 12px 12px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;text-align:left;width:100%;
}
.card::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;
  border-radius:0 3px 3px 0;background:var(--band,var(--muted));
}
.card h3{font-size:16px;margin-bottom:2px}
.card .meta{font:500 12px/1.35 var(--mono);color:var(--muted);margin-top:4px}
.card .tagline{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{
  font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:5px 7px;border-radius:5px;background:var(--surface-2);color:var(--muted);
}
.tag.state{color:#0E1116;background:var(--band,var(--muted))}
.tag.pend{background:transparent;border:1px dashed #43506180;color:var(--muted)}
.tag.danger{background:#4D1F21;color:#FFB5B8}

.tallies{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;
}
.tally{
  flex:1 1 auto;min-width:88px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  border-left:3px solid var(--band,var(--line));
}
.tally b{display:block;font:700 22px/1.1 var(--mono)}
.tally span{font:600 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.empty{padding:36px 12px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--text);margin-bottom:6px}

.h2{margin:26px 0 6px;font-size:15px}
.h2:first-child{margin-top:0}
.muted{color:var(--muted);font-size:13.5px;margin:0 0 6px}
.small{font-size:12px}
.log{font:500 12px/1.5 var(--mono);color:var(--muted);white-space:pre-wrap;margin:8px 0 0}

/* ───── tabs ───── */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:600;
  height:calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--bg);border-top:1px solid var(--line);
}
.tabs button{
  background:none;border:0;cursor:pointer;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.tabs .ti{font-size:17px;line-height:1}
.tabs button.is-on{color:var(--accent)}

/* ───── hoja modal ───── */
.sheet{position:fixed;inset:0;z-index:900}
.sheet-scrim{position:absolute;inset:0;background:rgba(6,8,11,.7)}
.sheet-panel{
  position:absolute;left:0;right:0;bottom:0;max-height:92%;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  animation:rise .18s ease-out;
}
@keyframes rise{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet-panel{animation:none}}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 14px 10px;border-bottom:1px solid var(--line);
}
.sheet-head h2{font-size:16px}
.sheet-body{
  /* `min-height:0` es imprescindible: sin él, un hijo flexible se niega a
     encogerse por debajo de su contenido, la hoja se queda topada en su
     max-height y el final del formulario —los botones— queda cortado y sin
     forma de llegar a él haciendo scroll. */
  flex:1;min-height:0;
  padding:4px 14px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.guia-intro{font-size:14px;line-height:1.5;margin:8px 0 12px}
.guia-item{padding:11px 0;border-top:1px solid var(--line)}
.guia-item b{display:block;color:var(--text);margin-bottom:3px}
.guia-item span{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.guia-actions{margin-top:16px}

/* ───── toast ───── */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 14px);
  z-index:1000;max-width:calc(100% - 28px);
  padding:11px 15px;border-radius:10px;
  background:#E6ECF3;color:#0E1116;font-weight:600;font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* ───── pantalla de acceso ───── */
.gate{
  position:fixed;inset:0;z-index:1200;
  background:var(--bg);overflow:auto;
  padding:calc(env(safe-area-inset-top) + 28px) 18px 40px;
}
.gate-card{max-width:420px;margin:0 auto}
.gate-brand{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.gate-modos{display:flex;gap:6px;margin-bottom:16px}
.gate-modos .pill{flex:1;min-height:44px;justify-content:center;display:flex;align-items:center}
.gate-modos.sub{margin:0 0 4px}
.gate-texto{color:var(--muted);font-size:13.5px;margin:0 0 8px}
.btn-ancho{width:100%;margin-top:6px}
.gate .log.mal{color:var(--danger)}
.gate-serv{margin-top:26px;color:var(--muted)}
.gate-serv summary{
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;padding:8px 0;
}
.gate-serv input{
  width:100%;min-height:44px;padding:10px 12px;margin-top:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
}
.aviso{
  margin:12px 0 0;padding:10px 12px;border-radius:10px;
  background:var(--surface-2);border:1px dashed #4D3E13;
  color:var(--s-en_proceso);font-size:12.5px;
}

/* ───── acciones grandes del ciudadano ───── */
.acciones{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.tarjeton{
  text-align:left;padding:16px;border-radius:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
}
.tarjeton b{display:block;font-size:15.5px;margin-bottom:4px}
.tarjeton span{color:var(--muted);font-size:13px}
.tarjeton:first-child{border-color:var(--accent)}

/* ───── ubicación adjunta en formularios sin mapa ───── */
.ubica{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px;border:1px dashed var(--line);border-radius:10px;margin:12px 0;
}
.ubica-btns{display:flex;gap:8px;flex-wrap:wrap}
.ubica-btns .btn{flex:1;min-width:150px}
.ubica .log{margin:0}

/* Mapita para señalar el punto: el pin va fijo en el centro y lo que se
   guarda es el centro, así se apunta con una sola mano. */
.mini-mapa{height:220px;border-radius:10px;overflow:hidden;position:relative}
.mini-mapa::after{
  content:'';position:absolute;left:50%;top:50%;z-index:500;pointer-events:none;
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--accent);border:3px solid #0E1116;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ───── crédito ─────
   Discreto a propósito: quien abre esto está buscando a alguien, no leyendo
   quién hizo la herramienta. Pero tiene que poder saberlo. */
.credito{
  margin:14px 0 0;text-align:center;
  font:500 11px/1.4 var(--mono);color:var(--muted);letter-spacing:.03em;
}
.credito a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.credito a:hover,.credito a:focus-visible{color:var(--accent)}

/* ───── avisos flotantes ─────
   Van arriba y fijos: si fueran un toast de dos segundos, quien está mirando el
   mapa no los vería nunca. No tapan la navegación de abajo. Apilados en un solo
   contenedor para que no se monten entre ellos si coinciden. */
.avisos{
  position:fixed;left:8px;right:8px;top:calc(var(--toph) + 8px);z-index:950;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.avisos > *{pointer-events:auto}
.aviso-flotante{
  display:flex;flex-direction:column;gap:8px;
  padding:12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--accent);
  box-shadow:0 8px 24px #00000066;
  font-size:13px;color:var(--text);
}
.aviso-flotante .btnrow{margin:0}
@media (min-width:560px){
  .avisos{left:50%;right:auto;transform:translateX(-50%);width:min(520px,calc(100% - 16px))}
}

/* ───── muro de publicaciones ─────
   Rejilla de imágenes al estilo de una galería de redes: la foto manda y el
   texto va debajo. Dos columnas en teléfono, más en pantallas anchas. Las
   imágenes se piden firmadas y llegan tarde, así que la caja reserva su
   espacio desde el principio (aspect-ratio) para que la rejilla no salte. */
.muro{
  display:grid;gap:10px;margin-top:4px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.muro .empty{grid-column:1/-1}
.pub{
  display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;text-align:left;width:100%;color:inherit;
}
.pub:active{border-color:#43506180}
.pub-foto{
  position:relative;display:block;width:100%;aspect-ratio:1/1;
  background:var(--surface-2);overflow:hidden;
}
.pub-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Mientras llega la firma de S3, un pulso en vez de un hueco negro. */
.pub-foto.cargando::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,#ffffff10 50%,transparent 80%);
  animation:pulso 1.4s ease-in-out infinite;
}
@keyframes pulso{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.pub-foto.cargando::after{animation:none}}
/* Sin imagen —o si no cargó— la tarjeta sigue siendo útil: queda el texto. */
.pub-foto.sin-foto{aspect-ratio:5/2;background:var(--surface-2)}
.pub-foto.sin-foto::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,#ffffff08 8px,#ffffff08 16px);
}
.pub-red,.pub-pend{
  position:absolute;top:6px;padding:3px 7px;border-radius:999px;
  font:700 10px/1.3 var(--sans);letter-spacing:.02em;
  background:#0E1116CC;color:var(--text);backdrop-filter:blur(4px);
}
.pub-red{left:6px}
.pub-pend{right:6px;background:#F2B01EE6;color:#140A03}
.pub-txt{display:block;padding:8px 10px 10px}
.pub-txt b{display:block;font-size:13px;line-height:1.3;color:var(--text)}
.pub-meta{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
/* En el detalle la imagen se ve completa: recortarla puede esconder justo el
   dato que se quiere leer (una dirección, un teléfono en el afiche). */
.pub-foto.grande{aspect-ratio:auto;border-radius:10px;margin-bottom:12px;min-height:120px}
.pub-foto.grande img{height:auto;object-fit:contain}

/* ───── foto del reporte ───── */
.foto{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:10px 12px;border:1px dashed var(--line);border-radius:10px;margin:4px 0 12px;
}
.foto label.btn{cursor:pointer}
/* Los dos caminos, cámara y galería, con el mismo peso: ninguno es "el otro". */
.foto-btns{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.foto-btns .btn{flex:1;min-width:150px}
.foto .log{margin:0}
.foto img,.foto-vista img{
  max-width:100%;border-radius:10px;border:1px solid var(--line);
}
.foto-vista{margin:14px 0}

/* ───── confirmación de envío ───── */
.confirma{text-align:center;padding:8px 0}
.confirma h3{font-size:18px;margin:14px 0 8px}
.confirma-ok{
  width:56px;height:56px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;font-size:28px;
  background:color-mix(in srgb,var(--s-terminado) 22%,transparent);
  color:var(--s-terminado);
}
.folio{
  margin:16px 0;padding:12px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);
}
.folio span{
  display:block;font:600 10px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.folio b{font:700 22px/1 var(--mono);letter-spacing:.12em;color:var(--accent)}

/* Sin barra de pestañas (visitante): el mapa ocupa hasta abajo. */
body.sin-tabs main{bottom:env(safe-area-inset-bottom)}
body.sin-tabs .toast{bottom:calc(env(safe-area-inset-bottom) + 14px)}

/* ───── contador junto a un título ───── */
.cuenta:not(:empty){
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:11px;background:var(--s-en_proceso);color:#0E1116;
  font:700 12px/1 var(--mono);vertical-align:middle;margin-left:6px;
}

@media (min-width:720px){
  .pad{max-width:720px;margin:0 auto}
  .sheet-panel{left:50%;transform:translateX(-50%);width:min(680px,100%);border-radius:16px 16px 0 0}
}