@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root{
  --green:#2f6b3f;
  --green-dark:#255733;
  --red:#b5341c;
  --ink:#23221d;
  --mute:#5c584d;
  --outer:#ded8c8;
  --card:#f4f1e9;
  --line:rgba(35,34,29,.32);
  --line-2:rgba(35,34,29,.18);
  --line-3:rgba(35,34,29,.14);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--outer);font-family:"Archivo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;color:var(--ink);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--green)}
a:hover{color:var(--green-dark)}
input,button{font-family:inherit}
button{touch-action:manipulation}
.cg-scroll::-webkit-scrollbar{display:none}
.cg-scroll{scrollbar-width:none}
@keyframes cgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

#root{min-height:100vh;display:flex;justify-content:center;background:var(--outer)}
.shell{width:100%;max-width:430px;min-height:100vh;background:var(--card);position:relative;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line-3);overflow-x:hidden}

.statusbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 18px 5px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.statusbar span:first-child{flex:none}
.statusbar .muted{opacity:.6;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}

.field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--mute)}
.field input{font-size:16px;padding:12px;background:#fff;border:1px solid rgba(35,34,29,.3);color:var(--ink);border-radius:0;width:100%}
.field-select{
  font-size:16px;padding:12px;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235c584d" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center/16px;
  border:1px solid rgba(35,34,29,.3);color:var(--ink);border-radius:0;width:100%;
  -webkit-appearance:none;appearance:none;
}
.field-select:invalid{color:var(--mute)}

.btn-primary{width:100%;padding:16px;background:var(--green);color:var(--card);border:0;font-weight:800;font-size:15px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.btn-primary:hover{background:var(--green-dark)}
.btn-link{background:none;border:0;color:var(--green);font-weight:700;font-size:13px;text-align:left;padding:4px 0;cursor:pointer}

.install-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  justify-content:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
}
.install-banner.show{display:flex}
.install-banner .card{
  width:100%;max-width:406px;background:var(--ink);color:var(--card);
  padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.install-banner .txt{flex:1;font-size:12.5px;line-height:1.4}
.install-banner .txt b{display:block;font-size:13.5px;margin-bottom:2px}
.install-banner button.act{background:var(--green);color:#fff;border:0;font-weight:800;font-size:12px;padding:9px 12px;white-space:nowrap;cursor:pointer}
.install-banner button.close{background:none;border:0;color:var(--card);opacity:.6;font-size:16px;padding:4px;cursor:pointer;line-height:1}

.update-banner{
  position:fixed;left:0;right:0;top:0;z-index:60;display:none;
  justify-content:center;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
}
.update-banner.show{display:flex}
.update-banner .card{
  width:100%;max-width:406px;background:var(--green);color:#fff;
  padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.update-banner .txt{flex:1;font-size:12.5px;line-height:1.4}
.update-banner .txt b{display:block;font-size:13.5px;margin-bottom:2px}
.update-banner button.act{background:#fff;color:var(--green);border:0;font-weight:800;font-size:12px;padding:9px 12px;white-space:nowrap;cursor:pointer}
.update-banner button.close{background:none;border:0;color:#fff;opacity:.75;font-size:16px;padding:4px;cursor:pointer;line-height:1}
.update-banner button.act[disabled]{opacity:.6;cursor:default}